# Payment card

> A wallet card with a holographic sheen that follows the pointer and a number reveal.

Component · Pro · https://lodeui.com/components/payment-card

## When to use

- Wallets, virtual cards and saved payment methods.

## When not to use

- Collecting card details: use the credit card input.

## Installation

```bash
npx shadcn@latest add @lode/payment-card
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { PaymentCard } from "@/components/ui/payment-card";

<PaymentCard last4="4242" holder="Ada Lovelace" expiry="09/29" theme="aurora" />
```

## API reference

### PaymentCard

A 3D card that tilts and shines under the pointer.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| last4 / holder / expiry | `string` | – | Card details shown. |
| brand | `"visa" \| "mastercard" \| "amex"` | `"visa"` | Logo. |
| theme | `"midnight" \| "lime" \| "aurora" \| string` | `"midnight"` | Preset or any CSS background. |
| number | `string` | – | Full number; adds a show / hide button. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach the reveal button |

## Accessibility

- The number is labelled as "Card ending in 4242" unless revealed.
- Tilt and sheen are skipped under reduced motion.

## Motion

- Tilts toward the pointer with a spring; a light sheen follows it.

## Responsive behavior

- Up to 340px at the standard card ratio.

## Performance

- Motion values only; no re-renders while moving.

## Notes for AI

- Never pass full numbers of real cards except to their owner.

## Related

- [Credit card input](https://lodeui.com/components/credit-card-input) — Card fields with brand detection, Luhn validation and a live card that flips for the CVC.
- [Crypto wallet](https://lodeui.com/blocks/crypto-wallet) — Wallet balance, portfolio chart, holdings with sparklines and a slide-to-send flow.
- [Tilt card](https://lodeui.com/components/tilt-card) — A card that tilts in 3D toward the pointer with a moving glare.