Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA payment card form with masked number and expiry, a Luhn check, a recognised brand shown as text, a CVC length that depends on the brand, and autocomplete tokens so browsers fill it. Use this when you collect card details yourself in front of a processor field.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
You show your own fields for a card before tokenising with your payment provider.
Do not use it when: Prefer the processor's hosted fields where possible, so card numbers never touch your page. This pattern shows the UX around them.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Description |
|---|---|---|
onAdd | ({ number, expiry, cvc, name }) => Promise<void> | Send to your processor. Do not log or store the raw values. |
now | Date | For the expiry check; mainly for tests. |
luhn, cardBrand and expiryProblem are exported.
cc-* autocomplete tokens, so browsers and password managers can fill them. The number uses a numeric keyboard on touch devices.The pattern ships with a Testing Library test (add-card-dialog.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.