# Card Field

A card payment in one field. Pay stays disabled until number, expiry and code are all valid.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/card-field
```

## Usage

```tsx
import { CardField } from '@/components/fetaui/card-field'

export function Example() {
  return <CardField amount="$48.00" onPay={charge} onPaid={showReceipt} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| amount | string | required |
| label | string | Card |
| defaultValue | { number, expiry, cvc } |  |
| testCard | boolean | false |
| onPay | (card) => Promise<void> | void |  |
| onPaid | () => void |  |
| status | idle, processing, paid |  |
| error | ReactNode |  |
| focusPart | number, expiry, cvc |  |
| animated | boolean | true |

## When to use

- When a single card is all you need.

## When not to use

- For saved cards and addresses: use a full checkout.
- Without a payment provider. Send the values only to your provider, and never store or log them.

## Accessibility

- Three labelled inputs inside one visual field, with autocomplete cc-number, cc-exp and cc-csc.
- The helper is linked with aria-describedby and announced politely.
- Invalid parts set aria-invalid.

## Motion

- Focus moves the ring to ink and the fill to the surface in 150 ms.
- After four digits the icon becomes the brand chip, scaling from 0.8.
- An expired card shakes the field once over 300 ms and the ring turns danger.
- Pay keeps its width through Processing, then fills with success in 320 ms and the tick draws.
- With reduced motion, there is no shake and the tick appears.