# PaymentMethodCard

> The physical card object. 3D flip, pointer tilt.

Source: https://lopifi.com/components/payment-method-card
Part of: Lopifi — US GAAP books on autopilot, reviewed by a CPA (https://lopifi.com)

---

- **Family:** Cards — 
- **Status:** Implemented
- **Spec:** https://lopifi.com/docs/catalog/02-cards

## Install

```bash
npx shadcn@latest add @lopifi/theme
npx shadcn@latest add @lopifi/payment-method-card
```

## Specification

> The physical object. Two of the four sanctioned delight moments — the flip and the tilt.

**Geometry, from ISO/IEC 7810 ID-1:**
```
aspect-ratio: 1.586          (85.60 × 53.98 mm)
border-radius: 3.7% / 5.9%     (3.18mm — 3.7% of width, 5.9% of height)
```
Real proportions matter — a card at 16:9 with a 24px radius reads as a rectangle, not as a card.

**Face:** flat, single tint from the issuer color, network mark bottom-right, masked PAN in `tnum` with `ss02` (so a `0` isn't an `O`), holder name in `label` uppercase, expiry `MM/YY`.

**Motion:**
- **Flip to reveal CVV** — `rotateY(0→180deg)`, `spring.playful`, real 3D with `preserve-3d` + `backface-visibility: hidden`. Not a crossfade. [Spec](../motion/03-catalog.md#card-flip).
- **Pointer tilt** — ±6° from pointer position via `spring.track`, plus a specular sheen at `opacity 0→0.12`. Desktop only, gated behind `@media (hover: hover) and (pointer: fine)`. Springs home on leave.
- Reduced motion: instant swap, no tilt.

The tilt is decorative and it's licensed **only because the card is decorative**. The same effect on a `KpiCard` is a review failure.

**Security:** CVV and full PAN are never in the DOM until revealed, never in analytics, never in a screenshot-able state without an explicit user action.

## Rules this component obeys

Money is minor units, never floats. `null` is not `0` and neither is redacted. Negatives render in accounting parentheses with the parenthesis column reserved on both sides. Debit and credit are two columns. Per-currency decimal places. Polarity is explicit — up is not always good. Every figure states its period, entity, currency, basis and as-of.