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 style it separately for light and dark mode, so it matches your app whichever theme customers use. The same styles apply to hosted checkouts.

You can change colors, borders, shadows, text, and other options directly from your Paddle dashboard — no engineering resource needed. You can also get and update styles using the Paddle API.

Go to Paddle > Checkout > Checkout configuration, then click the Styling tab to get started. Remember to click Save to save your settings.

Light and dark mode

Inline checkout styles have two parts:

• Shared settings apply in both light and dark mode. They control font, sizes, borders, layout, and labels.
• Mode colors are set separately for light and dark mode. They control the colors of buttons, inputs, labels, links, focus states, and messages.

Dark mode has its own default colors, so it's readable before you change anything. If you only offer one mode in your app, you only need to style that mode.

To style each mode:

1. Go to Paddle > Checkout > Checkout configuration, then click the Styling tab.
2. Change any shared settings that apply to both modes.
3. Choose a mode in the preview, then change its colors.
4. Switch to the other mode to check how checkout looks, and change its colors if you need to.
5. Click Save.

Choose the mode for a checkout

Paddle Checkout opens in light mode by default. To open it in dark mode, pass theme as dark in settings when you open a checkout, or set it as a default when you initialize Paddle.js.

Paddle.Checkout.open({
  settings: {
    displayMode: "inline",
    frameTarget: "checkout-container",
    frameInitialHeight: "450",
    frameStyle: "width: 100%; min-width: 312px; background-color: transparent; border: none;",
    theme: "dark"
  },
  items: [
    {
      priceId: "pri_01gsz8x8sawmvhz1pv30nge1ke",
      quantity: 1
    }
  ]
});

Set theme to match your app's current theme. For more information, see Pass checkout settings.

Attributes you can change

What good looks like

It's important that customers know who they're buying from, what they're buying, and how much they're paying.

To build an inline checkout that's compliant and optimized for conversion, your implementation must include:

1. If recurring, how often it recurs and the total to pay on renewal. If a trial, how long the trial lasts.
2. A description of what's being purchased.
3. Transaction totals, including subtotal, total tax, and grand total. Be sure to include the currency too.
4. The full inline checkout frame, including the checkout footer that has information about Paddle, our terms of sale, and our privacy policy.
5. A link to your refund policy, if it differs from the Paddle.com standard refund policy.

Before you begin

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

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

Overall

Overall settings apply across checkout. You also set your brand color here, but only overlay checkout uses it.

Font

The default font is Lato, a popular humanist font that fits into most designs. You can choose a system font instead.

If your chosen font can't be loaded on a customer device, Paddle falls back to similar fonts, then the system default.

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. You can set different focus colors for light and dark mode.

Checkout padding and width

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.

You can also set a maximum width for checkout. It must be at least 643px.

Buttons

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

• Pay now
• Subscribe now
• Start your free trial
• Update payment method
• Continue
• Pay another way

All buttons

Button width applies to all buttons.

Buttons show a focus ring when a customer selects them using their keyboard. You can turn this on or off for all buttons, but you can't change its color.

Payment method selector

The payment method selector lets customers choose how they want to pay, like card or PayPal. You can set its border color for each mode.

Primary and secondary buttons

Buttons are either primary or secondary:

• The primary button is the main thing you want a customer to do, like "Pay now" or "Continue."
• Secondary buttons are for other actions, like "Pay another way."

You can change the height, text size, border width, and how rounded the corners are for each button type, and turn its border on or off. Turning a border off sets its border width to 0, so to turn it off using the API, send 0 as the border width. These apply to both modes. Background, text, and border colors, including hover states, are set separately for light and dark mode.

We recommend that you make your primary button appear more prominent than your secondary button to guide customers through checkout. Check this in both modes, because a color that stands out in light mode might not in dark mode.

Inputs

Inputs are fields where customers enter their details. This includes the labels (for example, "Cardholder name"), the input boxes themselves, and checkboxes.

Labels

Label settings apply to all inputs. You can choose whether labels appear to the left of the field that they're describing or at its top left, or turn them off altogether for a cleaner design. You can also change their font size and weight, and their color for each mode.

Text and select inputs

Text and select inputs share the same settings. You can change their height, text size, border width, and how rounded the corners are, and turn a box shadow on or off.

The placeholder fields in Paddle Checkout give customers an idea of what they should input in a field. Input text, placeholder, background, and border colors are set separately for light and dark mode. Make sure placeholder text is readable against the input background in both modes.

Checkbox inputs

You can change how rounded checkbox corners are, and their background color for each mode.

Links

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

• Add discount code
• Add VAT number

You can change the text size of these links, and their color and hover color for each mode. We recommend styling them so they stand out against other text on your page.

Messages

Checkout shows messages to let customers know about changes, like when a discount was applied successfully.

You can change the font size and how rounded message containers are for all messages. Discount messages also have their own background and border colors, which you set for each mode. Discount messages only show in multi-page checkout.

Every checkout also includes a footer to let customers know that Paddle is the merchant of record for the transaction. You can't change how the footer looks.

Style checkout using the API

You can get and update checkout styles using the Paddle API, so you can script checkout setup or ask an AI agent to do it using the Paddle MCP server. They're the same styles that you manage in the Paddle dashboard. For how the checkout style entity works, see Checkout styles.

Your API key needs the checkout_settings.read permission to get styles, and checkout_settings.write to update them.

Get styles

Send a GET request to /checkout-styles. The response includes shared settings, plus colors for each mode in modes.light and modes.dark. If you haven't changed any styles, Paddle returns the default styles.

Update styles

Send a PATCH request to /checkout-styles, including only the fields that you want to change. Fields that you omit keep their current value, so you can change one color in one mode without sending the rest.

This example changes some dark mode colors. Shared settings and light mode stay the same.

{
  "modes": {
    "dark": {
      "buttons": {
        "primary": {
          "background_color": "#06C668",
          "background_color_hover": "#05B25E"
        }
      },
      "inputs": {
        "background_color": "#1F1F27",
        "border_color": "#3A3A46"
      },
      "labels": {
        "color": "#FFFFFF"
      }
    }
  }
}

To go back to a default style, send the default value for that field. The response example in the API reference shows the default styles for both modes.

Paddle checks every value before saving your changes. If a field isn't recognized or a value is out of range, like a button width under 70%, the request returns a bad_request error that lists the fields to fix, and nothing is saved.