Payment Card
Drawn payment card that mirrors live-typed number, name and expiry, flips to a CVC strip, tilts on hover and shows a generic network label, with a paired input form.
Preview
On the back; the card flips to show it.
Hover a card to tilt it · focus CVC to flip the form card
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| number / name / expiry / cvc | string | "" | Card fields; the number shows in groups of four with bullets for untyped digits. |
| flipped | boolean | false | Turn the card over to the CVC strip. |
| focused | "number" | "name" | "expiry" | "cvc" | null | null | Outline the field being typed. |
| network | string | "Credit" | Generic corner label; never a brand. |
| tone / tilt | "ink" | "accent" / boolean | "ink" / true | Face colour and pointer tilt on hover. |
| PaymentCardForm | { value?; defaultValue?; onValueChange? } | — | Card plus inputs: typing mirrors onto the card, CVC focus flips it. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.