For AI agents and LLMs: a structured documentation index is available at /llms.txt. Every page has a Markdown sibling — append .md to any URL.

Skip to content
Docs

Inline checkout

Full inline checkout experience with a live order summary that stays in sync as the customer changes plans.

Preview
Select plan:

Select a plan above to open the checkout.

Playground

Props

variant

summaryPosition

Install

pnpm
pnpm dlx shadcn@latest add @paddle/inline-checkout
yarn
yarn dlx shadcn@latest add @paddle/inline-checkout
npm
npx shadcn@latest add @paddle/inline-checkout

Props

clientToken string required
Paddle.js client-side token. Create one in your Paddle dashboard under Developer Tools > Authentication. Sandbox tokens start with test_; live tokens start with live_.
environment "sandbox" | "production"
Default: "sandbox"
Paddle environment. Must match the token above — sandbox token pairs with "sandbox", live token with "production".
items CheckoutOpenLineItem[] required
Line items to charge for. Each entry takes a priceId and optional quantity. Change this array to switch plans without remounting the checkout.
variant "one-page" | "multi-page"
Default: "one-page"
Paddle payment-form layout. one-page shows everything on a single screen; multi-page paginates the payment steps.
summaryPosition "start" | "end" | "top" | "bottom"
Default: "start"
Where the order summary sits relative to the checkout iframe. The component switches to a stacked layout on narrow viewports automatically.
theme "light" | "dark"
Override the checkout iframe's colour scheme. Defaults to matching the host page.
locale string
BCP 47 locale (e.g. en-GB, fr-FR) for the checkout copy.
successUrl string
Absolute URL (must start with http:// or https://) to redirect to after a successful checkout. Mutually exclusive with onComplete in most flows.
customer CheckoutCustomer
Prefill an existing customer (email, address, business). Skips email-collection.
customerAuthToken string
Auth token for an existing Paddle customer — enables saved payment methods and a one-click checkout.
discountCode string
Apply a discount by code. Mutually exclusive with discountId.
discountId string
Apply a discount by Paddle ID. Mutually exclusive with discountCode.
customData Record<string, unknown>
Arbitrary metadata attached to the resulting transaction.
policyUrl string
Link rendered alongside the summary (typically a refund or terms page). Pair with policyLabel to customise the link text.
policyLabel string
Default: "Refund policy"
Text for the policy link.
onComplete (data: CheckoutCompleteData) => void
Called when the customer completes payment successfully.
onEvent (event: PaddleEventData) => void
Called for every Paddle.js event emitted during checkout (loaded, payment-initiated, error, etc.). Useful for analytics.
onError (error: Error) => void
Called when Paddle.js fails to initialise or the checkout encounters a non-recoverable error.
className string
Extra Tailwind classes applied to the root element.

Usage notes

Each item requires a price ID (starts with pri_). Create and/or find yours in your Paddle dashboard under Catalog > Prices. Use sandbox price IDs while NEXT_PUBLIC_PADDLE_ENV is 'sandbox'.

What it does

Inline checkout embeds the Paddle Checkout payment form in your app or website, alongside your own order summary. There's no overlay or redirect, so the customer stays on your page for the whole purchase.

This component is a complete, compliant inline checkout experience. It includes a live order summary that stays in sync as the customer changes plans. The order summary includes line items, subtotal, tax, and recurring billing details.

If you're remixing this component to build your own inline checkout experience, you must make sure your inline checkout is compliant. A compliant checkout is important because it lets customers know who they're buying from, what they're buying, and how much they're paying.

Your implementation must include:

Illustration of an inline checkout implementation. On the left is the Paddle Checkout frame, and on the right is an items list. At the top of the items list is some text that says $3600, free for 14 days then billed monthly (1). Under this is an items list (2), followed by a totals table that includes subtotal, tax, and grand total (3). At the bottom is the Paddle.com footer (4) and a link to a refund policy (5).

  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.

When to use

  • You're want the checkout to feel like part of the your app or website rather than a separate modal.
  • You need to allow the customer to switch plans without remounting the form. The summary updates in place.

Prefer overlay checkout for a simple modal checkout experience, or express checkout for mobile-first or single-page conversion flows.

Was this page helpful?