Full Integration Example

Below is a comprehensive example that combines all the steps and event handlers to integrate the Apple Pay Express Checkout 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
        }
        
        async function onShippingContactSelected(resolve, reject, event)
        {
            const { countryCode } = event.shippingContact;
            if (countryCode !== 'GB') {
                const update = {
                    // Get the total from the application state.
                    newTotal: {
                        amount: parsedPaymentData.amount,
                        type: 'final'
                    },
                    errors: [new ApplePayError('shippingContactInvalid',
                            'countryCode', 'Cannot ship to the selected Country')]
                };
                resolve(update);
                return;
            }
            const update = {
                newTotal: {
                    amount: parsedPaymentData.amount,
                    type: 'final'
                },
                newShippingMethods: [
                    {
                        'label': 'Fast Shipping',
                        'detail': 'Arrives in 2 days',
                        'amount': '5.00',
                        'identifier': 'FastShip'
                    },
                    {
                        'label': 'Collect yourself',
                        'detail': 'Collect today',
                        'amount': '0.00',
                        'identifier': 'Collect'
                    }
                ]
            };
            resolve(update)
        }
        
        async function onShippingMethodSelected(resolve, reject, event) {
            const shippingMethod = event?.shippingMethod
            const update = {
                newTotal: {
                    amount: parsedPaymentData.amount +
                            parseFloat(shippingMethod.amount),
                    type: 'final'
                }
            };
            resolve(update)
        }

        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 createApplePayExpressCheckoutButton() {
            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 payload = {
                requiredShippingContactFields: ['postalAddress', 'email',
                    'phone'],
                requiredBillingContactFields: ['postalAddress'],
                shippingMethods: [
                    {
                        'label': 'Free Shipping',
                        'detail': 'Arrives in 5 to 7 days',
                        'amount': '0.00',
                        'identifier': 'FreeShip'
                    },
                    {
                        'label': 'Fast Shipping',
                        'detail': 'Arrives in 2 days',
                        'amount': '5.00',
                        'identifier': 'FastShip'
                    },
                    {
                        'label': 'Collect yourself',
                        'detail': 'Collect today',
                        'amount': '0.00',
                        'identifier': 'Collect'
                    }
                ]
            }
            const events = {
                onClick,
                onError,
                onShippingContactSelected,
                onShippingMethodSelected,
                onPaymentSuccess,
                onCancel
            }
            window.DNAPayments.ApplePayComponent.create(
                    document.getElementById('apple-pay-btn-container'),
                    paymentData,
                    events,
                    token,
                    payload
            )
        }
        window.addEventListener('load', () => {
            createApplePayExpressCheckoutButton()
        });
    </script>
</head>
<body>
    <div id='apple-pay-btn-container' style='width: 100%; height: 46px;'></div>
</body>
</html>
Full Integration Example​

Full Integration Example
