billing pattern
Checkout (single page)
One-page checkout — payment + summary side by side. Default for SaaS subscriptions.
When to use it
Subscription or one-time purchase with no shipping. ≤ 5 form fields.
- Checkout completed in <60s
- Trust signals visible (lock icon, processor logos)
- Errors recover gracefully
Layout regions
- header
- Minimal — logo + cancel link
- main
- Two-column: form left, summary right
- form
- summary
- Sticky on desktop
States
- default
- Empty form
- loading
- Processing payment
- error
- Card declined
- success
- Charged
Example
<Container variant="lg"><Grid cols={2}><CheckoutForm /><OrderSummary sticky /></Grid></Container>The full Checkout (single page) pattern specifies 3 exact microcopy strings, 1 motion spec, 4 composition rules — all gated behind the full recipe. Get the full recipe.