Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA card form with number grouping, expiry formatting, a CVC field and the numeric keypad, with errors on blur, card brand shown as text, and a Pay bar that stays above the keyboard. Use this when you collect card details yourself on a phone, for example in a tokenised field wrapper, and typing must be quick and error-proof.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it when you collect card details yourself on a phone, for example in a tokenised field wrapper, and typing must be quick and error-proof.
Do not use it for hosted payment fields from a provider (use theirs) or for wallets such as Apple Pay.
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 | Default | Description |
|---|---|---|---|
amount | string | required | Shown on the Pay button. |
onPay | (card: { number: string; expiry: string; cvc: string }) => void | required | Called with digits only when valid. |
autocomplete="cc-number", cc-exp and cc-csc with the numeric keypad; spaces are inserted as you type without moving the caret unexpectedly.The pattern ships with a Testing Library test (payment-card-form-sticky.test.tsx) that drives it through roles and the keyboard.