Appearance
Web flows
The desktop storefront's main journeys, each mapped onto the Batch Commerce API call by call. Each plays step by step in a browser window.
How to read a flow page
Every page opens with a player. Press Play and the step list advances while the browser beside it shows the page the step is on, with the field or button it touches ringed. Each step names the call it makes, the access it needs — printed exactly as the endpoint's table prints it, for example Origin + Brand key + Customer — and a line on what the server does with the call. Space plays and pauses; ← and → step.
Below the player, a state diagram shows the journey as states and the calls that move between them. Where the journey changes a stored record — an account, an order, a scanned code — the page links to that record's Lifecycle diagram on its reference page, which is the one place each lifecycle is drawn.
No storefront page has a design yet. Every page in the player is drawn from what the documented calls require, and labelled not designed yet.
The flows
| Flow | Starts at | Ends at | Records it changes |
|---|---|---|---|
| Authentication states | Any page | Signed in, refused, or stuck — every door in one statechart | Account |
| Sign up | Home page | Signed in, account verified | Account |
| Log in | Log-in page | Signed in, by password, code, magic link or Google | Account |
| Reset a password | “Forgot password?” | New password set, then a fresh login | Account |
| Shop to order | Store picker | Order placed and paid | Order |
| Scan to claim | A code typed or opened from a label | Points and collectible claimed, or held for a receipt | Scanned code |
| Earn and spend | Rewards page | Reward claimed, then spent in the bag | Campaign step |
| Ownership transfer | A scanned product someone else owns | Collectible moved to the new owner | Ownership request |
Two pages are not journeys, so they have no player. Each lists every call the page integrates and the traps in them:
- Profile page — the customer, points and level, details, avatar, addresses, preferences, deactivation.
- Collectible page — the collection grid, one collectible, and the campaigns it counts toward.
Two headers, three keys
Every web call sends Origin, which the server checks against the registered site. On top of that a call may need:
| Credential | Comes from | Sent as |
|---|---|---|
| Brand key | result.apiKey from POST /api/v1/tenant | api-key |
| Hub key — calls marked Hub selected | result.apiKey from PUT /api/v1/set-hub | api-key, in place of the brand key |
| Customer token | Any login, a magic link, OAuth, or a guest order | Authorization: Bearer … |
The full list of access labels is on the overview.