Commerce & Orders
Pickup at Store
The retail checkout fulfillment step. Unlike Pickup Scheduler (restaurant/food orders, where ASAP vs. a scheduled time slot matters because prep timing matters), a retail order simply waits at the store — there’s no time choice by design. Shows the store’s address, read-only, so the customer knows where to collect their order.
Confirms fulfillment method, then forwards the pending order onward.
Reads the store address the owner already set for opening hours — nothing to configure twice.
Available on all plans.
Four things worth knowing
No time choice, by design
Fulfillment is always “pickup at store” — the component only confirms this and shows where, not when. Keeps retail checkout to one tap.
Always re-fetches the address
Refreshes the store address on mount rather than trusting a stale prefetch cache, since the owner can change it at any time.
Forwards the pending order
When arriving from Cart with a pending order payload, confirming routes to orderConfirmScreenId with the order (plus pickupMode: ‘asap’) attached.
Legacy direct-submit fallback
If no orderConfirmScreenId is set but onSubmitOrder is available, it submits the order directly instead of navigating onward.
Note: if no store address has been set yet, the card shows noAddressText instead of a blank line.
Find it, drop it, wire the flow
Where to find itAdd it to your checkout flow
- Component picker → Commerce & Orders → Pickup at Store.
- Place it after Cart and before Checkout / Order Summary.
- Set
orderConfirmScreenIdso confirming forwards the pending order.
Before you publishThree things to check
- Set your real store address under Opening Hours settings — this screen reads it from there.
- Navigation wiring:
orderConfirmScreenId,ordersScreenId, andbackScreenId. - Update
titleandsubtitlecopy to match your store’s tone.
Data, navigation, and content
| Prop | Type | Default | Description |
|---|---|---|---|
title, subtitle | string | ’Pickup at Store’, “We’ll have your order ready…” | Main card copy. |
noAddressText | string | ’Store address not set yet’ | Shown when no address has been configured in opening hours. |
confirmButtonText | string | ’Continue’ | CTA button copy. |
orderConfirmScreenId, ordersScreenId, backScreenId | screen-select | ” | Onward, orders-list, and back navigation targets. |
showAddress, showConfirmButton | boolean | true | Feature visibility toggles. |
onSubmitOrder, cartItems | function / array | Injected by AppPlayer | Used by the legacy direct-submit fallback when no confirm screen is set. |
Make it yours
Most visual customisation lives in Builder style props. Keep component defaults in sync with registry defaultProps when updating branding tokens.
| Prop | Default | What it controls |
|---|---|---|
backgroundColor, cardBackgroundColor | Theme defaults | Screen and pickup-card surfaces. |
titleColor, subtitleColor, metaColor | Theme defaults | Text hierarchy. |
primaryColor, primaryTextColor | Theme defaults | Card border accent and CTA button. |
dividerColor | Theme defaults | Address row separator. |
borderRadius, fontFamily | 20, Urbanist-SemiBold | Shape and typography. |
Common mistakes to avoid
Use this for retail, not food orders
Restaurant apps need a real time choice (ASAP vs. scheduled) — use Pickup Scheduler there instead. Pickup at Store is for retail/e-commerce only.
Set the address once, in one place
Don’t duplicate the store address elsewhere — this screen and Opening Hours read from the same settings, so update it there and it flows through everywhere.
Always set orderConfirmScreenId
Without it, the component falls back to legacy direct submission, which skips the usual review-before-submit step your customers expect.
Keep the flow to one step
Don’t add extra confirmation screens before this one beyond Cart — the fixed, no-choice design is what keeps retail checkout fast.