Afterpay ButtonGetting Started

Process the Credit Card

AfterpayButton.onComplete - This property allows a custom function to be defined, that is called when the Afterpay checkout is completed. The function receives an event with a data property containing the virtual card object and status.

All successful Afterpay checkouts have a status of SUCCESS.
event.data.status = "SUCCESS".

Note

Customer Experience The best customer experience comes from hiding the credit card information and auto-submitting the order within the onComplete function.

Warning - Virtual Visa or Mastercard

For security reasons, never display any details of the virtual Visa or Mastercard we provide to you.

  • If the order is not auto-submitted, and customers are redirected to an order review page. Always mask the name (Visa/Mastercard) and any portion of the card number.

  • Mask the virtual card details on checkout pages, order confirmation pages and in any emails related to order confirmation or cancellation.

  • Best practice is to display the word Afterpay (or Cash App Afterpay in the US, and Clearpay in the UK) or the Afterpay/Clearpay or Cash App Afterpay logo instead of any virtual Visa/Mastercard details.

Implementation Example

Modify the code sample below to match your credit card fields:

1afterpayButton.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};
Note

The virtual Visa card (US, UK, CA) or Mastercard (AU) must be authorized within 60 mins of being issued.

Billing Address

You can use the customer’s address as the Billing Address for the credit card.

Data Objects

Virtual Card object

AttributeTypeDescription
cardTypestringVisa (US, UK, CA) or Mastercard (AU).
cardNumberstring16 digit card number
e.g. 4111 1111 1111 1111
cvcstringe.g. 123
expiryMonthStringe.g. 12
expiryYearStringe.g. 2022

Checkout Tokens

AttributeTypeDescription
tokenstringThe Afterpay Order Token.
authTokenstringThe Virtual Card Auth Token.

Error Handling

See Error handling for details on managing failed checkouts.

Note

The information on this page also applies to Cash App Afterpay (US) and Clearpay (UK).