@paddle

The official Paddle JavaScript SDK and TypeScript wrapper for Paddle Billing (v2). Provides initializePaddle, Paddle.Checkout.open(), and Paddle Retain integrations as TypeScript-typed utilities that load Paddle.js securely from the CDN. The shadcn registry exposes drop-in components and wiring patterns for checkout overlays, pricing pages, and subscription management screens. Supports TypeScript 4.1+. Works with Paddle Billing only (not Paddle Classic v1). Free to integrate; Paddle charges transaction fees. Use for: adding Paddle-powered self-serve checkout, subscription upsell flows, or billing management screens to a React or Next.js app.

14 components react shadcn-cli

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://developer.paddle.com/r/registry.json

pnpm pnpm dlx shadcn@latest add https://developer.paddle.com/r/registry.json

bun bunx shadcn@latest add https://developer.paddle.com/r/registry.json

fetch registry curl -s https://developer.paddle.com/r/registry.json

Components

14 total

Paddle helpers lib

Shared display types, format utilities, and payment method display for Paddle UI components. No SDK dependency — safe to install without @paddle/paddle-js.

npx shadcn@latest add https://developer.paddle.com/r/paddle-helpers.json

Paddle client utilities lib

Paddle.js initialization singleton, SDK type re-exports, checkout event mapper, and SDK-layer hooks used by all client-side Paddle blocks.

npx shadcn@latest add https://developer.paddle.com/r/paddle-client.json

Pricing select cards component

Selectable pricing cards with localized prices from Paddle, available in stacked and grid layouts. Uses RadioGroup for single-plan selection — designed for exp…

npx shadcn@latest add https://developer.paddle.com/r/pricing-select-cards.json

Express checkout block

Mobile-first checkout experience with pricing cards and sheet-style checkout drawer. Automatically resizes based on the height of the checkout.

npx shadcn@latest add https://developer.paddle.com/r/express-checkout.json

Billing interval toggle component

Segmented control for switching between billing intervals. Renders labels automatically from interval keys (month -> Monthly, year -> Annually). Designed for p…

npx shadcn@latest add https://developer.paddle.com/r/billing-interval-toggle.json

Pricing cards component

Responsive pricing tier cards with plan name, localized price, feature list, and per-card CTA. Supports current-plan highlighting and selection state for prici…

npx shadcn@latest add https://developer.paddle.com/r/pricing-cards.json

Pricing display block

Pricing section with localized prices, billing interval toggle, and built-in overlay checkout. Supports current-plan highlighting and plan change selection flo…

npx shadcn@latest add https://developer.paddle.com/r/pricing-display.json

Checkout summary component

Order summary for inline checkout: line items, totals, recurring/trial info, and refund policy link. Compliance-ready display for Paddle inline checkout.

npx shadcn@latest add https://developer.paddle.com/r/checkout-summary.json

Inline checkout block

Inline checkout block with order summary, Paddle payment frame, and real-time event updates. Supports reactive item changes, plan switching, and quantity updat…

npx shadcn@latest add https://developer.paddle.com/r/inline-checkout.json

Subscription status card component

Subscription overview card showing plan details, status, billing cycle, line item breakdown, discount, scheduled changes, and optional action buttons. Supports…

npx shadcn@latest add https://developer.paddle.com/r/subscription-status-card.json

Subscription alert component

Contextual alerts for subscription events: payment failures, scheduled cancellations, pauses, trials. Derives the correct alert from subscription state automat…

npx shadcn@latest add https://developer.paddle.com/r/subscription-alert.json

Subscription payment card component

Payment method and next billing summary card. Auto-resolves payment method display labels from Paddle type/brand/last4 fields. Shows next payment amount, date,…

npx shadcn@latest add https://developer.paddle.com/r/subscription-payment-card.json

Plan change preview component

Compact plan change summary card with side-by-side plan comparison, proration breakdown, upgrade/downgrade badge, discount, scheduled change warning, and optio…

npx shadcn@latest add https://developer.paddle.com/r/plan-change-preview.json

Plan change breakdown component

Detailed financial breakdown of a subscription plan change. Invoice-style view with per-transaction line items, proration periods, tax, credits, and totals for…

npx shadcn@latest add https://developer.paddle.com/r/plan-change-breakdown.json