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.

Get complete control of the checkout experience by using inline checkout. Customers signup and pay for subscriptions as part of your app or website, making for a seamless experience that feels all yours.

Using inline checkout, you can:

  • Create checkout experiences that are fully integrated with your app or website.
  • 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 Apple Pay and PayPal, followed by a card payment form. On the right is an items list and totals. The grand total is $3600 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, and ZIP code. There is a blue 'Continue' button at the bottom.

    Customer enters their details

    Inline checkout asks customers for their email, country, and (in some regions) ZIP or postal code. You can prefill this information to skip this step entirely.

  3. Illustration showing a sample inline checkout implementation. The Paddle Checkout frame is on the left and includes two buttons for Apple Pay and PayPal, with the card payment form underneath. There is a button that says 'Pay by card' at the bottom.

    Customer chooses a payment method

    Customers land on a card payment form, or they can choose to pay with PayPal, Apple Pay, Google Pay, or other local payment method.

  4. 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.

  5. 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