Checkout Flows

A checkout flow maps the route from cart to confirmed order — and every branch where money, trust, or patience can leak out. This file maps the ROUTES; field-level evidence (form length, labels, validation, address entry, wallets) lives in Forms & Input. Checkout is the highest-stakes flow in most commercial products: Baymard Institute's running average across its collection of ~50 studies puts cart abandonment at ~70%, and its US survey of reasons for checkout abandonment ranks unexpected extra costs first (~47–48%), forced account creation second (~24–25%), and too-long/complicated checkout high on the list (~18–22%) — with roughly 35% of checkout abandonment estimated preventable through design alone (baymard.com, figures checked 2026). Every branch below attacks one of those reasons.

The spine

Cart → shipping → payment → review → place order → confirmation. Steps can be pages, accordion sections, or one page — Baymard's benchmark finding is that FIELD count matters more than step count (see Forms & Input), so map the spine and then hunt fields, not steps.

Full flow with branches

Cart
  ├─ shows: items, per-item price, shipping ESTIMATE, tax estimate,
  │   total-so-far (cost transparency starts HERE, not at review)
  ├─ coupon field (collapsed link, not open box — an open box sends
  │   users hunting off-site for codes)                 (convention)
  │     ├─ valid → total updates visibly, delta shown
  │     └─ invalid/expired → inline error, cart untouched, retry
  ├─ item unavailable/qty changed → flag in place, allow proceed
  └─ [Checkout] → Identify
        ├─ GUEST CHECKOUT (prominent, default-equal or better)
        ├─ sign in (returning: prefill everything saved)
        ├─ express wallet (Apple Pay / Google Pay / PayPal) →
        │     wallet sheet supplies address+payment → jump to Review
        └─ create account → offer AFTER order instead (see below)
  → Shipping address
        ├─ autocomplete accepted → editable, never locked
        ├─ validation soft-fail ("can't verify") → user confirms
        │     their entry wins; never hard-block a real address
        └─ shipping unavailable to region →
              say so NOW (not at payment), offer alternatives
              (pickup, other carrier, notify-me) or graceful exit
  → Shipping method → total updates live with each choice
  → Payment
        ├─ card entry (trust cues at the field; see below)
        ├─ wallet / stored card (step-up re-auth if high value)
        └─ [Continue] → authorization
              ├─ declined → plain-language message, card kept,
              │     ├─ retry (fix typo/expiry)
              │     ├─ try another method (one tap away)
              │     └─ exit → cart preserved → recovery loop
              ├─ 3DS / bank verification step-up →
              │     ├─ pass → continue
              │     ├─ fail/timeout → treat as decline branch
              │     └─ user lost to bank app → session + cart
              │           preserved on return
              └─ approved → Review
  → Review (full order, itemized costs, FINAL total, edit links
  │   back into each step that return here after editing)
  → [Place order — "Pay $42.18"] (explicit final action)
        ├─ success → Confirmation
        │     • order number, receipt email, delivery expectation,
        │       track/cancel/change links
        │     • THEN offer account creation: "save your details" —
        │       one password/passkey field, everything else known
        └─ processing error/timeout → do not double-charge; show
              order status honestly; email resolution
Abandon (any step)
  → cart + entered data persisted
  → recovery loop: reminder email/push (consented channels only,
    see Notification Flows) → deep-link back to the EXACT
    abandoned step, cart intact — never to the homepage

Trust checkpoints along the route

Trust is spent and earned at specific points; place reassurance there, not everywhere: cart (estimated total honesty), identify (guest option = "we won't trap you"), address (why you need a phone number, if you ask), payment (security cues at the card field, known payment marks), review (no new numbers appearing — a total that grows at review is the #1 abandonment reason made flesh), place order (button states the exact charge), confirmation (immediate receipt + what happens next). A surprise at any checkpoint sends users backward through the flow — map those backward arrows too: every step needs an edit-and-return route that doesn't destroy later entries.

High-stakes branch notes

Guest vs. account: forced registration is the #2 stated abandonment reason (Baymard survey). Map guest as a first-class lane; account creation is a post-confirmation branch where it costs one field instead of a wall.
Cost surprises: every branch that changes the total (coupon, shipping method, address→tax, currency) must update the visible total at the moment of change. The flow rule: no number on Review the user hasn't already seen.
Payment declined: never blame ("declined by your bank" beats "payment failed"), never clear the form, always offer the other-method branch. Declines are a state, not an exit.
3DS/verification: an external actor (the bank) owns a step in the middle of YOUR flow — blueprint it (Service Blueprint): what does your screen show while they're gone, and what happens on return, timeout, or app-switch loss?
Abandoned-cart recovery: it's a loop, not an email. Persist the cart, deep-link to the abandoned step, respect consent and quiet hours, and cap the sequence — a recovery loop that nags becomes an opt-out spiral (Notification Flows).

Common mistakes

Total revealed only at review (designing the #1 abandonment cause in).
Guest checkout hidden below the login form.
Hard-blocking unverifiable addresses; locking autocomplete results.
Decline branch that dumps to an empty payment form.
No mapped return path from 3DS/bank interruption.
Recovery emails that link to the homepage; recovery pushes without notification consent.
Edit-from-review routes that wipe subsequent steps.

Checklist

Spine mapped: cart → shipping → payment → review → order → confirmation
Running total visible and updated at every total-changing branch
Guest lane first-class; account offer moved post-confirmation
Express-wallet shortcut lane mapped (skips address+card entry)
Coupon: valid, invalid, and expired branches; collapsed entry
Address: autocomplete-miss, soft-fail-confirm, and manual-entry routes
Shipping-unavailable branch surfaces at address, with alternatives
Decline branch: retry + other-method + preserved data
3DS branch: waiting state, return, timeout, app-switch recovery
Review: edit-and-return arrows to every step, no data loss
Final button states the exact amount
Abandon branch: persistence + capped, consented, deep-linked recovery
Trust checkpoint placed at each money-relevant step
Walked against Flow Design Checklists and Error Flow

Sources

Baymard Institute — cart abandonment rate statistics list (~70% average across ~50 studies); "reasons for abandonments during checkout" survey (extra costs, forced account creation, checkout length); ~35%-preventable estimate; checkout usability benchmark (baymard.com/lists/cart-abandonment-rate; figures checked 2026).
W3C — Payment Request API; Secure Payment Confirmation (via Forms & Input).
Cross-references: Forms & Input (field-level evidence, Baymard form benchmarks), Service Blueprint (payment processor/fraud lanes), Error Flow, Notification Flows (recovery messaging), Registration Flows (post-purchase account creation).