Preview
Change summary
Review the overview of this change
Current plan
Starter plan
$9.99 / month
New plan
Pro plan
$29.99 / month
Change typeUpgrade
BillingCharge prorated amount now
EffectiveImmediately
Current$9.99 / month
New$29.99 / month
Credit−$6.66
Charge$19.99
Amount due now$13.33
Playground
Data
Result direction
Proration mode
Collection mode
Status
Scheduled change
Install
pnpm dlx shadcn@latest add @paddle/plan-change-previewyarn dlx shadcn@latest add @paddle/plan-change-previewnpx shadcn@latest add @paddle/plan-change-previewUse an AI agent
Import this component from https://developer.paddle.com/r/plan-change-preview.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
preview PlanChangePreviewData
Preview data — typically the response from Paddle's
preview-subscription-update endpoint, passed through with minimal transformation. Pass undefined to render the skeleton loading state. prorationBillingMode "prorated_immediately" | "full_immediately" | "prorated_next_billing_period" | "full_next_billing_period" | "do_not_bill"
Proration mode you'll apply to the change. The component derives copy ("now" vs "next billing date") and the effective date from this value — match it to what you'll pass to
PATCH /subscriptions/{id}. className string
Extra Tailwind classes applied to the root element.
What it does
A compact summary of a subscription plan change. Shows the customer's current plan, their new plan, and the financial impact (charge, credit, or no-op) in a compact card.
It takes into account subscription states that may restrict the customer's billing options, like:
- When a subscription is scheduled to be paused or canceled
- When a subscription is in a trial period
When to use
- You're building an upgrade, downgrade, or plan change page and want to present a clear, scannable preview of the change.
- You want to surface proration behavior ("$13.33 today, $29.99 on Feb 1") in a legible way.
For full invoice-style detail, use the plan change breakdown component instead. Pair the two for optimal UX, presenting the compact preview initially and letting customers expand to see the full breakdown.