When to use it
Settings → Billing → Payment method.
- Add a card in <30s
- Default card always identifiable
Layout regions
- header
- main
States
- empty
- default
- loading
- error
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.