Skip to main content

Integration

Step 1: Add the Click to Pay Scripts​

Include the following script tags in the <head> section of your HTML page:

<!-- This script is necessary for managing card payments -->
<script src='https://test-pay.dnapayments.com/checkout/payment-api.js'></script>

<!-- This script is required for integrating the Click to Pay button -->
<script src='https://test-pay.dnapayments.com/components/click-to-pay/click-to-pay-component.js'></script>

Step 2: Create a DOM Element​

Create a container where the Click to Pay button will be rendered:

<div id='click-to-pay-btn-container'></div>

Event Handlers for Click to Pay​

Step 3: Handling the onClick Event​

The onClick event is triggered when the Click to Pay button is clicked. You can use this handler to manage the click event:

function onClick() {
    console.log('ClickToPay button has been clicked');
}

Step 4: Handling Errors with onError​

The onError event handles errors that occur during the Click to Pay process. It is essential to handle these errors gracefully to ensure a good user experience:

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

Step 5: Handling the onCancel Event​

The onCancel event is triggered when a user cancels the Click to Pay transaction. Implement this callback to reset the checkout process or notify the user:

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

Step 6: Handling the onPaymentSuccess Event​

The onPaymentSuccess event is triggered when a payment is successfully processed. Use this handler to finalize the transaction and retrieve customer details:

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
}

Step 7: Creating a Combined Events Object​

You can create an events object that consolidates all event handlers for easier management:

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

Button Initialization​

Step 8: Configure paymentData​

Before initializing the Click to Pay button, you need to configure the paymentData object, which contains the details of the payment transaction, such as the currency, amount, and customer details.

const paymentData = {
    currency: 'GBP',  // The currency of the transaction
    description: 'Shoes',  // A brief description of the items or services being purchased
    paymentSettings: {
        terminalId: 'YOUR_TERMINAL_ID',  // Your terminal ID
        returnUrl: 'https://example.com/success.html',  // URL to redirect upon successful payment
        failureReturnUrl: 'https://example.com/failure.html',  // URL to redirect upon payment failure
        callbackUrl: 'https://example.com/callback',  // URL for server-to-server callbacks
        failureCallbackUrl: 'https://example.com/failure-callback'  // URL for handling callback failures
    },
    customerDetails: {
        accountDetails: {
            accountId: 'uuid000001'  // Unique identifier for the customer account
        },
        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',  // Item name
            quantity: 1,  // Quantity of the item
            unitPrice: 24,  // Price per unit
            taxRate: 20,  // Tax rate applied
            totalAmount: 24,  // Total amount for this item
            totalTaxAmount: 4,  // Total tax amount for this item
            imageUrl: 'https://www.example.com/logo.png',  // URL of the item's image
            productUrl: 'https://www.example.com/AD6654412.html'  // URL to the product page
        }
    ],
    deliveryType: 'service',  // Type of delivery (e.g., service, physical)
    invoiceId: 'YOUR_INVOICE_ID',  // Unique identifier for the transaction invoice
    amount: 24  // Total transaction amount
};

Step 9: Initialize the Button​

To initialize the Click to Pay button and configure it for processing transactions, use the following method:

window.DNAPayments.ClickToPayComponent.create(
    document.getElementById('click-to-pay-btn-container'),  // The container element where the button will be rendered
    events,  // The events object containing all your event handlers
    ['visa', 'mastercard'],  // Optional: Array of card brands to display on the button
    'YOUR_ACCESS_TOKEN',  // Your access token
    paymentData  // Your configured payment data
);
info

The access token returned from the API is an object that includes several fields such as access_token, expires_in, token_type, and others. Only the access_token field should be passed during button initialization. For more details on how to obtain the access token, follow the instructions outlined here.

info

When obtaining the access token, make sure to pass the following scopes to ensure proper initialization of the button: payment integration_seamless.

This integration guide provides all necessary steps to integrate the Click to Pay button into your website, including loading the scripts, setting up event handlers, configuring payment data, and initializing the button. Make sure to replace placeholders like YOUR_ACCESS_TOKEN, YOUR_TERMINAL_ID, and YOUR_INVOICE_ID with your actual data.