Checkout flow — wireframe
current step annotation 4 screens · lo-fi
shop.example/cart
1Cart
2Shipping
3Payment
4Done
Cart 3 items
1+
$84.00
2+
$36.50
1+
$120.00
1Promo code
2You may also like
Summary
$240.50
$19.24
$259.74
Continue shopping
01Cartquantities · promo · order summary
checkout
shop.example/checkout/shipping
Cart
2Shipping
3Payment
4Done
Contact
1Shipping address
First name
Last name
Street address
City
ZIP
Country
2Delivery method
Standard
Free
Express
$12.00
Overnight
$24.00
Cart
Order
$84
$36.50
$120
$259.74
02Shippingaddress form · delivery method
continue
shop.example/checkout/payment
Cart
Shipping
3Payment
4Done
1Payment method
Card
PayPal
Pay
Card details
Card number
Expiry
CVC
Name on card
2Billing
Same as shipping address
Save card for next time
Shipping
Encrypted · PCI-DSS placeholder
Order
Ship to
$240.50
$12.00
$19.24
$271.74
Express · 2–3 days
03Paymentmethod tabs · card fields · pay CTA
pay
shop.example/order/HF-2481
Cart
Shipping
Payment
4Done
Order confirmed 1ORDER · HF-2481
Ship to
Arrives
$84
$36.50
+ 1 more item · $271.74 total
Receipt sent to email on file
04Confirmationorder # · delivery estimate · next actions