> This page is for Afterpay Online Developer, version Main (default).
> For other versions, use one of these documentation indexes:
> - Main (default): https://developers.afterpay.com/afterpay-online-developer/main/llms.txt
> - v1: https://developers.afterpay.com/afterpay-online-developer/v-1/llms.txt
> - Chinese: https://developers.afterpay.com/afterpay-online-developer/chinese/llms.txt

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

# Get started with express checkout

Express checkout uses the same APIs as standard checkout. Before you configure integrated or deferred shipping, add an approved checkout button, create an express checkout token, and load Afterpay.js.

## Add an express checkout button

The checkout button is the customer entry point for express checkout. Place it on a product page, mini-cart, or cart page.

You can use an Afterpay-provided button asset or create a custom button:

### Use an Afterpay-provided button

Choose the appropriate Afterpay or Clearpay button from the [integration assets](/afterpay-online-developer/guides/marketing/brand-assets) and use the asset as supplied.

Add the asset inside a standard HTML `<button>` element. Each button must have:

* A unique `id` that Afterpay.js can target.
* A `data-afterpay-entry-point` value of `product-page`, `mini-cart`, or `cart`.
* A `data-afterpay-checkout-button-label` that identifies the button for analytics.

```html
<button id="afterpay-express-button"
        data-afterpay-entry-point="mini-cart"
        data-afterpay-checkout-button-label="Check out using Afterpay">
  <img src="/path/to/approved-afterpay-button.svg"
       alt="Check out using Afterpay">
</button>
```

### Use a custom button

You can build a custom button instead of using a provided asset. The button must follow the [Afterpay brand guidelines](/afterpay-online-developer/guides/marketing/brand-assets) and must be reviewed and approved by Afterpay before you use it in production. Contact your Afterpay account manager or merchant services representative to request approval.

Use the same `id`, `data-afterpay-entry-point`, and `data-afterpay-checkout-button-label` attributes shown in the provided-button example.

### Target multiple checkout buttons

If a page has multiple express checkout buttons, assign the same class to each button:

```html
<button class="afterpay-express-button">...</button>
<button class="afterpay-express-button">...</button>
```

Then use the class as the `target` in your shipping flow's Afterpay.js initialization:

```js
Afterpay.initializeForPopup({
  // ...
  target: '.afterpay-express-button',
});
```

## Create an express checkout

Create an order token by following the [Create a checkout](https://developers.cash.app/afterpay/guides/api-development/api-quickstart/create-a-checkout) guide. The request specifies the order amount, items, and other order details.

Create the token on your backend when the customer clicks the express checkout button. A new token is required for each order. If you store the token, support arbitrary string length and content because its format can change.

For express checkout:

* Set `mode` to `express`.
* For a popup flow, set `merchant.popupOriginUrl` to the origin that launches the popup.
* For a deferred redirect flow, set `merchant.redirectConfirmUrl` and `merchant.redirectCancelUrl` instead. See [Deferred Shipping](/afterpay-online-developer/guides/api-development/express-checkout-deferred-shipping#use-a-redirect-flow).

```json
{
  "amount": {
    "amount": "10.00",
    "currency": "AUD"
  },
  "consumer": {
    "givenNames": "Joe",
    "surname": "Consumer",
    "email": "joe@example.com"
  },
  "merchant": {
    "popupOriginUrl": "https://example.com"
  },
  "merchantReference": "merchant-order-123",
  "mode": "express"
}
```

To let the customer save Afterpay as a payment method during express checkout, see [Request Afterpay On File during express checkout](/afterpay-online-developer/guides/api-development/express-checkout-on-file).

## Load Afterpay.js

Both shipping guides define an `initAfterpay()` function. Define that function before loading Afterpay.js, then set the script's `onload` attribute to call it:

```html
<script src="https://portal.sandbox.afterpay.com/afterpay.js"
        async
        onload="initAfterpay()"></script>
```

## Choose a shipping flow

Continue with the shipping flow that matches your checkout:

| Integrated Shipping                                                             | Deferred Shipping                                                                                |
| ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| The customer selects shipping and completes the order within Afterpay checkout. | The customer returns to your site to select shipping and complete the order.                     |
| Best for fewer than five simple or tiered shipping options.                     | Best for five or more options, SKU-level shipping, time-slot booking, or other complex shipping. |
| Popup flow only.                                                                | Popup or redirect flow.                                                                          |

* [Set up express checkout with integrated shipping](/afterpay-online-developer/guides/api-development/express-checkout-integrated-shipping)
* [Set up express checkout with deferred shipping](/afterpay-online-developer/guides/api-development/express-checkout-deferred-shipping)