Payment Methods
Saved cards list with mini drawn cards, a default badge, set default, remove with inline confirm, and a validated add-card form in a side sheet (also exported inline).
Preview
Payment methods
- Credit ending 1867DefaultInes Alvarez · Expires 08/28
- Debit ending 5519Ines Alvarez · Expires 11/27
- Credit ending 0042Pebble · Expires 02/29
Add card opens this form in a side sheet.
Add a card (inline)
On the back; the card flips to show it.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| cards / onCardsChange | { id; last4; expiry; name; network?; tone? }[] / (cards) => void | — | Controlled saved cards; add and remove go through onCardsChange. |
| defaultId / onDefaultChange | string | null / (id) => void | — | The default card; removing it promotes the next one. |
| addOpen / onAddOpenChange | boolean | internal | Add-card side sheet state. |
| title | string | "Payment methods" | Section heading. |
| AddCardPanel | { onSave; onCancel?; existing? } | — | The validated add-card form on its own, for inline use. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.