Screens

Checkout Page

The highest-stakes screen in e-commerce. Design checkout flows that minimize abandonment, maximize trust, and complete purchases efficiently.

#checkout#payment#cart#purchase#conversion#trust#abandonment

What is it?

A checkout page (or flow) is the sequence of screens through which a user confirms their selections, provides shipping and payment information, and completes a purchase. It is the highest-stakes screen in e-commerce — 70% of shopping carts are abandoned, with checkout friction being the leading cause.

Why it matters

Checkout abandonment costs e-commerce businesses $18 billion annually. Baymard's benchmark research identifies the top causes: surprise costs, forced account creation, complex checkout, payment security concerns, and confusing UI. Each of these is a design problem with a design solution.

Best Practices

Guest checkout must be the prominent default — account creation should be offered after payment.
Show all costs (including shipping and taxes) before the final payment step — surprise costs are the #1 abandonment cause.
Display a progress indicator (Step 1: Shipping → Step 2: Payment → Step 3: Review).
Express checkout (Apple Pay, Google Pay, Shop Pay) at the top — one-tap for returning users.
Order summary should be visible (or accessible) on every checkout step.
Free shipping threshold progress bar: "Add £8 more for free delivery" — increases average order value.
Security trust badges near payment fields — SSL lock, payment provider logos.
Delivery date estimation: "Arrives by Thursday, 12 June" not "3–5 business days."
Address auto-complete — reduces typing and typos.
Promo code field should be collapsed by default — an open promo field makes users without a code feel they're missing out.

Common Mistakes

Forcing account creation before payment — the #1 abandonment trigger.
Surprise shipping costs revealed only on the final payment step.
No guest checkout option.
No order summary visible during payment entry.
Vague delivery estimates ("5–7 business days") instead of specific dates.
Prominently displayed promo code field that distracts users who don't have a code.
Single-page checkout with 15+ fields — should be multi-step.
No mobile payment options (Apple Pay/Google Pay) on mobile.

Checklist

Guest checkout is the prominent default option

All costs shown before final payment step (no surprise fees)

Step progress indicator visible throughout checkout

Express payment options (Apple Pay, Google Pay) available

Order summary visible or easily accessible on all steps

Free shipping threshold progress bar shown

Security badges near payment fields

Specific delivery date shown (not "5–7 days")

Address autocomplete implemented

Promo code field is collapsed by default

Research & Theory

Baymard Institute — Checkout Usability Study

The most comprehensive research on checkout UX. 70% abandonment rate identified, with forced account creation, unclear costs, and complex UI as the top causes.

Why it's relevant

Every checkout design decision should be informed by Baymard's findings. The research is regularly updated and freely accessible.

Decision Fatigue (Baumeister)

By the time users reach checkout, their cognitive resources are depleted by browsing and selection decisions. Every additional field or decision costs significantly more than it would at the start of a session.

Why it's relevant

Minimize choices at checkout. Default everything that can be defaulted. Remove every optional field.

Real-World Examples

Shopify Checkout

Industry benchmark. Guest checkout default. Apple Pay at top. Three-step flow with clear progress. Order summary always visible. Adopted by millions of stores.

Amazon

One-click purchase for Prime members eliminates checkout almost entirely. The ultimate expression of friction reduction.

Stripe Checkout

Embeddable checkout component with highest UX standards built in: address autocomplete, real-time validation, optimized for conversion.