For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
HomeGuides
HomeGuides
  • About Afterpay
    • What Is Afterpay?
    • How Does Afterpay Work?
  • Afterpay Button
      • Overview
      • Sandbox Environment
      • Add The Button
      • Process the Credit Card
      • Order Management
      • Launch
      • Changing the Appearance
    • Afterpay Messaging
  • Express Checkout
    • Express Checkout Overview
    • Adding the Afterpay Express Checkout Button
    • Process The Credit Card
    • Complete the Express Checkout Process
    • Integrated Shipping
    • Checkout Widget
  • Cash App Pay
    • Using the Cash App Pay Button
    • Getting Started
    • Advanced Rendering Control
    • Mobile Redirection
    • Customer On-File Payments
LogoLogo
On this page
  • Implementation Example
  • Data Objects
  • Virtual Card object
  • Checkout Tokens
  • Error Handling
Afterpay ButtonGetting Started

Process the Credit Card

Was this page helpful?
Previous

Order Management

Next
Built with

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).