Paddle Logo
Get Started
Guides
APIs
Webhooks
Reference
Guides
Guides
How Tos
Checkout
Inline Checkout
Overlay Checkout
Pass parameters to the Checkout
Post-Checkout
Pricing
Coupons
Displaying Localized Prices
Overriding Checkout Prices
Offering Volume Discounts
Subscriptions
Access Management using webhooks
Cancel & Pause Subscriptions
Metered Billing for Subscriptions
Payment Failures
Per-seat Billing for Subscriptions
Trials
Update Payment Details
Upgrade & Downgrade Subscriptions
Track and Report
Affiliate Tracking
Paddle Audience
Download Prompts & Buttons
Measure Conversion

Inline Checkout

Appearance

The inline checkout is an iframe that is embedded within your own webpage when the checkout is loaded. The checkout can be customized using your own branded checkout for maximum conversion.

If you prefer not to use the Inline Checkout, you can alternatively use the Overlay Checkout (overlay on your page).

Import Paddle.js

The paddle.js library can be imported by linking to Paddle’s CDN resource. Following the inclusion of the library, you must call the Paddle.Setup() method with your Paddle Vendor ID.

preparing...

Embed your Inline Checkout

To implement the inline checkout, you will need to specify a div element within your form where the Paddle iframe should be rendered. You also need to pass the parameter method: 'inline' to Paddle.js.

Displaying product information

The content rendered in the inline checkout is a minimal version of the overlay checkout so that you have the flexibility to display sale information in the way that you want. For this reason, you will need to show the following information elsewhere in your page:

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

Collecting and passing in the below details is also recommended. This ensures that the only checkout stage rendered is the payment information stage:

Required parameters

The following parameters are required to ensure the checkout is displayed correctly:

  • frameTarget: (String) the class name of the div element where the checkout should be rendered
  • frameStyle: (CSS String) styles to apply to the checkout div, for example background color. Please ensure the minimum width (min-width) is set at or above 286px with checkout padding disabled, or 312px with checkout padding enabled. Click here for more information on checkout padding. Note that frame height should not be set here, but in the below parameter.
  • frameInitialHeight: (int) height in pixels of the div on load
preparing...

Loading behaviour

The inline checkout can be loaded in response to an event, or triggered on page load. There may be a slight delay before it is rendered after the main page contents have loaded.

The loadCallback parameter can optionally be specified to trigger a function when the checkout is opened. This can be used, for example, to display a spinner or loading bar while the checkout is initialising, and then hide it when the checkout is ready.

Updating in-page information

Checkout prices may update in response to events such as adding a coupon or removing sales tax by submitting a VAT registration number. When implementing the inline checkout, it is recommended to update your in-page pricing in response to these changes.

The following example shows how in-page elements displaying the net price, sales tax amount, total price and subscription billing periods could be refreshed after each stage of the checkout, including changing the checkout currency.

preparing...

Branded Inline Checkout

Once you've chosen the inline version of the Paddle Checkout, you gain access to almost 50 styling options. This lets you to alter the design of the checkout to more seamlessly fit within your page, all without any further input needed from your Engineering team.

For more tips on how to use these options to create a high-converting checkout experience, see our guide on how to brand your checkout.

Once it's embedded, simply go to the Checkout section in the Paddle Dashboard and then navigate to Branded Inline Checkout.

The available styles are further explained on this page. For tips on how to design your inline checkout experience check out our guide on creating a branded checkout.

Before we jump into the styling options, we recommend viewing the Branded Inline Checkout section on a screen resolution of 1284 pixels wide or greater, otherwise the Preview will wrap. Now that's sorted, let's look at the different options...

Buttons

The inline checkout can show a few different buttons like ‘Pay / Subscribe Now’, ‘Pay by Card’, ‘Change Payment Method’, ‘Cancel’ and more.

On the right-hand side of the Inline Checkout Styles section you can see a preview of changes you make to your design. This preview shows the ‘Pay Now’ button as an example of a 'primary button', and ‘Change Payment Method’ to represent a 'secondary button'.

Under this initial Buttons section, click the various options to customize the button width, font size & color, border designs, and more.

General

The first set of options in the General section let you change the 'focus state' of your input boxes and buttons. This means that once clicked, these elements would show a border and shadow around them. Even if you've otherwise removed any borders from them.

Secondly, you can select whether or not the checkout form should stretch full width within the iframe, or retain some padding on the left and right sides. This lets you stretch the checkout to the width of the container it's embedded in.

Inputs

Input fields are the boxes where customers will enter their details, like ‘Card Number’, ‘Name’ and so on. From the Inputs section you can style the labels that accompany input fields (the names of the fields), as well as both the placeholder text and user-entered text in those input boxes.

If you don't want any labels, you can turn them off. However, note that the label position (the option that lets you move the label to the side or above the field it relates to) only affects the display on desktop machines, not on mobile. On mobile devices it displays the labels to the 'top-left' of the input boxes.

The final option in Inputs is the checkbox we show for marketing opt-in.

Links

The Paddle Checkout also sometimes includes links, like the option ‘Add Coupon’. These links can be styled with font sizing and coloration (of the default link and its hover color).

Messages

Finally we have the Messages section. This includes:

  • Paddle's footer message to keep the checkout compliant
  • A notification bar, which confirms when a coupon has been applied

You can style these with border and background colors and font sizing so that they either blend in or jump out depending on your preference.

However, please remember that the content of the footer message must remain legible at all times to keep your checkout legally compliant!

Fonts

You can also select a system font, which will change all the text on the checkout. Note that in some places - like the primary button - the font will show with a bold weight, otherwise it will be the Regular/Medium weight of that font.

System fonts are fonts that come pre-installed on your - and your customers' - operating systems. This means that you can be sure the customer will have it installed, that it will remain consistent in appeaerance across Mac and Windows, and will display properly in every language the checkout supports.

The fonts are:

  • Lato
  • Lucida Grande
  • Verdana
  • Arial
  • Georgia
  • Times New Roman

Lato is the default font, which falls back to “Helvetica Neue”, HelveticaNeue, Helvetica, Arial, sans-serif on Windows. The fallbacks of any selected font will display in the interface when selected.