# Payment Method

Saved payment method as a list row, card tile or checkout row with official network and wallet marks. Expired cards can’t be picked, and an add-new row is included.

> Composed · Pro · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/payment-method
```

## Import

```tsx
import { PaymentMark, PaymentMethodItem, PaymentMethodAdd } from "@/components/ui/payment-method/payment-method";
```

## Variants

- `add-new` — Add new: `npx @lumioui/cli add pro/payment-method-add-new`
- `carousel` — Card carousel: `npx @lumioui/cli add pro/payment-method-carousel`
- `checkout-row` — Checkout row: `npx @lumioui/cli add pro/payment-method-checkout-row`
- `radio-list` — Radio list: `npx @lumioui/cli add pro/payment-method-radio-list`

## Props

### PaymentMark

| Prop | Type | Notes |
| --- | --- | --- |
| `network` | `PaymentNetwork` | — |
| `size?` | `"sm" | "md" | "lg"` | sm 34×24 · md 46×32 · lg 58×40. Default "md". |
| `sheen?` | `number` | Bump to send one sheen across the mark (e.g. when it is picked). |
| `className?` | `string` | — |

### PaymentMethodItem

| Prop | Type | Notes |
| --- | --- | --- |
| `network` | `PaymentNetwork` | — |
| `label?` | `string` | Title override — "Joint account", "Work Amex". |
| `last4?` | `string` | Last four digits of the card or account. |
| `expiry?` | `string` | "08/28". |
| `description?` | `string` | Second line override — "Ends 0418 · Harbor Bank". |
| `isDefault?` | `boolean` | Shows a "Default" badge. |
| `expired?` | `boolean` | Expired card — red expiry line, not selectable. |
| `selected?` | `boolean` | Selected state for radio / check / tile. |
| `onSelect?` | `() => void` | Fires when the viewer picks this method. |
| `layout?` | `"row" | "tile" | "compact"` | row 64pt · tile mini card · compact 52pt one-liner. Default "row". |
| `control?` | `"radio" | "check" | "chevron" | "none"` | Trailing control on `row`. Default "radio" when `onSelect` is set, else "none". |
| `actionLabel?` | `string` | Compact layout's trailing action. Default "Change". |
| `onAction?` | `() => void` | Compact layout's action (defaults to onSelect). |
| `separator?` | `boolean` | Hairline under a `row`, inset to the text. |
| `filled?` | `boolean` | Tile layout: the picked tile becomes a filled accent card (spring.glide)  instead of taking a ring. Default false. |
| `className?` | `string` | — |

### PaymentMethodAdd

| Prop | Type | Notes |
| --- | --- | --- |
| `label?` | `string` | Default "Add payment method". |
| `description?` | `string` | Second line — "Debit, credit or bank account". |
| `layout?` | `"row" | "tile"` | row matches PaymentMethodItem rows; tile matches its cards. Default "row". |
| `className?` | `string` | — |

## Icons rendered

- `check` — /icons.html?i=check
- `alert-triangle` — /icons.html?i=alert-triangle
- `chevron-right` — /icons.html?i=chevron-right
- `plus` — /icons.html?i=plus

Source: https://lumioui.com/components/payment-method