Paddle Billing
Search

Inline checkout

Inline checkout lets you create integrated checkout experiences. You display information about items and totals, letting Paddle take care of customer and payment processing.

Build integrated checkout experiences with inline checkout. Customers sign up and pay for subscriptions as part of your app or website, making for a seamless experience.

Using inline checkout, you can:

  • Create checkout experiences that are fully integrated with your app or website.
  • Choose whether to present a one-page or a multi-page checkout experience.
  • Let Paddle securely capture customer and payment information in an optimized checkout frame.
  • Display items, totals, and other information from Paddle on your page.
  • Use Paddle.js methods and events to build advanced checkout experiences.
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 $3,600 billed monthly and is at the top.

How it works

Inline checkout works by embedding a frame with Paddle checkout into your website or app.

The checkout frame handles collecting customer information and taking payment. Your page displays the items list, totals, and options for changing what's on the checkout. Paddle.js lets your page and the checkout frame interact with each other.

Paddle automatically creates a subscription when a checkout completes, ready for you to provision.

Customer journey

  1. Illustration showing a sample inline checkout implementation. The Paddle Checkout frame is on the left, and the items list is on the right.

    Customer opens a checkout

    You can open inline checkout by passing items or an existing transaction. Use Paddle.js to show and update on-page information, and Paddle.js methods to update items based on customer interaction.

  2. Illustration showing a sample inline checkout implementation. The Paddle Checkout frame is on the left and shows fields for email address, country, ZIP code, and card details. There's a blue 'Continue' button at the bottom.

    Customer enters their details on one screen

    Inline checkout asks customers for their email, country, and (in some regions) ZIP or postal code. On the same screen, customers are presented with the card payment form, as well as options to pay with PayPal, Apple Pay, Google Pay, or other local payment method.

     

    You can prefill customer details and present saved payment methods to speed up checkout.

  3. Illustration showing a sample inline checkout implementation. The Paddle Checkout frame is on the left and shows a large green checkmark.

    Checkout completed!

    Paddle routes every payment to the best acquirer for that sale to get the best possible chance of success. Customers enter a success workflow that you can build.

  4. Illustration showing a created subscription in Paddle. This is an abstract illustration, rather than a representation of an interface. In the background is a sheet with a user icon, recurring amount, MasterCard symbol, and an active tag. It's meant to represent a subscription page in the Paddle web app. In the foreground is a card that says 'webhook received: new subscription for premium plan.' It's meant to represent a subscription.created webhook event.

    Paddle creates a subscription

    Paddle automatically creates a subscription for the customer, ready for you to provision. The payment method the customer used is held on file for renewals or subscription changes.

Next steps