# Credit card input

> Card fields with brand detection, Luhn validation and a live card that flips for the CVC.

Component · Pro · https://lodeui.com/components/credit-card-input

## 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

```bash
npx shadcn@latest add @lode/credit-card-input
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="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.

## Related

- [Payment card](https://lodeui.com/components/payment-card) — A wallet card with a holographic sheen that follows the pointer and a number reveal.
- [Checkout](https://lodeui.com/blocks/checkout) — Three-step checkout with shipping choice, card entry, promo codes and order summary.
- [Coupon input](https://lodeui.com/components/coupon-input) — Promo code field that validates, shows a removable ticket and shakes on errors.