> 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

`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 **Clearpay** in the UK) or the Afterpay/Clearpay logo instead of any virtual Visa/Mastercard details.

## Implementation Example

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

```javascript
afterpayButton.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.
    }
};
```

> **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

| 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 Order Token.    |
| `authToken` | string | The Virtual Card Auth Token. |

## Error Handling

See [Error handling](error-handling.mdx) for details on managing failed checkouts.

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