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-breakdownProps
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.