ecommerce pattern
Checkout — payment
Step 2 of physical-goods checkout. Payment method + billing.
When to use it
After shipping. Card / Apple Pay / Google Pay / saved cards.
- Pay in 1 tap with Apple/Google Pay
- Card entry <30s
Layout regions
- header
- main
- methods
- card-form
- summary
States
- default
- loading
- partial
- error
- success
Example
<Container><Grid cols={2}><PaymentMethodSelector /><CartSummarySticky /></Grid></Container>The full Checkout — payment pattern specifies 2 exact microcopy strings, 1 motion spec, 4 composition rules — all gated behind the full recipe. Get the full recipe.