Paddle Billing
Search

Early access

One-page inline checkout

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

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.

Illustration showing an inline checkout implementation. The Paddle Checkout frame is on the left and is on the payment page. It shows buttons for card, Apple Pay, and PayPal, followed by a card payment form that includes email address, country, and ZIP code. On the right is an items list and totals. The grand total is $3600 billed monthly and is at the top.
🧪

You're part of the early access program for one-page inline checkout, which means you can use it before it's generally available. To send us feedback, use the feedback button at the top-right or email us at sellers@paddle.com. Thanks for helping shape the future of the Paddle platform.

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.

1One-page checkout for inline checkout in early access.
2Early access extended, with the option to choose which experience you want to present and dark mode support.
3Q4 2024Early access program starts for overlay checkout.
4Q4 2024Full availability across the Paddle platform.

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

Summary of changes to fields

Paddle.js

Paddle.Checkout.open() method

settings.variantNewWhich checkout experience you want to present. Pass one-page to use one-page checkout.

See: Paddle.Checkout.open()

Paddle.Initialize method

settings.variantNewWhich checkout experience you want to present. Pass one-page to use one-page checkout.

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