Credit card inputPro
Card fields with brand detection, Luhn validation and a live card that flips for the CVC.
Card details are never stored by this form.
Try the test number 4242 4242 4242 4242
When to use
- Custom checkout forms where you collect card details yourself through a PCI-compliant tokenizer.
When not to use
- If your payment provider offers hosted fields (Stripe Elements, Dodo checkout), use those: raw card numbers shouldn't touch your servers.
Installation
Usage
Import it from @/components/ui/credit-card-input after installing.
example.tsx
import { CreditCardInput } from "@/components/ui/credit-card-input";
<CreditCardInput onChange={(card) => setCanPay(card.valid)} />API reference
CreditCardInput
Number, name, expiry and CVC fields with a live card preview.
| Prop | Type | Default | Description |
|---|---|---|---|
| onChange | (details: CardDetails) => void | – | { number, name, expiry, cvc, brand, valid } on every change. |
detectBrand / luhn
Brand detection from the first digits and the Luhn checksum, exported for reuse.
No props.
Keyboard interactions
| Keys | Action |
|---|---|
| Tab | Move between fields |
Accessibility
- Every field has a label and the right autocomplete (cc-number, cc-name, cc-exp, cc-csc).
- Errors appear after leaving a field, with aria-invalid and a message.
Motion
- The card's colors change with the brand; it flips to the back while the CVC is focused.
Responsive behavior
- The preview scales to the field width (max 320px).
Performance
- No network calls; formatting and validation are local.
Notes for AI
- Never log or store card details. Pass them straight to your provider's tokenization API.
This page as Markdown, for assistants and coding agents:
/components/credit-card-input/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt