Inline Checkout

Inline checkout works by embedding an iframe on your page when the checkout loads. You can customize your checkout in your Paddle account, creating an experience that matches your branding to maximize conversion.

As your customer moves through the checkout, use events to dynamically update your page. With events, you can change totals text, present relevant information, or build breadcrumbs to highlight the journey through checkout.

Screenshot of an inline checkout built with Paddle It includes the checkout frame showing payment methods on the right. On the left is a list of items and totals.
  1. Add your domains in your Paddle vendor dashboard under Checkout > Request Domain Approval.
  2. Create a one-time product or subscription plan in your Paddle dashboard.

Implement inline checkout in four steps:

  1. Set up Paddle.js
  2. Embed inline checkout
  3. Show and update on-page information
  4. Brand your checkout

Paddle.js is a JavaScript library that lets you build rich, integrated buyer experiences on top of Paddle.

To start building a checkout, include Paddle.js on your page:


Your Vendor ID lets Paddle.js know which Paddle account this checkout is for.

Pass your vendor ID in the Paddle.Setup() method:


If you're testing in the Paddle sandbox, use the Paddle.Environment.set() method to set your environment to sandbox.


You don't need to set an environment if you're live.

Use the method to open your checkout.

Pass in parameters to tell Paddle where to display the inline checkout iframe, style and size, and product information:


Class name of the <div> element where the checkout should be rendered.Show all...


Styles to apply to the checkout <div>. min-width must be set to 286px or above with checkout padding off; 312px with checkout padding on. Use frameInitialHeight to set height.Show all...

min-width: 286px;background-color:transparent;min-width: 312px;background-color:transparent;

Height in pixels of the <div> on load. Do not include px. Recommended 450.Show all...

integer or string

ID of the product, subscription, or bundle that this checkout is for. Required if passthrough is not set.

Match pattern:

Display mode that the checkout should use.

Allowed values:

Make sure that your checkout frame height has enough space to grow to avoid scrollbars. The height of the frame depends on the number of payment methods you have:

Number of payment methodsMinimum recommended height

In this example, we pass the essential parameters to Paddle.Checkout.Open():


The Paddle checkout is a two-step process:

  1. The first step asks for the customer's location and email address.
  2. The second step asks for payment information.

If you have your customer's location and email address, you can prefill this information. The checkout opens on a page asking for payment details, making for a simple one-page checkout experience.


Prefill the customer email field on the checkout.


Prefill the customer country field on the checkout. Requires email to be prefilled. See: Supported countries

Match pattern:

Prefill customer 'ZIP/Postcode' field on the checkout. Requires country to be prefilled. See: Supported countries

You can load inline checkout when the page loads or in response to an event. There may be a slight delay before it's rendered after the main page content has loaded.

If you like, you can use the loadCallback parameter to trigger a function when the checkout is opened. For example, you could show a spinner or progress bar while the checkout initializes.

The inline checkout iframe doesn't include a breakdown of items. It's designed to handle capturing customer and payment information, giving you the flexibility to show information about what your customer is buying elsewhere on the page.

On your page, you'll need to show:

  • Product name or subscription plan name
  • Product price or subscription plan price and billing period
  • Quantity information, if required

This information may change as a customer moves through the checkout process. For example, if a customer adds a coupon or VAT number, then prices and totals may change.

In this example, we show and update net price, sales tax amount, total price, and subscription billing periods in response to changes in the checkout — including changing currency:


Inline checkout comes with over 50 styling options to let you create a checkout experience that's fully integrated. You can change colors, borders, shadows, text, and other options directly from your Paddle dashboard — no engineering resource needed.

Go to Checkout > Branded Inline Checkout in your Paddle dashboard to get started.

For the best editing experience, we recommend using a monitor with a screen resolution of at least 1284px wide. This means you'll be able to see the styling options and preview side-by-side.

The first set of options in the General section lets you change:

  • font
  • focus state of fields
  • checkout padding

The default font is Lato, a popular humanist font that fits into most designs. You can choose from a selection of system fonts instead. If your chosen font can't be loaded on your customer's device, Paddle falls back to Helvetica Neue, Helvetica, Arial, then the system default sans-serif.

Illustration showing focus state options and checkout padding

The focus state of fields determines the border color and shadow when a field is selected.

Checkout padding is on by default. Turn it off to let your checkout fill the full width of the iframe, which may be useful if you have your own padding set on your website.

Some buttons are shown as part of checkout, for example:

  • Pay Now
  • Subscribe Now
  • Pay by Card
  • Change Payment Method
  • Cancel

You can customize button size, text, color, and design using the options in the Button section.

Illustration showing inline checkout buttons annotated with options from the branded inline checkout page

Inputs are fields where customers enter their details. This includes the labels (e.g. "Cardholder name") and input boxes themselves.

You can turn off labels altogether for a more compact design. Labels show inside their respective fields until clicked.

Illustration showing inline checkout fields annotated with options from the branded inline checkout page

Inline checkout includes links for:

  • Add Coupon
  • Add a VAT number

Change the style of these using the options in the Links section.

Illustration showing inline checkout links annotated with options from the branded inline checkout page

The messages section lets you style:

  • The Paddle merchant of record footer message
  • The notification that appears when a coupon has been applied successfully
Illustration showing inline checkout messages annotated with options from the branded inline checkout page