Payment stories

A small diagram told as two stories: the happy path in three phases, and a declined card in its own file. Press Play, step through, or click a step to jump to it. Switch to Sequence or Story for the same story in another form.

How a card payment moves through the system. Pick a scenario above the diagram and press play. Each one is a short story about what happens to a single request.

ScenarioOverviewPay with a cardCard declined

HTTP request / responseData accessPersistent channel (websocket, gRPC)Queue / brokerDashed: planned

Loading diagram…

Web app

Payments API

:8080

Ledger database

Stripe

card processor

RabbitMQ

payment.events

Receipt mailer

planned

The source is two files: diagram.yaml and scenarios/declined.yaml. See Phases and notes for what every line means.