Process the Credit Card

When the customer clicks the Afterpay, or Clearpay (UK), or Cash App Afterpay (US) checkout button, a popup appears and they are prompted to login and review their order details. They can choose a payment method and delivery address, and, if you are using Integrated Shipping, they see shipping options for that address.

Once the customer confirms their details, the popup closes and the customer returns to your site. Your page is notified of the completion through the onComplete callback.

The onComplete Callback

This property allows you to define a custom function that is called when the Afterpay or Clearpay (UK), or Cash App Afterpay (US) checkout is completed. This function is passed an event with a data property. This property contains the virtual card object and status as sub-properties.

All successful checkouts have a status of “SUCCESS”.

event.data.status = "SUCCESS".

You will need to modify the code sample below to match your credit card fields.

1
onComplete: function (event) {
2
    const { status, virtualCard, token, authToken } = event.data;
3
    // The customer confirmed the payment schedule.
4
    // The virtualCard details can be inserted into your checkout
5
    if (status === 'SUCCESS') {
6
        const { cardNumber, cvc, expiryMonth, expiryYear } = virtualCard;
7
        document.getElementById('creditCardNumber').value = cardNumber;
8
        document.getElementById('creditCardCvc').value = cvc;
9
        document.getElementById('creditCardExpiryMonth').value = expiryMonth;
10
        document.getElementById('creditCardExpiryYear').value = expiryYear;
11
        // Trigger the submit of your credit card form for the customer
12
        document.getElementById('creditCardForm').submit()
13
    } else {
14
        // The customer cancelled the payment or closed the popup window.
15
    }
16
};

Authorize the virtual card less than 60 minutes after the card is returned to the merchant.

Data Objects

Virtual Card Object

Checkout Tokens