billing pattern
Payment method
Manage saved payment methods. Add / remove / set default.
When to use it
Settings → Billing → Payment method.
- Add a card in <30s
- Default card always identifiable
Layout regions
- header
- main
States
- empty
- No methods saved
- default
- Methods listed
- loading
- Adding/removing
- error
- Card declined / removal blocked by active subscription
Example
<Container><Card><CardHeader><CardTitle>Payment methods</CardTitle></CardHeader><CardContent><List>{cards.map((c) => <PaymentRow key={c.id} {...c} />)}</List><Button>Add a card</Button></CardContent></Card></Container>The full Payment method pattern specifies 2 exact microcopy strings, 1 motion spec, 4 composition rules — all gated behind the full recipe. Get the full recipe.