> This page is for Afterpay Button Documentation.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.afterpay.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.afterpay.com/_mcp/server.

# Process the Credit Card

When the customer clicks the Afterpay or Clearpay (UK) 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) 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".`

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

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

```javascript
onComplete: function (event) {
    const { status, virtualCard, token, authToken } = event.data;
    // The customer confirmed the payment schedule.
    // The virtualCard details can be inserted into your checkout
    if (status === 'SUCCESS') {
        const { cardNumber, cvc, expiryMonth, expiryYear } = virtualCard;
        document.getElementById('creditCardNumber').value = cardNumber;
        document.getElementById('creditCardCvc').value = cvc;
        document.getElementById('creditCardExpiryMonth').value = expiryMonth;
        document.getElementById('creditCardExpiryYear').value = expiryYear;
        // Trigger the submit of your credit card form for the customer
        document.getElementById('creditCardForm').submit()
    } else {
        // The customer cancelled the payment or closed the popup window.
    }
};
```

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

> **Note**
>
> **Billing Address** - You can use the customer's address as the Billing Address for the credit card.

## Data Objects

**Virtual Card Object**

| Attribute     | Type   | Description                                   |
| :------------ | :----- | :-------------------------------------------- |
| `cardType`    | string | Visa (US, UK, CA) or Mastercard (AU)          |
| `cardNumber`  | string | 16 digit card number e.g. 4111 1111 1111 1111 |
| `cvc`         | string | e.g. 123                                      |
| `expiryMonth` | String | e.g. 12                                       |
| `expiryYear`  | String | e.g. 2022                                     |

**Checkout Tokens**

| Attribute   | Type   | Description                          |
| :---------- | :----- | :----------------------------------- |
| `token`     | string | The Afterpay or Clearpay Order Token |
| `authToken` | string | The Virtual Card Auth Token          |

> **Note**
>
> The information on this page also applies to Clearpay (UK).