Payment flow

A payment flow diagram shows the life of a card payment. The card details are tokenised, an authorisation request goes to the card issuer, and the issuer may ask the customer to complete a 3-D Secure challenge before approving or declining. An approved payment holds funds on the card; the merchant captures it when the order ships, the issuer and acquirer settle, and the merchant is paid out. After the sale the customer may ask for a refund, or the cardholder may dispute the payment with their bank.

Engineers and finance teams draw this to agree what each payment state means, to decide when the business should treat money as received, and to plan how refunds and disputes are handled. Authorisation and capture are separate steps: authorisation only holds the funds, and the money moves when the merchant captures. A chargeback is started by the cardholder through their bank, not by the merchant, and the merchant can only respond with evidence; a successful 3-D Secure check generally moves liability for fraud-related chargebacks to the issuer.

Open in editor

Mermaid source

---
title: Payment flow
---
flowchart LR
  checkout([Customer pays at checkout]) --> token[Tokenise the card details]
  token --> auth[Send authorisation to the card issuer]
  auth --> sca{Issuer asks for 3-D Secure?}
  sca -->|Yes| challenge[Customer completes the challenge]
  challenge --> passed{Challenge passed?}
  passed -->|No| declined([Payment declined])
  passed -->|Yes| decision
  sca -->|No| decision{Issuer approves?}
  decision -->|No| declined
  decision -->|Yes| hold[Funds held on the card]
  hold -->|Order ships| capture[Capture the payment]
  capture --> settle[Settlement between issuer and acquirer]
  settle --> payout[Payout to the merchant's bank]
  payout --> after{After the sale}
  after -->|Nothing further| done([Payment complete])
  after -->|Customer asks for money back| refund[Merchant issues a refund]
  refund --> refunded([Refunded to the card])
  after -->|Cardholder disputes| chargeback[Chargeback: funds withdrawn]
  chargeback --> evidence[Merchant submits evidence]
  evidence --> ruling{Issuer ruling}
  ruling -->|For the merchant| reinstated([Funds returned to merchant])
  ruling -->|For the cardholder| lost([Chargeback upheld])

Stock Mermaid vs Line9 on this payment flow

Run the same source through the stock Mermaid engine and it often will not look as good. In some cases, Mermaid is able to deliver a usable graph, but not always. On this one:

The same payment flow through stock Mermaid — a strip about ten times wider than it is tall, with very small labels — Stock Mermaid · same source View full size ↗

Stock Mermaid draws this payment flow as a single strip about ten times wider than it is tall. To fit into a page or screen it has to be scaled down so far that the labels are very hard to read. Line9 lays out the same source across several rows, so it can be shown at a size where every label is readable, and the decline, refund and chargeback branches are each easy to follow.

For a fuller product comparison — layout, export, CLI, and pricing — see Line9 vs mermaid.live.

Render your own

Paste any Mermaid flowchart into the free online editor — no account needed. Prefer the terminal? Install the line9 CLI (free for personal use).

More scenarios on the Mermaid examples hub.

Mermaid source

Stock Mermaid vs Line9 on this payment flow

Render your own

Related diagrams