> For the complete documentation index, see [llms.txt](https://developer.paddle.com/llms.txt).

# Inline checkout

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

---

## What it does

[Inline checkout](https://developer.paddle.com/concepts/sell/branded-integrated-inline-checkout.md) 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.

{% collapsible title="What good looks like" isOpen=false %}

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:

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.

{% /collapsible %}

## 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](https://developer.paddle.com/concepts/sell/overlay-checkout.md) for a simple modal checkout experience, or [express checkout](https://developer.paddle.com/sdks/components/express-checkout.md) for mobile-first or single-page conversion flows.

**Registry:** [`https://developer.paddle.com/r/inline-checkout.json`](https://developer.paddle.com/r/inline-checkout.json)

## Install

```bash
npx shadcn@latest add @paddle/inline-checkout
```

Also runnable with `pnpm dlx shadcn@latest add @paddle/inline-checkout` or `yarn dlx 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"): Paddle environment. Must match the token above — sandbox token pairs with "sandbox", live token with "production".. Default: `"sandbox"`
- **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"): Paddle payment-form layout. one-page shows everything on a single screen; multi-page paginates the payment steps.. Default: `"one-page"`
- **summaryPosition** ("start" | "end" | "top" | "bottom"): Where the order summary sits relative to the checkout iframe. The component switches to a stacked layout on narrow viewports automatically.. Default: `"start"`
- **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): Text for the policy link.. Default: `"Refund policy"`
- **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'.