# Payment Method

A saved card: brand tile, label and expiry, status and a menu. Add is a dashed row.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/payment-method
```

## Usage

```tsx
import { PaymentMethod } from '@/components/fetaui/payment-method'

export function Example(props) {
  return <PaymentMethod brand="CARD" label="Card ending 4242" expiry="08/28" />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| state | default, selected, expired, add | default |
| brand, label, expiry | string | CARD, Card ending 4242, 08/28 |
| isDefault | boolean | false |
| name | string |  |
| onSelect, onAdd, onMakeDefault, onRemove | () => void |  |
| animated | boolean | true |

## When to use

- In billing settings and at checkout.

## When not to use

- For entering a card: use Checkout.

## Accessibility

- Passing `name` makes rows native radios in one group.
- Expired is text and a Badge, not color alone.
- The menu is named after the card.

## Motion

- The row fades in and rises 8 px over 400 ms.
- The selected ring fades in over 150 ms.
- The menu scales in from the trigger.
- With reduced motion, the row and ring appear at once.