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

Express checkout

Mobile-first checkout block with plan selection and a drawer-style payment flow.

Preview
Playground

Props

layout

Install

pnpm
pnpm dlx shadcn@latest add @paddle/express-checkout
yarn
yarn dlx shadcn@latest add @paddle/express-checkout
npm
npx shadcn@latest add @paddle/express-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".
plans PricingSelectPlan[] required
Plans rendered in the picker. Each entry needs a priceId and name; description, badge, and icon are optional.
defaultPriceId string
Pre-select a plan by priceId. Omit to require the customer to choose before the drawer opens.
layout "stacked" | "grid"
Default: "stacked"
Layout for the plan picker. stacked is best for mobile and narrow side panels; grid works at wider breakpoints.
customer CheckoutCustomer
Prefills checkout with an existing customer (email, address, business). Skips the checkout's email-collection step.
discountCode string
Apply a Paddle discount code. Mutually exclusive with discountId.
discountId string
Apply a discount by its Paddle ID. Mutually exclusive with discountCode.
customData Record<string, unknown>
Arbitrary metadata attached to the resulting transaction. Available on webhook events for downstream processing.
theme "light" | "dark"
Override the Paddle 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.
showNonExpressPaymentMethods boolean
Default: false
Show traditional card/PayPal methods alongside Apple Pay / Google Pay. By default the drawer only surfaces express methods to keep the flow short.
onComplete (data: CheckoutCompleteData) => void
Called when the customer completes payment successfully. Use it to grant access, redirect, or fire your own analytics.
onError (error: Error) => void
Called when Paddle.js fails to initialise or the checkout encounters a non-recoverable error.
submitLabel string
Override the label on the button that opens the drawer (default: Subscribe now).
className string
Extra Tailwind classes applied to the root element.

Usage notes

Each plan 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

Express checkout is the highest converting checkout experience for mobile apps and mobile-first workflows.

This component pairs a compact plan picker with a drawer-style express checkout that opens in-place, so customers stay on your page while making their purchase.

When to use

  • Mobile is the primary surface and you want the checkout sheet to slide up rather than open in a new view.
  • You're building a marketing or campaign page where the full pricing-then-checkout journey should live in a single hero section.
  • You want to keep the page chrome stable so the payment step doesn't feel like a context switch.

Prefer inline checkout when you need the order summary visible alongside the payment fields, or when you're embedding the checkout inside a longer onboarding flow rather than a standalone landing page.

Was this page helpful?