---
name: "@paddle"
slug: "paddle"
description: "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."
category: "E-commerce/payments"
tags: ["buttons", "cards", "e-commerce", "forms", "hooks", "mobile", "payments", "saas"]
framework: "react"
license: null
author: "PaddleHQ"
website: "https://developer.paddle.com/"
github: "https://github.com/PaddleHQ"
registry: "https://developer.paddle.com/r/registry.json"
pro: false
pro_url: null
github_stars: null
component_count: 14
generated_at: "2026-07-28T08:00:50.948Z"
---

# @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.

## Links

- Website: https://developer.paddle.com/
- GitHub: https://github.com/PaddleHQ
- Registry JSON: https://developer.paddle.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/paddle
- This file: https://sh4dcn.vercel.app/md/paddle.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://developer.paddle.com/r/registry.json
pnpm dlx shadcn@latest add https://developer.paddle.com/r/registry.json
bunx shadcn@latest add https://developer.paddle.com/r/registry.json
# clone the source repo
git clone https://github.com/PaddleHQ.git
# fetch the raw registry index
curl -s https://developer.paddle.com/r/registry.json
```

## Components (14)

| name | type | description | install |
| --- | --- | --- | --- |
| paddle-helpers | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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` |

## For AI agents

```text
You are adding components from @paddle to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/paddle.md) for the component list.
2. Fetch the machine-readable index: https://developer.paddle.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: paddle).
```