Billing Page
A contained billing page with the current plan and renewal, a drawn card face, usage meters with warning ticks and over-limit states, an invoices table with downloads and a plan-change dialog.
Preview
Pebble
Billing
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| plans | { id, name, monthly, yearly, description? }[] | — | Plans offered in the change dialog; prices are per seat per month. |
| defaultPlan | { id, interval: "month" | "year" } | — | Current plan and billing interval. |
| seats | number | — | Seats billed; totals are per seat × seats. |
| renewsOn | string | — | Display date of the next renewal. |
| periodProgress | number | — | Share of the billing period elapsed (0–1), drawn as a bar. |
| daysLeft | number | — | Days left in the period. |
| usage | { id, label, used, limit, format?, warnAt? }[] | [] | Meters; warn at warnAt (default 0.8, drawn as a tick) and flag over the limit. |
| paymentMethod | { label, last4, expiry, holder? } | — | Drawn card face with Update card. |
| invoices | { id, number, date, amount, status }[] | [] | Status is "paid" | "due" | "failed" | "refunded". |
| currency | string | "USD" | ISO currency code for prices. |
| onChangePlan | (planId, interval) => Promise<void> | void | — | Called by the dialog's confirm; resolve to apply. |
| onUpdatePayment | () => void | — | Shows Update card. |
| workspace | string | — | Name above the page heading. |
| onDownloadInvoice | (id) => void | — | Called by each invoice's download button. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.