Five-lane architecture for agent-driven checkout: merchant edge, commerce services, payment stack, fulfillment and the approval gate before an order is authorized.

Full FlowZap Code

Copy and paste the following FlowZap code into a project in your FlowZap account to see this template diagram.

merchantEdge { # Merchant Edge
  n1: rectangle label:"Publish product feed"
  n2: rectangle label:"Validate feed"
  n3: rectangle label:"Expose ACP endpoints"
  n4: rectangle label:"Create checkout session"
  n5: diamond label:"Approve order?"
  n6: rectangle label:"Return order outcome"
  n1.handle(right) -> n2.handle(left)
  n2.handle(right) -> n3.handle(left)
  n3.handle(right) -> n4.handle(left)
  n4.handle(right) -> n5.handle(left)
  n5.handle(right) -> n6.handle(left) [label="Yes"]
  n2.handle(bottom) -> commerce.n7.handle(top) [label="Refresh catalog state"]
  n4.handle(bottom) -> payment.n11.handle(top) [label="Delegated payment request"]
  n6.handle(bottom) -> operations.n14.handle(top) [label="Create order event"]
  n6.handle(top) -> chatgpt.n20.handle(bottom) [label="Order outcome"]
}

commerce { # Commerce Services
  n7: rectangle label:"Resolve content"
  n8: rectangle label:"Resolve price promo"
  n9: rectangle label:"Resolve inventory"
  n10: rectangle label:"Resolve tax shipping"
  n7.handle(right) -> n8.handle(left)
  n8.handle(right) -> n9.handle(left)
  n9.handle(right) -> n10.handle(left)
  n10.handle(top) -> merchantEdge.n4.handle(bottom) [label="Checkout data"]
}

payment { # Payment Stack
  n11: rectangle label:"Tokenize payment"
  n12: rectangle label:"Authorize payment"
  n13: rectangle label:"Return auth status"
  n11.handle(right) -> n12.handle(left)
  n12.handle(right) -> n13.handle(left)
  n13.handle(top) -> merchantEdge.n5.handle(bottom) [label="Approved or declined"]
}

operations { # Order Operations
  n14: rectangle label:"Create OMS order"
  n15: rectangle label:"Reserve inventory"
  n16: rectangle label:"Trigger fulfillment"
  n17: rectangle label:"Handle returns support"
  n14.handle(right) -> n15.handle(left)
  n15.handle(right) -> n16.handle(left)
  n16.handle(right) -> n17.handle(left)
  n17.handle(top) -> chatgpt.n21.handle(bottom) [label="Service and support"]
}

chatgpt { # ChatGPT Channel
  n18: circle label:"Shopper intent"
  n19: rectangle label:"Display products"
  n20: rectangle label:"Show confirmation"
  n21: circle label:"Support entry"
  n18.handle(right) -> n19.handle(left)
  n19.handle(right) -> n20.handle(left)
  n20.handle(right) -> n21.handle(left)
  n18.handle(left) -> merchantEdge.n3.handle(right) [label="Discovery request"]
  n19.handle(left) -> merchantEdge.n4.handle(right) [label="Session request"]
  n20.handle(left) -> merchantEdge.n5.handle(right) [label="Purchase approval"]
}

Install the MCP packagenpm install -g flowzap-mcpMCP documentation

Related templates