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

# Pricing display

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

---

## 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](https://developer.paddle.com/sdks/components/pricing-cards.md), [billing interval toggle](https://developer.paddle.com/sdks/components/billing-interval-toggle.md), 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](https://developer.paddle.com/sdks/components/pricing-cards.md) and [billing interval toggle](https://developer.paddle.com/sdks/components/billing-interval-toggle.md) components directly.

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

## Install

```bash
npx shadcn@latest add @paddle/pricing-display
```

Also runnable with `pnpm dlx shadcn@latest add @paddle/pricing-display` or `yarn dlx shadcn@latest add @paddle/pricing-display`.

## 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"): Paddle environment. Must match the token above — sandbox token pairs with "sandbox", live token with "production".. Default: `"sandbox"`
- **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): When a discount is active, show the strike-through original price alongside the discounted price.. Default: `true`
- **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.