Subscription Card
Manage a subscription: plan, price and next charge, usage meters, pause/resume, and a cancel flow with a retention offer before the confirmation; payment line with a generic card glyph.
Preview
Your plan
ActiveStudio
$19.00/ month
Next charge Dec 1, 2026
Storage72.4 of 100 GB
Exports this month46 of 50
Card ending 4021Expires 08/28
Your plan
ActiveStudio
$19.00/ month
Next charge Dec 1, 2026
Before you go
Half price for 3 months
Stay on Studio and pay $9.50 a month until February. Your files, projects and settings stay as they are.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| plan | string | — | Plan name; also names the card. |
| price | number | — | Price per interval. |
| interval | "month" | "year" | "month" | Billing interval. |
| currency / locale | string | "USD" / — | Money and number formatting. |
| nextBilling | string | — | Pre-formatted next charge date (end date once cancelled). |
| usage | { label; used; limit; unit? }[] | [] | Usage meters; 90% and over turns warning. |
| payment | { label: string; detail?: string } | — | Payment line with a generic card glyph. |
| onChangePayment | () => void | — | Shows Change on the payment line. |
| offer | { title; description; cta; price? } | — | Retention offer shown before the cancel confirmation. |
| status / defaultStatus | "active" | "paused" | "cancelled" | "active" | Controlled or initial status. |
| onStatusChange | (status) => void | — | Called on pause, resume, cancel and renew. |
| onAcceptOffer | () => void | — | Called when the offer is taken. |
| defaultStep | "offer" | "confirm" | null | null | Open the cancel flow at a step (previews). |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.