Full Integration Example

Below is a comprehensive example that combines all the steps to integrate the PayPal button, including initialization, configuration, and event handling.
<!DOCTYPE html>
<html>
<head>
    <title>PayPal Integration Example</title>
    <!-- Include the PayPal component script -->
    <script src="https://test-pay.dnapayments.com/components/paypal/paypal-component.js"></script>
</head>
<body>

    <h2>Checkout</h2>
    <p>Product: Awesome T-Shirt</p>
    <p>Price: £10.00</p>

    <!-- Container for the PayPal button -->
    <div id="paypal-button-container"></div>

    <script>
        const params = {
            terminalId: 'YOUR_TERMINAL_ID',
            containerElement: document.getElementById('paypal-button-container'),
            environment: 'sandbox', // Use 'sandbox' for testing
            buttonStyle: {
                layout: 'vertical',
                color:  'gold',
                shape:  'rect',
                label:  'paypal'
            },
            events: {
                onClick: () => {
                    console.log('PayPal button clicked');
                },
                onBeforeProcessPayment: () => {
                    console.log('Processing payment...');
                    // This is where you would typically get a fresh token from your server
                    // and finalize the payment details.
                    return new Promise((resolve, reject) => {
                        // Replace with a call to your server to get a token
                        const authToken = 'YOUR_AUTH_TOKEN';

                        const paymentData = {
                            amount: 10.00,
                            currency: 'GBP',
                            invoiceId: 'INV-12345',
                            description: 'Awesome T-Shirt',
                            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: '44-07123456789',
                                        country: 'GB'
                                    }
                                },
                                email: 'example@email.com',
                                mobilePhone: '44-07123456789'
                            },
                            orderLines: [
                                {
                                    name: 'Awesome T-Shirt',
                                    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'
                        };

                        if (!authToken) {
                            return reject(new Error('Auth token is not available'));
                        }

                        resolve({
                            paymentData: paymentData,
                            token: authToken
                        });
                    });
                },
                onPaymentSuccess: (response) => {
                    console.log('Payment successful', response);
                    // Redirect to a success page or display a success message
                    window.location.href = 'https://your-website.com/success?invoiceId=' + response.invoiceId;
                },
                onCancel: () => {
                    console.log('Payment cancelled by user');
                    // Optionally, you can redirect to a cancellation page or reset the UI
                },
                onError: (error) => {
                    console.error('An error occurred', error);
                    // Display an error message to the user
                    const errorContainer = document.getElementById('error-container');
                    if (errorContainer) {
                        errorContainer.innerText = 'An error occurred during payment. Please try again.';
                    }
                }
            }
        };

        // Initialize the component
        DNAPayments.PayPalComponent.init(params)
            .then(payPalComponent => {
                console.log('PayPal component initialized successfully');
            })
            .catch(error => {
                console.error('Failed to initialize PayPal component', error);
                const container = document.getElementById('paypal-button-container');
                if (container) {
                    container.innerText = 'Could not load PayPal button. Please refresh the page.';
                }
            });
    </script>

    <div id="error-container" style="color: red;"></div>

</body>
</html>
Full Integration Example​

Full Integration Example
