Why not trust the redirect on the front end?

A redirect can be closed or forged. Whether an order is paid should rest on the provider's server-to-server notification, with the signature and amount verified.

How do I show duplicate webhooks?

Add a self-message "Check whether already processed" before marking the order paid, which shows the handler is idempotent.

Which API fields should I use?

Follow your payment provider's official documentation. The diagram shows the order of interactions and no parameters.

QR code payment sequence diagram template

Previewed in the “Indigo” theme; you can switch themes in the editor

When to use it

Use it when you integrate QR code payments for the first time, write a design review document, or need a payment sequence diagram for a course project. The diagram keeps two channels apart: the customer sees the result through polling, while the order's true state comes only from the provider's webhook, which is where integrations most often go wrong.

Make it yours

Rename participants to your own modules, such as splitting the merchant server into order and payment services.
If you push results over a persistent connection, replace the loop with "Server pushes payment result".
To show an unpaid order timing out, add an alt block at the end with "Close order after timeout".

Mermaid code

qr-payment-sequence.mmd

sequenceDiagram
    actor U as Customer
    participant F as Storefront
    participant B as Merchant server
    participant P as Payment provider
    U->>F: Click Pay
    F->>B: Create order
    B->>P: Create payment
    P-->>B: QR code URL
    B-->>F: Order ID and QR code
    F-->>U: Show QR code
    U->>P: Scan and confirm payment
    P-->>U: Payment successful
    P->>B: Webhook with payment result
    B->>B: Verify signature and amount
    B->>B: Mark order as paid
    B-->>P: Acknowledge
    loop Every 2 seconds
        F->>B: Get order status
        B-->>F: Paid
    end
    F-->>U: Redirect to success page

Ask an AI for one with this structure

Send the prompt below to ChatGPT or Claude, then paste the whole reply into the editor; the code inside is detected automatically.

prompt.txt

Draw a QR code payment sequence diagram with Mermaid sequenceDiagram syntax. Participants are Customer, Storefront, Merchant server and Payment provider. The customer clicks pay, the storefront asks the server to create an order, the server creates a payment and receives a QR code URL, the storefront shows the code and the customer scans and pays. The provider sends a webhook; the server verifies the signature and amount, marks the order paid and acknowledges. Meanwhile the storefront polls the order status in a loop every 2 seconds and finally redirects to the success page. Output only the mermaid code block.

FAQ

Why not trust the redirect on the front end?: A redirect can be closed or forged. Whether an order is paid should rest on the provider's server-to-server notification, with the signature and amount verified.
How do I show duplicate webhooks?: Add a self-message "Check whether already processed" before marking the order paid, which shows the handler is idempotent.
Which API fields should I use?: Follow your payment provider's official documentation. The diagram shows the order of interactions and no parameters.

More in this category

All templates

Updated 2026-11-11