Three checkout pieces — saved-card picker, add-card form with a flipping live preview and a method selector with animated fees — built for the moment money moves.
Saved cards
saved-cards.tsxCard picker with a radio dot that springs between rows, a default-card switch, expiry warnings and a pay button that resolves to a check.
| Prop | Type | Default | Description |
|---|---|---|---|
cards | SavedCard[] | — | { id, brand, last4, expiry, expiresSoon?, expired? } per card. |
defaultSelectedId / defaultCardId | string | — | Initially selected card and the account default. |
amount | string | "$48.00" | Formatted amount on the pay button. |
onPay | (cardId: string) => Promise<void> | void | — | Awaited before the button shows complete. |
onDefaultChange / onAddCard | (id: string) => void / () => void | — | Default switch and Add card handlers. |
className | string | — | Extra classes on the root element. |
Add card
add-card.tsxCard form with a live preview that types along, detects the brand and flips to its back while the security code is focused.
| Prop | Type | Default | Description |
|---|---|---|---|
defaultName | string | "" | Pre-filled cardholder name. |
today | string | "2026-10-02" | Date used to reject expired cards; pass the real date. |
submitLabel | string | "Save card" | Button label. |
onSubmit | (card: NewCard) => Promise<void> | void | — | Receives raw details; tokenize with your provider, never store them. |
className | string | — | Extra classes on the root element. |
Method selector
wallet-selector.tsxCard, device wallet or bank transfer: the chosen row expands with details and the fee and total count to new values.
| Prop | Type | Default | Description |
|---|---|---|---|
methods | PayMethod[] | — | { id, label, detail, note, feePercent, feeFlat?, feeCap?, icon?, badge? } per method. |
subtotal | number | 1240 | Order subtotal in major units. |
currency | string | "USD" | ISO currency for formatting. |
defaultMethodId | string | "card" | Initially selected method. |
onContinue | (methodId: string, total: number) => void | — | Called by the continue button. |
className | string | — | Extra classes on the root element. |
Install the whole set
Installs every payment methods variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
Accessibility
- Method lists are radiogroups with roving focus and arrow keys; expired cards are announced and skipped.
- Form fields have labels, autocomplete hints and errors linked with aria-describedby; the decorative card preview is hidden.
- Animated totals keep a static screen-reader value, and the card flip becomes a crossfade with reduced motion.