Back to components
Payments component
Subscription Manage Screen
Active subscription view — plan, state badge, past-due banner, next charge, cancel flow.
Install
What it does
- State badge: trialing / active / past_due / cancelled / expired
- Past-due warning banner with 'Pay now' CTA
- Next-charge date, trial end, payment method rows
- Confirmation alert before cancel
- Calls your backend at /api/subscriptions/:id/cancel
When to use
Use it
Settings → Subscription screen, billing center.
Skip it
Pricing or upgrade flows (use subscription-plan-card).
Files & routes added
- components/payments/subscription-manage-screen.tsx