Full Integration Example

Below is a comprehensive example that combines all the steps and event handlers to integrate the Alipay+ button into your website.
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src='https://test-pay.dnapayments.com/components/alipay-wechat-pay/alipay-wechat-pay-component.js'></script>
    <script>
        function onClick() {
            console.log('Alipay+ 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 createAlipay+Button() {
            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.AlipayPlusComponent.create(
                document.getElementById('alipay-plus-btn-container'),
                events,
                {
                    token: token,
                    paymentData: paymentData
                }
            );
        }

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

Full Integration Example
