One-page inline checkout

What's new?

We've released one-page checkout in early access. This lets customers enter all their details and complete purchase on a single page. It's available for inline 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.

Early access program guidelines

Why are we doing this?

While our multi-page checkout is fully optimized and high performing, a one-page experience is something that we know customers prefer. Popularized by ecommerce platforms like Shopify, one-page checkout experiences remove friction from the customer journey and streamline the purchase process.

What's included?

For this stage of the early access program, we've released one-page checkout for inline checkout. You can present one-page checkout by passing a new variant parameter when opening a checkout or initializing Paddle.js.

One-page inline checkout supports all the core features of Paddle Checkout, including:

As with our multi-page inline checkout, we automatically present customers with relevant payment options based on their location, currency, and the kind of items they're purchasing.

Are there any limitations?

While in early access, there are some limitations that we expect to resolve for general availability.

• Full checkout branding options are coming soon.

  Payment method tabs use the brand color from the overlay checkout settings page. In a future update, we'll add an updated screen for branding inline checkout to the Paddle dashboard.

• One-page checkout is available for inline checkout only.

  Overlay checkout is part of the next stage of testing.

What do we need from you?

We're keen to hear about how you feel the experience works, as well as any feedback from customers using your checkout. To send us feedback, use the feedback button at the top-right or email us at sellers@paddle.com. We may contact you during the early access program to get your thoughts.

How do I get it?

  One-page inline checkout enabled

You're part of the early access program for one-page checkout, so you're ready to start testing.

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.

What's the timeline for release?

We're planning to release one-page checkout in multiple stages.

All dates are estimates and may change depending on testing and feedback.

Summary of changes to fields

Paddle.js

Paddle.Checkout.open() method

See: Paddle.Checkout.open()

Paddle.Initialize method

See: Paddle.Initialize()

Next steps

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

• Pass a new parameter to Paddle.js

  Pass variant with the value one-page to Paddle.Checkout.open() or to Paddle.Initialize() as a checkout setting. If omitted, Paddle.js presents customers with the multi-page checkout experience.

• Remove breadcrumbs and test your checkout journey

  If you've built a 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.

• Review and update your checkout frame initial height

  When opening a 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.

• Test checkout events

  While Paddle.js events have not 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.

We've updated our docs with information about the new one-page inline checkout, including Paddle.js reference guides and our inline checkout overview guide.

Learn more