ecommerce pattern

Checkout — review

Final review before order placement. Shows everything in summary form.

When to use it

After payment tokenised. Last chance to edit.

Place order in 1 tap
All facts visible (address, payment last-4, items, totals)

Layout regions

header
main
summary-card
cta

States

default
loading
success
error

Example

<Container variant="md"><Card><CardHeader><CardTitle>Review</CardTitle></CardHeader><CardContent>...</CardContent></Card><Button size="lg" loading={placing}>Place order — {formatTotal(total)}</Button></Container>

The full Checkout — review pattern specifies 2 exact microcopy strings, 1 motion spec, 4 composition rules — all gated behind the full recipe. Get the full recipe.

Product list

Product detail

Cart

Build the Checkout — review pattern in your project.

Get started