How to Integrate E-Commerce Platforms with FlutterFlow

Create a set of Cloud Functions that act as a proxy between FlutterFlow and your e-commerce platform. For Shopify, use the Admin API with your access token stored in Firebase Functions config. Create three endpoints: getProducts (fetches products with pagination), getProduct (fetches a single product by ID), and createOrder (creates a new order). Each function adds the authorization header server-side so the access token never reaches the client. For WooCommerce, use the REST API with consumer key and secret in the config. The function pattern is the same — receive parameters from the client, make the authenticated API call, and return the formatted response.

1const functions = require('firebase-functions');
2const admin = require('firebase-admin');
3const fetch = require('node-fetch');
4admin.initializeApp();
5
6const SHOPIFY_STORE = functions.config().shopify.store;
7const SHOPIFY_TOKEN = functions.config().shopify.token;
8const BASE_URL = `https://${SHOPIFY_STORE}.myshopify.com/admin/api/2024-01`;
9
10// GET products with pagination
11exports.getProducts = functions.https.onCall(async (data) => {
12  const { page = 1, limit = 20, collection } = data;
13  let url = `${BASE_URL}/products.json?limit=${limit}`;
14  if (collection) url += `&collection_id=${collection}`;
15
16  const res = await fetch(url, {
17    headers: { 'X-Shopify-Access-Token': SHOPIFY_TOKEN },
18  });
19  const json = await res.json();
20  return { products: json.products };
21});
22
23// GET single product
24exports.getProduct = functions.https.onCall(async (data) => {
25  const res = await fetch(
26    `${BASE_URL}/products/${data.productId}.json`,
27    { headers: { 'X-Shopify-Access-Token': SHOPIFY_TOKEN } }
28  );
29  const json = await res.json();
30  return { product: json.product };
31});
32
33// POST create order
34exports.createOrder = functions.https.onCall(async (data, ctx) => {
35  if (!ctx.auth) throw new functions.https.HttpsError(
36    'unauthenticated', 'Login required');
37
38  const res = await fetch(`${BASE_URL}/orders.json`, {
39    method: 'POST',
40    headers: {
41      'X-Shopify-Access-Token': SHOPIFY_TOKEN,
42      'Content-Type': 'application/json',
43    },
44    body: JSON.stringify({ order: data.order }),
45  });
46  const json = await res.json();
47  return { order: json.order };
48});

In FlutterFlow, go to API Calls and create a new API Group named 'ECommerceAPI'. Add three API calls that map to your Cloud Functions: (1) GetProducts — calls the getProducts Cloud Function, returns a list of product objects. Map the response JSON paths for product id, title, description, images array, variants (with price and inventory), and tags. (2) GetProduct — calls getProduct with a productId parameter, returns a single product with full details. (3) CreateOrder — calls createOrder with the order payload. For each API call, define the response structure in FlutterFlow so you can bind product fields to widgets. Test each call in the API testing panel to verify the response mapping.

Create a ProductCatalog page. Add a ListView bound to the GetProducts API call. Each product card is a Container with the product's first image (from images[0].src), title Text, price Text (from variants[0].price formatted as currency), and an availability indicator (green dot if inventory > 0). Add ChoiceChips at the top for collection/category filtering — pass the selected collection ID to the API call. On card tap, navigate to a ProductDetail page with the productId. On the detail page, add a PageView for product images, the full description, variant selectors (DropDowns for size and color mapped from the product's options array), the price, and an Add to Cart button.

Use App State (persisted) to store the cart as a JSON list of objects: [{productId, variantId, title, price, quantity, imageUrl}]. The Add to Cart button appends an item to this list (or increments quantity if the variant already exists). Create a Cart page with a ListView bound to the App State cart list. Each item shows the product image, title, variant info, quantity with +/- buttons, line total, and a remove button. Show the subtotal, tax (if applicable), and total at the bottom. On Checkout tap, construct the order payload matching the Shopify/WooCommerce order format and call the CreateOrder Cloud Function. On success, clear the cart App State and navigate to an OrderConfirmation page showing the order number and status.

Create an HTTP-triggered Cloud Function that receives webhooks from your e-commerce platform. For Shopify, configure webhooks in Shopify Admin → Settings → Notifications → Webhooks for events: orders/updated, products/update, inventory_levels/update. The webhook handler: (1) Verifies the webhook signature (HMAC) for security. (2) For order status changes, updates a local Firestore `orders` collection with the new status so your FlutterFlow app can display order tracking without calling the external API each time. (3) For inventory updates, optionally cache inventory levels in Firestore for faster product display. Register the webhook URL (your Cloud Function's HTTPS URL) in your e-commerce platform's webhook settings.