Present customers with a one-page checkout

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 and overlay checkout by passing a new variant parameter to Paddle.js.

How it works

Previously, Paddle Checkout 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. If omitted, Paddle Checkout defaults to multi-page, so existing integrations aren't impacted.

Customer journey

Examples

Overlay checkout

This example opens a one-page overlay checkout. It passes the settings object to the Paddle.Checkout.open() method, meaning settings only apply to the opened checkout.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1var itemsList = [
2  {
3    priceId: 'pri_01gm81eqze2vmmvhpjg13bfeqg',
4    quantity: 1
5  },
6  {
7    priceId: 'pri_01gm82kny0ad1tk358gxmsq87m',
8    quantity: 1
9  }
10];
11
12Paddle.Checkout.open({
13  settings: {
14    displayMode: "overlay",
15    variant: "one-page"
16  },
17  items: itemsList,
18});

Inline checkout

This example opens a one-page inline checkout. It passes the settings object to the Paddle.Initialize() method, meaning settings apply to all checkouts opened on the page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
1Paddle.Initialize({
2  token: 'live_7d279f61a3499fed520f7cd8c08', // replace with a client-side token
3  checkout: {
4    settings: {
5      displayMode: "inline",
6      variant: "one-page",
7      theme: "light",
8      locale: "en",
9      frameTarget: "checkout-container",
10      frameInitialHeight: "450",
11      frameStyle: "width: 100%; min-width: 312px; background-color: transparent; border: none;"
12    }
13  }
14});

Summary of changes to fields

Paddle.js

Paddle.Checkout.open() method

See: Paddle.Checkout.open()

Paddle.Initialize method

See: Paddle.Initialize()

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, 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() or to Paddle.Initialize() 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 haven't changed, the checkout flow has changed. Check that Paddle.js events emitted still work for you. For example, checkout.customer.created 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, our inline checkout overview guide, and our overlay checkout overview guide.

Learn more