Brand inline checkout

Inline checkout comes with over 50 styling options to let you create a checkout experience that's fully integrated with your app.

You can change colors, borders, shadows, text, and other options directly from your Paddle dashboard — no engineering resource needed.

How it works

You can change:

You can also change styles related to the checkout footer message. This unobtrusive message lets your customers know that Paddle is the merchant of record for the transaction.

Before you begin

You'll need to include Paddle.js on your page and pass a client-side token and Retain API key.

To open a checkout, you'll need to create products and prices and pass them to a checkout.

Get a step-by-step overview of how to build a complete checkout — including passing checkout settings. See: Build an overlay checkout or build an inline checkout

Get started

Go to Paddle > Checkout > Branded inline checkout to get started.

General

Font

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.

Focus state

The focus state colors determine the border and shadow color when a field is selected. For text boxes, this means a customer has clicked into the field to enter their information.

Checkout padding

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

Buttons

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

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

Buttons are either primary or secondary:

• The primary button is the main thing you want your customer to do, like "Pay Now" or "Continue".
• Secondary buttons are for other actions, like "Change Payment Method".

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

We recommend that you make your primary button appear more prominent than your secondary button to guide your customers through checkout.

Inputs

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

You can choose where labels appear relative to the field that they're describing, or turn them off altogether for a cleaner design. The placeholder fields in Paddle Checkout give customers an idea of what they should input in a field.

For compatibility, labels always show at the top-left of input fields on mobile devices.

Links

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

• Add Coupon
• Add a VAT number

You can change the text size and color of these links. We recommend styling them so they stand out to against other text on your page.

Messages

Every checkout includes a message to let your customers know that Paddle is the merchant of record for the transaction.

Checkout also shows a message to let customers know that a coupon was applied successfully.

You can change the font size, border colors, background colors, and how rounded the containers are.

It's important that customers know who they're buying from. When customizing checkout, make sure the checkout footer message is visible and legible to remain legally compliant.

Related pages