Diagram playground

archlab 1.0 sequence

title "Checkout — Place Order"

description "One order placed: card charged, order stored, receipt sent."

 

@sequence

autonumber

cust:actor "Customer"

web "Storefront" [Next.js]

api:participant "Order API" [Go]

pay:participant "Payments" [Stripe]

db:participant "Orders DB" [PostgreSQL]

 

cust -> web : "Clicks Place order"

web ->+ api : "Place the order" [HTTPS]

desc "POST /api/v1/orders\nbody { cartId, addressId }\n201 → { orderId }\n409 → the cart moved on"

api -> api : "Validates the cart"

note right api : "Price and stock re-checked server-side"

alt "card accepted"

api ->+ pay : "Create charge" [REST]

desc "curl https://api.payments.example/v1/charges \\\n --request POST \\\n --header 'Idempotency-Key: <order id>' \\\n --data '{ \"amount\": 4250, \"currency\": \"THB\" }'\n\nThe idempotency key is the order id, so a retry cannot double-charge."

pay ..>- api : "charge.succeeded"

api -> db : "INSERT order" [SQL]

par "receipt"

api ~> cust : "Emails the receipt"

and "audit"

api ~> db : "Writes audit row"

api ..>- web : "201 Created"

else "card declined"

api ..> web : "402 Payment Required"

opt "first purchase"

web -> cust : "Shows onboarding tips"

note over cust db : "Order flow complete"