E-commerce checkout flow
Cart, shipping, payment, and order confirmation steps.
A cart sits abandoned if checkout is slow, confusing, or error-prone. This template maps the complete checkout journey: the customer reviews their cart, enters shipping and billing details, selects a shipping method, submits payment, and either retries on failure or lands on confirmation. Every decision diamond is a friction point where real customers drop off.
The two critical retry loops — validation (invalid address) and payment (declined card) — are where most abandonment happens. Making them visible helps product teams invest in the right UX: auto-fill, address validation, clearer error messages, and alternative payment methods.
When to use this template
- Checkout optimization — annotate each step with conversion rates and drop-off counts to identify which friction point costs the most revenue.
- New payment method rollout — add branches for each payment type (credit card, PayPal, Apple Pay) to document fallback paths and error handling.
- Compliance and reconciliation — trace the order creation step through to confirmation email to document where the order-of-record is established for accounting and customer support.
How to adapt it
Customize nodes to your checkout flow and add payment integrations:
- Pre-checkout login — add a decision after "View cart": "User logged in?" to branch to guest or registered flows.
- Promo codes and discounts — insert a step after shipping: "Apply coupon?" with a branch to recalculate totals.
- Multiple shipping addresses — replace "Enter shipping address" with a decision: "Use saved address or enter new?" and branch accordingly.
Visual edits regenerate clean code, so you can map your real checkout steps without syntax overhead.
Mermaid code
Copy it anywhere Mermaid is supported — GitHub, Notion, or your docs.
flowchart TD
A[Customer views cart] --> B[Review items & quantities]
B --> C{Proceed to checkout?}
C -->|No| D[Continue shopping]
C -->|Yes| E[Enter shipping address]
E --> F{Address valid?}
F -->|No| G[Show validation error]
G --> E
F -->|Yes| H[Select shipping method]
H --> I[Enter payment details]
I --> J{Process payment?}
J -->|Declined| K[Show payment error]
K --> I
J -->|Approved| L[Create order]
L --> M[Send confirmation email]
M --> N[Redirect to order confirmation]
Frequently asked questions
- What is an e-commerce checkout flow diagram?
- It visualizes every step a customer takes from viewing their cart to receiving an order confirmation: address entry, validation loops, shipping selection, payment processing, and error recovery paths. It makes invisible friction points — like validation failures and payment retries — explicit.
- Why show the validation and payment error loops?
- Most abandonment happens at validation and payment failures. By making these retry loops visible, product teams can prioritize UX improvements: better error messages, address auto-complete, saved payment methods, or guest checkout options.
- How do I add guest checkout and saved addresses to this diagram?
- After 'Enter shipping address', add a decision diamond: 'Guest or registered?' If guest, go directly to shipping. If registered, offer a branch: 'Use saved address?' If yes, skip to shipping; if no, enter new address. Visual edits regenerate clean code.
- What metrics should I track on this diagram?
- For each decision diamond, track the conversion rate and drop-off count: What % of carts make it past validation? How many hit payment errors? Where do customers bounce? Annotate the diagram with real data to prioritize fixes.