Payment Processing Flow Diagram — Stripe Checkout Example

Flow diagram of a payment, left to right: the customer checks out in the web app, the web app asks the payment service to start the payment, the payment service creates a payment intent with Stripe, the customer pays in Stripe's card form, Stripe tells the webhook endpoint the payment succeeded, the webhook endpoint marks the order paid in the orders database, and the web app shows the customer a confirmation.

Diagram source. Edit it live in the browser

title Payment Processing Flow

type actor Customer
type database "Orders DB"

Customer -> Web App: checkout
Web App -> Payment Service: start payment
Payment Service -> Stripe: create intent
Customer -> Stripe: pay in card form
Stripe -> Webhook Endpoint: succeeded
Webhook Endpoint -> "Orders DB": mark paid
Web App -> Customer: confirmation

What this diagram shows

Payment bugs are rarely about the money. They're about which system was supposed to update the order, and when. This diagram settles that argument: the payment service starts the payment with Stripe, and only the webhook endpoint marks the order paid. Nobody else.

On Braintree or Adyen instead? Rename one box.

Step-by-step flow breakdown

Customer checks outThe customer clicks "Pay now" in the web app.

Payment service starts the paymentThe web app asks the payment service to start a payment for the order. The payment service creates a payment intent with Stripe and hands the web app the client secret it needs to show Stripe's card form.

Customer pays in Stripe's card formCard details go straight to Stripe, so they never touch your web app, payment service or database.

Stripe calls the webhook endpointStripe sends a payment_intent.succeeded event to your webhook endpoint. That event, not the browser, is the signal to fulfil the order.

Order marked as paidThe webhook endpoint updates the order in the database.

Confirmation shownThe web app shows the customer that the order is paid.

When to use this flow diagram

Provider migrations. Draw the current flow, draw the proposed one, compare.
Reconciliation debugging, when an order says paid and the ledger disagrees.
PCI conversations. Show exactly which systems touch card data. Here it's one.
Walking a new engineer through checkout without opening the webhook handler.

Common variations

Verifying the webhook

Before trusting the event, the webhook endpoint checks Stripe's signature and skips event IDs it has already handled: Stripe retries deliveries that fail and can send the same event twice. Draw it as Webhook Endpoint -> Webhook Endpoint: verify signature, skip duplicates.

Failed payment path

Add the sad path too: Stripe -> Webhook Endpoint: payment failed (the payment_intent.payment_failed event), then Web App -> Customer: show error.

Refunds

Run it backwards: Customer -> Web App -> Payment Service -> Stripe: issue refund.

Related flow diagram examples

Frequently asked questions

What does a payment flow diagram show?

Every system a payment touches, from the customer's click to the database update. App, payment service, Stripe, orders table.

How do I diagram my own payment flow?

Start from the click and chain the systems: Customer -> Web App -> Payment Service -> Stripe: charge card. Then add the confirmation arrows coming back.

Can I use this template for free?

Yes. Swap in your own provider and export it. No sign up.

Payment Processing Flow