Full Integration Example

Below is a comprehensive example that combines all the steps and event handlers to integrate the Apple Pay Button into your website.
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src='https://test-pay.dnapayments.com/components/apple-pay/apple-pay-component.js'></script>
    <script>
        function onClick() {
            console.log('Apple Pay 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 createApplePayButton() {
            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.ApplePayComponent.create(
                    document.getElementById('apple-pay-btn-container'),
                    paymentData,
                    events,
                    token
            )
        }
        window.addEventListener('load', () => {
            createApplePayButton()
        });
    </script>
</head>
<body>
    <div id='apple-pay-btn-container' style='width: 100%; height: 46px;'></div>
</body>
</html>
Full Integration Example​

Full Integration Example
