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
- main
- form
- summary
States
- default
- loading
- error
- success
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.