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 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.
1234567891011121314151617181var 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.
12345678910111213141Paddle.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
settings.variant | New | Which checkout experience you want to present. Pass one-page to use one-page checkout. |
Paddle.Initialize method
settings.variant | New | Which checkout experience you want to present. Pass one-page to use one-page checkout. |
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.