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

Use an AI agent

Import this component
Import this component from https://developer.paddle.com/r/express-checkout.json and open the code for editing. IMPORTANT: preserve the component exactly as-is. Do NOT change colors, CSS variables, Tailwind classes, spacing, fonts, or any visual styles. Do NOT regenerate or restyle the UI. Create files from the registry JSON verbatim and show the code tree.

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?