Preview
Change summary
Review the financial impact of this change
Amount due
$17.45Credit from current plan−$6.66
Charge for new plan$24.11
Charged today
This amount will be charged immediately
Pro plan$29.99Prorated15 of 31 days
$14.52- Subtotal
- $14.52
- Tax
- $2.93
- Total
- $17.45
Ongoing billing
Recurring amount after this change
Pro plan$29.99
$29.99- Subtotal
- $29.99
- Tax
- $6.00
- Total
- $35.99
Playground
Data
Result direction
Proration mode
Collection mode
Install
pnpm dlx shadcn@latest add @paddle/plan-change-breakdownyarn dlx shadcn@latest add @paddle/plan-change-breakdownnpx shadcn@latest add @paddle/plan-change-breakdownUse an AI agent
Import this component from https://developer.paddle.com/r/plan-change-breakdown.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
breakdown PlanChangeBreakdownData
Full breakdown data — typically derived from Paddle's
preview-subscription-update response. Includes immediate transaction, next transaction, and recurring totals. Pass undefined to render the skeleton loading state. collectionMode "automatic" | "manual"
From
subscription.collection_mode. Affects section titles — "Charged Today" for automatic, "Invoice Created" for manual. className string
Extra Tailwind classes applied to the root element.
What it does
A full breakdown of a subscription plan change. Shows line items, proration, discounts, tax, and totals, split across:
- Charged today: what the customer is going to be charged immediately
- Next invoice: what the customer is going to be charged at the next billing date
- Ongoing billing: what the customer is going to be charged on a recurring basis
Includes a prominent human-readable summary of the change, so customers can quickly understand the financial impact.
When to use
- You're building an upgrade, downgrade, or plan change page and want to present the full financial breakdown to the customer before they confirm the change.
- You're building an admin or operations view that needs the full proration detail visible.
For a more compact confirmation card, use the plan change preview component. Pair the two for optimal UX, presenting the compact preview initially and letting customers expand to see the full breakdown.