Skip to content
Specimen controls
Theme
Value colours
Row density
Family 3 · 14 components

Payments that confirm before money moves.

Money leaving an account is the least reversible thing in the product. Every surface here states the amount, the destination, the fee and the arrival before it asks for a commitment — and never blocks paste.

AmountInput

type="text" with inputMode="decimal", never type="number". Paste is never blocked: "1,234.56", "1 234,56", "$1234.56", "(1,234)" and "1.2k" all parse. The caret does not jump while you type.

Standard

Balance 42,184 US Dollar
1,240 US Dollar and 56 cents

Over the available balance

Balance 42,184 US Dollar
94,000 US Dollar

Zero-decimal currency (JPY)

124,056 Japanese Yen

CurrencySelect · PayeeSelect · PaymentMethodList

Per-method fee and arrival are stated inline. A method list that hides the fee until the confirmation step is a dark pattern.

CurrencySelect, recents pinned

PayeeSelect, with last paid

PaymentMethodList

ACH transferaccount ending 44172–3 business daysFee 0 US DollarDomestic wireaccount ending 4417Same day if sent before 14:00 PTFee 25 US DollarVisa ending 4242account ending 4242InstantFee 84 US Dollar

PaymentForm

The fee and the arrival date are quoted by the caller and re-quoted whenever the amount or method changes. The component never invents either.

Balance 42,184 US Dollar
No amount entered

HoldToConfirm · ConfirmPaymentDialog

Irreversible actions need a deliberate, sustained gesture — 1500ms, abortable with Escape. Space holds it from the keyboard with progress announced, and a typed confirmation is always available as the fallback.

Held 0 times

Press and hold, or hold Space. Escape cancels.

ConfirmPaymentDialog — irreversible wire

PaymentStatusTimeline · PaymentSuccess

A failed step states what happened and what to do about it. A timestamp without a zone is a guess, so the zone is always printed.

In flight, with a failure and its remedy

  1. Initiated

    29 Sep 2026, 02:14 PDT

  2. Approved

    29 Sep 2026, 04:02 PDT

  3. Sent to bank

    29 Sep 2026, 07:30 PDT

    The receiving bank rejected the account number (R03, no account on file).

    Confirm the account number with the payee, update the vendor record, and re-send. The funds never left the account.

  4. Settled

    Not yet

Completed

Payment sent

1,240 US Dollar and 56 cents

To Northwind Traders account ending 4417 Arrives 1 Oct 2026

CheckoutSummary · ReceiptSheet

Fees are itemised and named, never a lump “Fees”. Rounding is disclosed. Nothing in a receipt or a total is ever abbreviated.

Order summary
Platform subscription, annual18,000 US Dollar
Additional seats × 122,880 US Dollar
Subtotal20,880 US Dollar
Card processing (2.9% + $0.30)Charged by the processor, not by us.605 US Dollar and 82 cents
CA sales tax (8.625%)1,800 US Dollar and 90 cents
Total23,286 US Dollar and 72 cents

† Tax allocated across lines by largest remainder; the parts sum exactly to the total.

Acme Holdings, Inc.

Payment receipt

Paid to
Northwind Traders
Method
ACH transfer ending 4417
Reference
PMT-2026-0914
Date
29 Sep 2026, 07:30 PDT
INV-20411,000 US Dollar
INV-2042240 US Dollar and 56 cents
Total paid1,240 US Dollar and 56 cents

CardInput · BankAccountInput · CategoryPicker

Card and routing numbers validate as you type (Luhn, ABA checksum) and never reject a paste. A categorisation rule shows its match count before it is applied, never after.

CardInput

BankAccountInput (US routing + account)

CategoryPicker

PayoutSchedule · RecurringSchedule · Sheet

A cutoff without a timezone is a guess, and a bank holiday that shifts a payout is stated on the payout it shifts.

  • 1 Oct 2026

    Cutoff 14:00 PT

    First Republic ••4417

    12,400 US Dollar
  • 13 Oct 2026

    Cutoff 14:00 PT

    First Republic ••4417

    Bank holiday: Columbus Day — moved from 12 Oct — settles the next business day

    Payout scheduled8,900 US Dollar
  • 29 Oct 2026

    Cutoff 14:00 PT

    First Republic ••4417

    14,100 US Dollar

RecurringSchedule

Ends

Next three payments

  • 28 Feb 2026
  • 31 Mar 2026
  • 30 Apr 2026

Sheet (Vaul) — velocity dismissal, boundary damping

The 14 components on this page

Each has a page with its four-layer spec, its dependencies, the whole source file and the one-line install. The family spec they were all built against is Payments.

Works in your QuickBooks Online or Xero file

Get your books closed every month

Lopifi is building AI bookkeeping that keeps your books closed on US GAAP as transactions happen, with a CPA review every quarter, for $200 a month. We’re not open yet.

$200/month when we open. No card now.