> For the complete documentation index, see [llms.txt](https://developer.paddle.com/llms.txt).

# Present customers with a one-page checkout

Let customers review their order details, enter their address and payment details, and complete purchase all on one page.

---

## What's new?

We've released one-page checkout, letting customers enter all their details and complete purchase on a single page. It's available for [inline](https://developer.paddle.com/concepts/sell/branded-integrated-inline-checkout.md) and [overlay checkout](https://developer.paddle.com/concepts/sell/overlay-checkout.md) by passing a new `variant` parameter to Paddle.js.

## How it works

Previously, [Paddle Checkout](https://developer.paddle.com/concepts/sell/self-serve-checkout.md) presented customers with two pages to securely capture purchase information. The first page captured customer email address and address information, followed by a second page where customers entered their payment details.

With this update, we've added a new checkout variant that you can use to combine these steps onto one page. This means customers enter their email address, address information, choose a payment method, and complete purchase all on the one page.

You can choose which checkout experience that you present to customers by passing `variant` with the value `one-page` or `multi-page` [as a checkout setting](https://developer.paddle.com/build/checkout/set-up-checkout-default-settings.md). If omitted, Paddle Checkout defaults to `multi-page`, so existing integrations aren't impacted.

### Customer journey

{% tabs %}
{% tab-item title="Inline checkout" %}

{% journey-comparison %}

{% comparison-column title="One-page checkout" %}

{% comparison-step title="Enter address, location, and payment details" %}

{% /comparison-step %}

{% comparison-step title="Checkout complete" %}

{% /comparison-step %}

{% /comparison-column %}

{% comparison-column title="Multi-page checkout" %}

{% comparison-step title="Enter email address and address information" %}

{% /comparison-step %}

{% comparison-step title="Enter payment details" %}

{% /comparison-step %}

{% comparison-step title="Checkout complete" %}

{% /comparison-step %}

{% /comparison-column %}

{% /journey-comparison %}

{% /tab-item %}
{% tab-item title="Overlay checkout" %}

{% callout type="info" %}
For an improved customer experience, one-page overlay checkout covers the visible area of the page rather than appearing as a modal.
{% /callout %}

{% journey-comparison %}

{% comparison-column title="One-page checkout" %}

{% comparison-step title="Enter address, location, and payment details" %}

{% /comparison-step %}

{% comparison-step title="Checkout complete" %}

{% /comparison-step %}

{% /comparison-column %}

{% comparison-column title="Multi-page checkout" %}

{% comparison-step title="Enter email address and address information" %}

{% /comparison-step %}

{% comparison-step title="Enter payment details" %}

{% /comparison-step %}

{% comparison-step title="Checkout complete" %}

{% /comparison-step %}

{% /comparison-column %}

{% /journey-comparison %}

{% /tab-item %}
{% /tabs %}

## Examples

### Overlay checkout

This example opens a one-page overlay checkout. It passes the `settings` object to the [`Paddle.Checkout.open()`](https://developer.paddle.com/paddlejs/methods/paddle-checkout-open.md) method, meaning [settings only apply to the opened checkout](https://developer.paddle.com/build/checkout/set-up-checkout-default-settings.md).

<!-- Example showing opening a one-page overlay checkout -->
```javascript {% highlightLines="[13,14,15,16]" %}
var itemsList = [
  {
    priceId: 'pri_01gm81eqze2vmmvhpjg13bfeqg',
    quantity: 1
  },
  {
    priceId: 'pri_01gm82kny0ad1tk358gxmsq87m',
    quantity: 1
  }
];

Paddle.Checkout.open({
  settings: {
    displayMode: "overlay",
    variant: "one-page"
  },
  items: itemsList,
});
```

### Inline checkout

This example opens a one-page inline checkout. It passes the `settings` object to the [`Paddle.Initialize()`](https://developer.paddle.com/paddlejs/methods/paddle-initialize.md) method, meaning [settings apply to all checkouts opened on the page](https://developer.paddle.com/build/checkout/set-up-checkout-default-settings.md).

<!-- This example sets default checkout settings for all checkouts opened on a page. It includes common settings for `inline` checkouts, including `variant` to open a one-pge checkout. -->
```javascript {% highlightLines="[3,4,5,6,7,8,9,10,11,12,13]" %}
Paddle.Initialize({
  token: 'live_7d279f61a3499fed520f7cd8c08', // replace with a client-side token
  checkout: {
    settings: {
      displayMode: "inline",
      variant: "one-page",
      theme: "light",
      locale: "en",
      frameTarget: "checkout-container",
      frameInitialHeight: "450",
      frameStyle: "width: 100%; min-width: 312px; background-color: transparent; border: none;"
    }
  }
});
```

## Next steps

This change is live in Paddle.js now. You don't need to do anything to get the latest version of Paddle.js — we serve the latest version automatically. If you're using [the Paddle.js wrapper](https://github.com/PaddleHQ/paddle-js-wrapper/), update to the latest version in your project using your package manager.

You can choose which checkout experience to present to customers. Pass `variant` with the value `one-page` to [`Paddle.Checkout.open()`](https://developer.paddle.com/paddlejs/methods/paddle-checkout-open.md) or to [`Paddle.Initialize()`](https://developer.paddle.com/paddlejs/methods/paddle-initialize.md) as a checkout setting to present customers with the one-page checkout experience.

If omitted, `variant` defaults to `multi-page` and Paddle presents the multi-page checkout experience.

You shouldn't need to make major changes to your implementation to start using the one-page checkout experience, but we recommend that you:

- **Test your checkout journey**  
  If you've built an inline checkout flow that presents customers with breadcrumbs or other UI elements to illustrate where they are in the process, you can remove these now all checkout fields are on one page.
- **Test checkout events**  
  While [Paddle.js events](https://developer.paddle.com/paddlejs/events/overview.md) haven't changed, the checkout flow has changed. Check that Paddle.js events emitted still work for you. For example, [`checkout.customer.created`](https://developer.paddle.com/paddlejs/customer/checkout-customer-created.md) may have been used to indicate that a customer had moved to the second page of the checkout. There's now only one page, so it's now emitted once a customer has entered their email address and location information.
- **Review and update your checkout frame initial height — inline checkout only**  
  When opening an inline checkout, you can pass `frameInitialHeight` to set the height of the element where Paddle Checkout is loaded. You may need to increase this to accommodate the one-page checkout form.

We've updated our docs with information about the new one-page checkout, including [Paddle.js reference guides](https://developer.paddle.com/paddlejs/methods/paddle-checkout-open.md), [our inline checkout overview guide](https://developer.paddle.com/concepts/sell/branded-integrated-inline-checkout.md), and [our overlay checkout overview guide](https://developer.paddle.com/concepts/sell/overlay-checkout.md).
## Summary of changes

| Name | Type | Change | Entity | Description |
| --- | --- | --- | --- | --- |
| `variant` | Paddle.js param | added | Paddle.Checkout.open() | Display checkout as one-page or multi-page. |