E-commerce checkout process flowchart

E-commerce checkout flowchart

A worked example to adapt. Rename steps, add branches and owners to match how your team actually works.

flowchart TD
  s(["Shopper clicks Checkout"])
  d1{"Signed in?"}
  guest[/"Guest email or sign in"/]
  ship[/"Shipping address and method"/]
  pay[/"Payment details"/]
  d2{"Card needs authentication?"}
  sca["3-D Secure challenge"]
  d3{"Payment approved?"}
  dec["Show decline, keep cart"]
  conf["Create order, show confirmation"]
  mail["Send receipt email"]
  e(["Hand off to fulfillment"])
  s --> d1
  d1 -->|Yes| ship
  d1 -->|No| guest
  guest --> ship
  ship --> pay
  pay --> d2
  d2 -->|Yes| sca
  d2 -->|No| d3
  sca --> d3
  d3 -->|Yes| conf
  d3 -->|No| dec
  dec --> pay
  conf --> mail
  mail --> e

About this e-commerce checkout flowchart

Every extra step in checkout is a chance to lose the sale, and every unhandled error is a support ticket. Drawing the flow shows both: which screens the shopper must pass through, and what happens when a card is declined or needs extra authentication.

The example assumes card payments through a payment processor that may request 3-D Secure authentication.

Step by step

1. Identify. Let shoppers check out as guests; offer an account after purchase.
2. Shipping. Collect the address and shipping method, showing the cost before payment.
3. Payment and authentication. Some cards require a 3-D Secure challenge before approval.
4. Declines. Declined payments keep the cart and let the shopper try another method.
5. Confirm. Create the order, show confirmation and email a receipt, then hand off to fulfillment.

How to make it in flow-chart.io

1. Start from the example. Edit the text in the generator box above so it names your own checkout steps and payment provider, then press Generate. The free preview needs no sign-up.
2. Add the branches. Add the decision points that matter for you, for example promo code valid? or address validation failed. Each decision becomes a diamond with labeled outcomes.
3. Assign owners. Save the diagram to the editor (free account) and rename steps to show who does what: storefront, payment provider and order system.
4. Share or export. Share a read-only view link: people with the link can view the diagram but not edit it. Downloads as PNG, SVG or PDF are part of Flow Pro (see pricing).

Tips

• Show the total, including shipping and tax, before the payment step.
• Keep the cart intact after any error.
• Add an abandoned-cart reminder branch if you send them (with consent).

Frequently asked questions

What is 3-D Secure?

An extra authentication step some card issuers require, such as a bank app approval, used to meet strong customer authentication rules in some regions.

How do I show multiple payment methods?

Add a decision after the payment step for each method, such as card, wallet or bank transfer, each with its own approval path.

What happens after checkout?

Fulfillment; see the order fulfillment flowchart.

Related