# PaymentForm

> Amount → payee → method → date → memo.

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

---

- **Family:** Payments — 
- **Status:** Implemented
- **Spec:** https://lopifi.com/docs/catalog/03-payments

## Install

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

## Specification

`amount → payee → method → date → memo`. That order — the amount first, because it's what the user came to do and it contextualizes everything after.

- **Progressive disclosure:** memo, reference, and attachments behind "Add details".
- Validation on **blur**, never per-keystroke.
- **Submit is bottom-anchored on phone**, above the safe area and above the keyboard (`visualViewport`), always visible.
- The submit button states the amount: `Send $12,400.00`.
- Fee and arrival estimate update live below the amount, with a value crossfade — never a count-up.

## 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.