# How to Integrate E-Commerce Platforms with FlutterFlow

- Tool: FlutterFlow
- Difficulty: Advanced
- Time required: 30-35 min
- Compatibility: FlutterFlow Free+
- Last updated: March 2026

## TL;DR

Connect your FlutterFlow app to existing e-commerce backends like Shopify and WooCommerce via their REST APIs. Route all API calls through Cloud Functions to keep access tokens server-side. Set up a FlutterFlow API Group for product fetching, cart operations, and order creation. Map external product data to your FlutterFlow UI components and handle webhooks for order status synchronization.

## Connecting FlutterFlow to External E-Commerce Platforms

Many businesses already run their store on Shopify, WooCommerce, or BigCommerce. Instead of rebuilding everything, this tutorial connects your FlutterFlow mobile app to your existing e-commerce backend. Users browse products, manage their cart, and checkout — all synced with your live store. Cloud Functions act as a secure proxy to keep API credentials safe.

## Before you start

- A FlutterFlow project with Firebase authentication enabled
- A Shopify store with Admin API access (or WooCommerce with REST API consumer keys)
- Cloud Functions enabled on the Firebase Blaze plan
- Basic understanding of REST APIs and JSON data structures

## Step-by-step guide

### 1. Create Cloud Functions as a secure API proxy for your e-commerce platform

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.

```
const functions = require('firebase-functions');
const admin = require('firebase-admin');
const fetch = require('node-fetch');
admin.initializeApp();

const SHOPIFY_STORE = functions.config().shopify.store;
const SHOPIFY_TOKEN = functions.config().shopify.token;
const BASE_URL = `https://${SHOPIFY_STORE}.myshopify.com/admin/api/2024-01`;

// GET products with pagination
exports.getProducts = functions.https.onCall(async (data) => {
  const { page = 1, limit = 20, collection } = data;
  let url = `${BASE_URL}/products.json?limit=${limit}`;
  if (collection) url += `&collection_id=${collection}`;

  const res = await fetch(url, {
    headers: { 'X-Shopify-Access-Token': SHOPIFY_TOKEN },
  });
  const json = await res.json();
  return { products: json.products };
});

// GET single product
exports.getProduct = functions.https.onCall(async (data) => {
  const res = await fetch(
    `${BASE_URL}/products/${data.productId}.json`,
    { headers: { 'X-Shopify-Access-Token': SHOPIFY_TOKEN } }
  );
  const json = await res.json();
  return { product: json.product };
});

// POST create order
exports.createOrder = functions.https.onCall(async (data, ctx) => {
  if (!ctx.auth) throw new functions.https.HttpsError(
    'unauthenticated', 'Login required');

  const res = await fetch(`${BASE_URL}/orders.json`, {
    method: 'POST',
    headers: {
      'X-Shopify-Access-Token': SHOPIFY_TOKEN,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ order: data.order }),
  });
  const json = await res.json();
  return { order: json.order };
});
```

**Expected result:** Cloud Functions securely proxy requests to your Shopify or WooCommerce store, keeping API credentials on the server.

### 2. Set up the FlutterFlow API Group for product endpoints

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.

**Expected result:** Three API calls are configured in FlutterFlow, tested, and returning properly mapped product and order data from your e-commerce platform.

### 3. Build the product listing and detail pages

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.

**Expected result:** Users browse products from your live e-commerce store, filter by category, and view detailed product pages with image galleries and variant selectors.

### 4. Implement the cart and checkout flow with order creation

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.

**Expected result:** Users add products to a persistent cart, adjust quantities, and complete checkout which creates a real order on the e-commerce platform.

### 5. Handle webhooks for order status updates and inventory sync

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.

**Expected result:** Order status changes and inventory updates from your e-commerce platform automatically sync to Firestore via webhooks, keeping your FlutterFlow app data current.

## Complete code example

File: `Cloud Functions — Shopify API Proxy + Webhook Handler`

```dart
// functions/index.js — Shopify Integration
const functions = require('firebase-functions');
const admin = require('firebase-admin');
const fetch = require('node-fetch');
const crypto = require('crypto');
admin.initializeApp();

const STORE = functions.config().shopify.store;
const TOKEN = functions.config().shopify.token;
const WEBHOOK_SECRET = functions.config().shopify.webhook_secret;
const API = `https://${STORE}.myshopify.com/admin/api/2024-01`;

// Fetch products
exports.getProducts = functions.https.onCall(async (data) => {
  const { limit = 20, collectionId } = data;
  let url = `${API}/products.json?limit=${limit}&status=active`;
  if (collectionId) url += `&collection_id=${collectionId}`;
  const res = await fetch(url, {
    headers: { 'X-Shopify-Access-Token': TOKEN },
  });
  return await res.json();
});

// Fetch single product
exports.getProduct = functions.https.onCall(async (data) => {
  const res = await fetch(`${API}/products/${data.productId}.json`, {
    headers: { 'X-Shopify-Access-Token': TOKEN },
  });
  return await res.json();
});

