What is a Custom Shopify Storefront?
A custom storefront is any customer-facing platform that does not use a native Shopify theme. This guide applies to:
Mobile apps — custom-built apps or app builder platforms (e.g. Appbrew, Appmaker, Tapcart)
Headless storefronts — custom web frontends built with React, Next.js, or Hydrogen
External platforms — third-party or AI-driven website builders connected to Shopify's backend
⚡ What this guide covers — Connect Shopflo's checkout to your Shopify-backed storefront and ensure shoppers land on the right success page after paying. Two steps, start to finish.
Checkout navigation flow
Every checkout starts the same way, then follows one of two paths.
Initiation — Call the Shopflo Checkout API to generate a checkout URL, then redirect the customer to it to complete payment on Shopflo.
🙂 Happy path — Payment succeeds
Customer completes payment on Shopflo.
Shopflo fires a webhook to your whitelisted endpoint with the full order payload — order ID, line items, addresses, transactions, and
checkout_id/checkout_tokeninnote_attributes.Your endpoint responds with
200 OKand asuccess_urlin the body.Shopflo redirects the customer to your
success_url. Since you already received the full payload from the webhook, you can return a dynamic URL (e.g. withcheckout_id) and render the order confirmation immediately.
😐 Unhappy path — Payment fails or abandoned
The customer abandons or payment fails. No webhook is fired. Shopflo returns the customer to your storefront.
Step 1 — Checkout API integration
Integrate Shopflo's Checkout APIs with your storefront.
⚠️ Before you begin — You'll need your unique Shopflo credentials:
Merchant ID (MID) — your
shopflo_merchant_keyin the SDKAPI Key
Follow the Postman documentation to complete the integration. Pass is_flash_redirect: true inside metadata.ui-config — this tells Shopflo to redirect the customer to your success_url after payment.
Things to keep in mind
🏷️ Discounts — Shopify discounts sync automatically. For discounts from your own system, pass them as a discount object in the checkout API payload.
🎁 Rewards — Pass loyalty rewards as a discount in the checkout API payload. Once Shopflo confirms the order is placed, mark the reward as claimed in your system.
Authenticated user flow — If the user is already authenticated via Shopflo SSO, they won't need to log in again at checkout. Pass the refresh token from the SSO login API response as a search parameter. See the SSO login API documentation for details.
Profile and order management — If you're using Shopflo SSO, fetch the customer's profile and order data using their email once authenticated, with your Shopify Admin credentials — no Shopflo tokens are required for these calls. If you're not using Shopflo SSO, follow your existing process.
Step 2 — Webhook for post-payment redirect
Set up a webhook so customers land on the right page after a successful payment.
Create a webhook endpoint using the payload defined in
orderapi.json.When the webhook fires, your endpoint must:
Return a
200 OKresponse to acknowledge receiptInclude the
success_urlin the response body
Example response
{
"success_url": "<order success page URL>",
"platform_order_id": "<your platform order ID>"
}
🎯 Why this matters — The 200 OK confirms your server received the webhook. The success_url sends the shopper to the right confirmation page once their order is placed.