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

Pricing display

Full pricing section with localized prices, an interval toggle, and Paddle overlay checkout on selection.

Preview
Playground

Data

Mode

Plans

Install

pnpm
pnpm dlx shadcn@latest add @paddle/pricing-display
yarn
yarn dlx shadcn@latest add @paddle/pricing-display
npm
npx shadcn@latest add @paddle/pricing-display

Use an AI agent

Import this component
Import this component from https://developer.paddle.com/r/pricing-display.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

plans PricingDisplayPlan[] required
Plan tiers to render. Each priceId can be a single string (monthly-only) or a { month, year } object — mixing both is supported. Other fields: name, description, features, optional badge.
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".
countryCode string
ISO 3166-1 alpha-2 country code (e.g. US, GB) used to localise prices. Defaults to the customer's IP-detected country.
discountId string
Apply a Paddle discount by ID — affects the displayed prices and is carried through to checkout.
showOriginalPrice boolean
Default: true
When a discount is active, show the strike-through original price alongside the discounted price.
currentPriceIds string[]
Mark these price IDs as the customer's current plan. Switches the block from checkout mode to selection/current-plan mode — selecting a different plan emits onPlanSelect instead of opening Paddle checkout.
selectedPriceId string
Controlled selection. Use with onPlanSelect for a manage-subscription flow.
onPlanSelect (priceId: string) => void
Called when a plan is selected in selection mode. Receives the chosen priceId — you typically fire a plan-change API call from here.
onCheckoutComplete (data: CheckoutCompleteData) => void
Called when Paddle checkout completes (only fires in checkout mode, when currentPriceIds is unset).
className string
Extra Tailwind classes applied to the root element.

Usage notes

Each plan requires a price ID (starts with pri_). For multi-interval plans, pass priceId as an object keyed by interval (e.g. { month: 'pri_monthly', year: 'pri_yearly' }). Create and/or find yours in your Paddle dashboard under Catalog > Prices.

What it does

A full pricing page with localized prices, a billing interval toggle, and Paddle overlay checkout on plan selection.

It composes pricing cards, billing interval toggle, and Paddle.js together to deliver a complete pricing section.

When to use

  • You're building a pricing page and need a tier comparison and checkout experience flow in one drop-in component.
  • You want customers to be able to switch between monthly and yearly billing without a page reload.
  • You need a single component that also doubles as a plan-switcher inside a logged-in account. Use the currentPriceIds prop.

If you need finer control over the layout, remix the pricing cards and billing interval toggle components directly.

Was this page helpful?