// Create order
exports.createOrder = functions.https.onCall(async (data, ctx) => {
  if (!ctx.auth) throw new functions.https.HttpsError(
    'unauthenticated', 'Login required');
  const { lineItems, email, shippingAddress } = data;
  const order = {
    line_items: lineItems.map(i => ({
      variant_id: i.variantId,
      quantity: i.quantity,
    })),
    email,
    shipping_address: shippingAddress,
  };
  const res = await fetch(`${API}/orders.json`, {
    method: 'POST',
    headers: {
      'X-Shopify-Access-Token': TOKEN,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ order }),
  });
  const result = await res.json();
  // Cache order in Firestore
  await admin.firestore().collection('orders').doc(
    String(result.order.id)).set({
    userId: ctx.auth.uid,
    shopifyOrderId: result.order.id,
    orderNumber: result.order.order_number,
    status: result.order.financial_status,
    total: result.order.total_price,
    createdAt: admin.firestore.FieldValue.serverTimestamp(),
  });
  return result;
});

// Webhook handler for order updates
exports.shopifyWebhook = functions.https.onRequest(async (req, res) => {
  // Verify HMAC signature
  const hmac = req.headers['x-shopify-hmac-sha256'];
  const hash = crypto.createHmac('sha256', WEBHOOK_SECRET)
    .update(req.rawBody).digest('base64');
  if (hmac !== hash) return res.status(401).send('Invalid');

  const topic = req.headers['x-shopify-topic'];
  const body = req.body;

  if (topic === 'orders/updated') {
    await admin.firestore().collection('orders')
      .doc(String(body.id)).update({
        status: body.financial_status,
        fulfillment: body.fulfillment_status || 'unfulfilled',
      });
  }
  res.status(200).send('OK');
});
```

## Common mistakes

- **Calling Shopify Admin API directly from the FlutterFlow client** — The Admin API access token would be embedded in the client app, visible in network requests and decompiled code. Anyone with the token can read, modify, or delete your entire store's data. Fix: Route ALL e-commerce API calls through Cloud Functions. The Cloud Function adds the authorization header server-side, and the access token never leaves your server.
- **Not verifying webhook signatures from the e-commerce platform** — Without signature verification, anyone who discovers your webhook URL can send fake order updates or inventory changes, corrupting your local data. Fix: Always verify the HMAC signature in the webhook handler using the shared secret. Reject requests with invalid or missing signatures.
- **Fetching full product data from the external API on every page load** — Each API call to Shopify or WooCommerce adds latency (200-500ms) and counts against your API rate limit. A busy app with many users can quickly hit rate limits. Fix: Cache product data in Firestore using webhooks to keep it fresh. Serve products from Firestore for listing pages and only call the external API for real-time inventory checks during checkout.

## Best practices

- Route all e-commerce API calls through Cloud Functions to keep credentials server-side
- Cache product data in Firestore and keep it fresh via webhooks for faster page loads
- Verify webhook HMAC signatures to prevent spoofed requests
- Use App State (persisted) for the cart so it survives navigation and app restarts
- Map API response fields carefully in FlutterFlow's API Group to avoid null errors on missing fields
- Handle variant selection (size, color) with DropDowns mapped from the product's options array
- Add loading states and error handling for API calls that depend on external service availability

## Frequently asked questions

### Can I connect to both Shopify and WooCommerce in the same app?

Yes. Create separate Cloud Function sets for each platform and a platform selector in the admin settings. Use the same FlutterFlow UI components but switch the API calls based on which platform the merchant has configured.

### How do I handle Shopify API rate limits?

Shopify allows 40 requests per app per store, with a leak rate of 2 requests per second. Cache product data in Firestore and serve from cache for listing pages. Only call the live API for real-time operations like inventory checks and order creation.

### Can I use Shopify's Storefront API instead of the Admin API?

Yes. The Storefront API is designed for customer-facing apps with more limited permissions. It supports product browsing and cart/checkout operations but not order management. It is a better fit if you only need read access and checkout.

### How do I sync customer accounts between FlutterFlow and Shopify?

On user registration in FlutterFlow, create a matching Shopify customer via the Admin API. Store the Shopify customer ID on the user's Firestore document. Use this ID when creating orders to associate them with the correct Shopify customer.

### What happens if the external API is down when a user tries to checkout?

Show a user-friendly error message and offer to save their cart for later. Implement retry logic in the Cloud Function with exponential backoff. For critical operations, consider a queue system that retries failed orders.

### Can RapidDev help integrate multiple e-commerce platforms?

Yes. RapidDev can build a unified commerce layer that connects Shopify, WooCommerce, BigCommerce, and custom backends through a single API, with inventory synchronization, order management, and multi-channel fulfillment.

---

Source: https://www.rapidevelopers.com/flutterflow-tutorials/how-to-integrate-e-commerce-platforms-with-flutterflow
© RapidDev — https://www.rapidevelopers.com/flutterflow-tutorials/how-to-integrate-e-commerce-platforms-with-flutterflow