## Payment Methods (S—138)

Saved cards as selectable rows with brand marks, expiry warnings, a Default badge and a per-card menu.

- URL: https://sundaeui.dev/components/payment-methods
- Category: Checkout & payments · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/payment-methods.json`
- Tags: payment, checkout, saved-cards, billing, cards, wallet

Pick the card to pay with; the selected row tightens its outline. Cards expiring soon get a quiet warning, expired ones are disabled with an Update link.
Each row’s menu sets it as default or removes it, and an Add card row sits at the bottom.

### Usage

```tsx
import { PaymentMethods } from '@/components/sundae/payment-methods'

<PaymentMethods />
```

### Props

- `cards` (`{ id: string; brand: string; last4: string; exp: string; default?: boolean }[]`, required): Saved cards; exp as MM/YY.
- `onSelect / onAdd / onRemove / onMakeDefault` (`callbacks`): Row actions.
- `now` (`Date`): Reference date for expiry checks.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Checkout, subscription billing, wallet settings.

### When not to use

- Collecting a new card: use a card form.

### Accessibility

- Cards are a radiogroup; expired cards are aria-disabled with the reason in their label.
- Row menus are menu buttons with labelled items.
- Reduced motion removes the movement and keeps every state change.