Payments & Integrations

Payments

The app supports two payment gateways. Choose one per build with PAYMENT_GATEWAY, and add the gateway's credentials in the Console under Storefront → Settings → Payment gateways (on the store, or on the Network for a marketplace). See Payment Gateways.

Stripe

PAYMENT_GATEWAY=stripe
STRIPE_KEY=pk_live_…              # publishable key
STRIPE_PAYMENT_UI=sheet           # sheet | field
STRIPE_ENABLE_APPLE_PAY=true
STRIPE_ENABLE_GOOGLE_PAY=true

• Payment sheet (sheet, default): Stripe's own sheet with cards, saved cards, Apple Pay and Google Pay. Customers can save cards from their account.
• Card field (field): a card entry field in the checkout, cards only.
• Apple Pay also needs a Merchant ID in your Apple Developer account, added to the Stripe gateway and to the app under Signing & Capabilities → Apple Pay. Google Pay needs nothing beyond the setting.

Stripe confirms the payment in the app, then the app places the order with the server.

QPay

PAYMENT_GATEWAY=qpay

For Mongolia. The customer picks their bank app from a list (or scans the QR code) and pays there. When they come back to the app it checks the payment straight away and shows where it is: being checked, not received yet (with Check again), or failed (with a way to pay again or pay another way). QPay tells the server when the payment is made, and the server places the order, so the order also appears if the customer never comes back to the app. The bank apps are already listed in the app's Info.plist so iOS lets it open them.

At checkout

• Delivery or pickup, with PRIORITIZE_PICKUP=true to start on pickup.
• Tips for the store and the driver, in steps of TIP_INCREMENT.
• Promo codes and automatic offers, applied before paying. See Promotions.
• A note for the store: delivery instructions, a gate code, another number to call. It is saved with the order (for QPay, before the customer leaves for their bank app) and shown at the top of the order in the Console.
• Unavailable items are flagged before payment, with a way to remove them, instead of failing after.

Live order updates

Order status, the driver's position, chat messages and store edits reach the app over SocketCluster. On Fleetbase Cloud nothing needs setting; self-hosted, point the app at your socket server with the SOCKETCLUSTER_* keys (Configuration). Each signed-in customer gets a short-lived token, so only they can follow their orders and chats.

Maps and addresses

GOOGLE_MAPS_API_KEY=AIza…
DEFAULT_MAP_TYPE=standard        # standard | satellite | hybrid | terrain
DEFAULT_COORDINATES=47.9221,106.9155

Enable these APIs on the key in Google Cloud: Maps SDK for Android, Maps SDK for iOS, Places API and Geocoding API, plus Maps JavaScript API for the web build. iOS shows Apple Maps; Android and the web show Google Maps. DEFAULT_MAP_TYPE applies to every map in the app.

Adding an address offers search, Use my current location, and Choose on the map, where the customer moves a pin to their exact spot. That works everywhere address search is weak; DISABLE_GEOCODING_SCREEN=true goes straight to the pin.

Deep links

APP_LINK_PREFIX=myshop

In a Network app, links open the matching screen: myshop://stores/<storeId>, myshop://stores/<storeId>/products/<productId>, myshop://categories/<categoryId>, myshop://offers/<offerId>, myshop://trucks/<truckId> and myshop://shop/categories/<categoryId> (the shop home's categories). Notifications open orders, chats and offers in either edition.

Languages

English, Mongolian and Ukrainian are included. DEFAULT_LOCALE sets the starting language and AVAILABLE_LOCALES the ones offered in the language switcher (in the header and the account screen). A customer's choice is remembered on their device.

To add a language, add brand/translations/<code>.json with the strings to translate (any string left out stays in English) and list the code in AVAILABLE_LOCALES. To change the wording of an existing language, override just those strings in the same file. Translations for the app itself are welcome as pull requests to storefront-app.