Recipe
Subscription management UX
Patterns for billing portals, plan switching, and cancellation flows that retain users while respecting their choices.
Overview
Subscription management is the highest-stakes surface in a SaaS product. Every interaction carries revenue risk. The goal is clarity, speed, and zero dark patterns — users who trust the billing portal are more likely to upgrade, less likely to chargeback, and far more likely to return after pausing.
Core principles
- 01Show value before price. Every plan card leads with what the user gets, not what they pay.
- 02Proration transparency. Display the exact charge or credit before the user confirms a plan switch.
- 03Graceful offboarding. Offer a pause before cancel. If they still leave, make reactivation one click.
- 04No surprises. Invoice history, next billing date, and payment method are visible without digging.
Plan comparison layout
Use a three-column grid on desktop, stacking to a single column on mobile. The current plan gets a highlighted border in #8B5CF6. Feature rows use checkmarks, not crosses — absent features are simply omitted. Annual/monthly toggle sits above the grid and persists to localStorage.
Starter
$19
/month
Pro
$38
/month
Enterprise
$57
/month
Cancellation flow
A two-step modal: first, offer a pause (freeze billing, retain data). If the user insists on canceling, collect optional feedback with a single textarea. No confirm-your-email loops, no phone calls. The final screen shows the exact date their access ends and a one-click “Reactivate” button.
Invoice & billing history
A simple table: date, description, amount, status, and a PDF download link. Paginate at 12 items. Use status badges — paid, pending, failed. Failed invoices include a “Pay now” action that opens the payment method update drawer inline.