Flowchart

E-commerce Order Process

Use this editable Mermaid e-commerce order process template to map registration, shopping, cart changes, checkout, payment approval, shipping, and confirmation.

Edit this template Browse all templates

Use Cases

Document an online store checkout workflow from account entry through order confirmation

Explain payment approval loops and cart recovery paths to product, support, and engineering teams

Review where registration, account status, shopping cart, payment, and fulfillment handoffs happen

Create a reusable order processing SOP for e-commerce operations and merchant integrations

How This Workflow Works

Step	Purpose
Start and account entry	The shopper enters the process and either registers or logs in before moving into store actions.
Shop or view account	The flow separates browsing and cart-building work from account status checks and account processes.
Build and revise cart	The shopper searches items, adds them to the cart, reviews cart contents, and changes quantities when needed.
Checkout and payment	Checkout passes the shopping cart into merchant payment handling and branches on approval or rejection.
Fulfillment and confirmation	Approved orders move through integration, shipping and handling, and final order confirmation.

How To Customize

Rename merchant, PCS, shipping, and account nodes to match your commerce platform vocabulary

Add fraud review, tax calculation, discount, inventory, or out-of-stock branches before payment

Replace the account status process placeholders with real profile, address, or order history steps

Add edge labels for payment decline reasons, retry limits, and fulfillment service outcomes

Adjust class definitions to align the colors with your brand or internal diagram style guide

Edit This Template Visually

Open this template in the editor to work from the rendered diagram and the Mermaid source together. Click a node in supported flowchart and sequence diagrams to locate the matching code, select source lines to find the related shape, or ask AI to rename, expand, restyle, or rewrite the selected part of the workflow.

Mermaid Source

flowchart TD

    Title["E-commerce - Order Process Flowchart"]:::title

    StartNode([Start]):::terminalStart
    Registered{"Registered?"}:::decision
    Register["User Registration"]:::process
    Login["Login"]:::process

    Shop{"Shop"}:::decision
    ViewAccount{"View<br/>Account<br/>Status"}:::decision
    AccountProcessA["Process"]:::process
    AccountProcessB["Process"]:::process

    ViewItems["View / Search Items"]:::process
    AddCart["Add Items to Cart"]:::process
    DisplayCart["Display Cart Content"]:::process

    ChangeCart{"Change<br/>Cart<br/>Items"}:::decision
    ChangeQty["Change Item<br/>Quantities"]:::process
    Checkout["Checkout"]:::process

    ShoppingCart["Shopping Cart"]:::cart
    Payment["Payment Info to<br/>Merchant"]:::payment
    Approved{"Approved"}:::decision

    PCS["PCS Integration"]:::process
    Shipping["Shipping & Handling"]:::process
    Confirmation["Order Confirmation"]:::process

    EndNode([End]):::terminalEnd

    Title --> StartNode

    StartNode --> Registered

    Registered -->|Yes| Login
    Registered -->|No| Register
    Register --> Login

    Login --> Shop

    Shop -->|Yes| ViewItems
    Shop -->|No| ViewAccount

    ViewAccount -->|Yes| AccountProcessA
    ViewAccount -->|No| AccountProcessB

    AccountProcessA --> ViewItems
    AccountProcessB --> ShoppingCart

    ViewItems --> AddCart
    AddCart --> DisplayCart
    DisplayCart --> ChangeCart

    ChangeCart -->|Yes| ChangeQty
    ChangeCart -->|No| Checkout

    ChangeQty --> Checkout

    Checkout --> ShoppingCart
    ShoppingCart --> Payment
    Payment --> Approved

    Approved -->|No| ShoppingCart
    Approved -->|Yes| PCS

    PCS --> Shipping
    Shipping --> Confirmation
    Confirmation --> EndNode

    classDef title fill:#FFFFFF,stroke:#CBD5E1,stroke-width:1.5px,color:#374151,font-weight:bold;
    classDef terminalStart fill:#8FD14F,stroke:#4D7C0F,stroke-width:2px,color:#FFFFFF,font-weight:bold;
    classDef terminalEnd fill:#6B7280,stroke:#374151,stroke-width:2px,color:#FFFFFF,font-weight:bold;

    classDef decision fill:#FFA63D,stroke:#D97706,stroke-width:2px,color:#FFFFFF,font-weight:bold;
    classDef process fill:#7C5CF3,stroke:#5B3FD6,stroke-width:2px,color:#FFFFFF;
    classDef cart fill:#8B6CF6,stroke:#6D4FE3,stroke-width:2px,color:#FFFFFF,font-weight:bold;
    classDef payment fill:#9F7AEA,stroke:#6D28D9,stroke-width:2px,color:#FFFFFF,font-weight:bold;

    linkStyle default stroke:#374151,stroke-width:1.7px;