Full Integration Example

Below is a comprehensive example that combines all the steps and event handlers to integrate the Click to Pay button into your website.
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- Include the necessary scripts for Click to Pay -->
    <script src='https://test-pay.dnapayments.com/checkout/payment-api.js'></script>
    <script src='https://test-pay.dnapayments.com/components/click-to-pay/click-to-pay-component.js'></script>
    <script>
        function onClick() {
            console.log('ClickToPay button has been clicked');
        }

        function onError(error) {
            console.log('Error occurred:', error);
            // Implement additional error handling logic
        }

        function onCancel(event) {
            console.log('Payment was cancelled:', event);
            // Reset the checkout state
        }

        function onPaymentSuccess(result) {
            console.log('Payment has successfully been processed', result);
            // Implement further actions such as redirecting to a success page or storing the payment details
        }

        function createClickToPayButton() {
            const token = 'YOUR_ACCESS_TOKEN';
            const paymentData = {
                currency: 'GBP',
                description: 'Shoes',
                paymentSettings: {
                    terminalId: 'YOUR_TERMINAL_ID',
                    returnUrl: 'https://example.com/success.html',
                    failureReturnUrl: 'https://example.com/failure.html',
                    callbackUrl: 'https://example.com/callback',
                    failureCallbackUrl: 'https://example.com/failure-callback'
                },
                customerDetails: {
                    accountDetails: {
                        accountId: 'uuid000001'
                    },
                    billingAddress: {
                        firstName: 'John',
                        lastName: 'Doe',
                        addressLine1: 'Fulham Rd',
                        postalCode: 'SW6 1HS',
                        city: 'London',
                        country: 'GB'
                    },
                    deliveryDetails: {
                        deliveryAddress: {
                            firstName: 'John',
                            lastName: 'Doe',
                            addressLine1: 'Fulham Rd',
                            addressLine2: 'Fulham',
                            postalCode: 'SW6 1HS',
                            city: 'London',
                            phone: '0475662834',
                            country: 'GB'
                        }
                    },
                    email: 'example@email.com',
                    mobilePhone: '+441234567890'
                },
                orderLines: [
                    {
                        name: 'Running shoe',
                        quantity: 1,
                        unitPrice: 24,
                        taxRate: 20,
                        totalAmount: 24,
                        totalTaxAmount: 4,
                        imageUrl: 'https://www.example.com/logo.png',
                        productUrl: 'https://www.example.com/AD6654412.html'
                    }
                ],
                deliveryType: 'service',
                invoiceId: 'YOUR_INVOICE_ID',
                amount: 24
            };

            const events = {
                onClick,
                onError,
                onPaymentSuccess,
                onCancel
            };

            window.DNAPayments.ClickToPayComponent.create(
                document.getElementById('click-to-pay-btn-container'),
                events,
                ['visa', 'mastercard'],  // Optional: Array of supported card brands
                token,  // Your authorization token
                paymentData  // Your configured payment data
            );
        }

        window.addEventListener('load', () => {
            createClickToPayButton();
        });
    </script>
</head>
<body>
    <div id='click-to-pay-btn-container' style='width: 100%; height: 46px;'></div>
</body>
</html>
Full Integration Example​

Full Integration Example
