# Commerce Credit Card

Credit card form with a live animated card preview that flips when the CVC field is focused.

- id: `commerce-credit-card`
- Page: https://agentic-ui-kit.com/components/commerce-credit-card
- Live preview: https://agentic-ui-kit.com/live/component/commerce-credit-card?piece=commerce-credit-card

## Install

```bash
agentic-ui add commerce-credit-card
npx shadcn@4.17.0 add @agentic-ui/commerce-credit-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** credit-card-form, card-preview, brand-detection, luhn-validation, expiry-formatting, cvc-validation, card-flip, masked-receipt, reduced-motion, dark-mode
- **Intents:** execute-flow, create-edit
- **Suits domains:** payments, ecommerce, billing, fintech, saas
- **Interaction:** typing, focus, submit, keyboard-navigation
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** credit card form with a live animated card preview that flips when the CVC field is focused, payment form with card brand detection, Luhn validation and expiry formatting, checkout card input that formats the number and validates expiry and security code, card details demo without sending data anywhere
- **Avoid when:** a real payment, which needs a PCI compliant hosted field from your payment provider, a full checkout with cart, address and shipping (use billing-checkout-flow), selling gift cards (use commerce-gift-card), changing the plan or subscription (use billing-plan-comparison)
- **Preserve when adapting:** no-storage-no-network, masked-summary-only, cc-autocomplete-tokens, static-card-under-reduced-motion
- **Replace when adapting:** submit-label, copy, card-face-styling, accepted-brands
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, input, label
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives