# How to Integrate FlutterFlow with WooCommerce REST API

- Tool: FlutterFlow
- Difficulty: Beginner
- Time required: 40-60 min
- Compatibility: FlutterFlow Free+ (Cloud Function required for secure auth)
- Last updated: March 2026

## TL;DR

Connect FlutterFlow to WooCommerce using REST API v3 with the base URL https://{site}/wp-json/wc/v3/. Route all API calls through a Cloud Function that adds Basic Auth headers with your consumer key and secret server-side. Query GET /products for the catalog, handle product variations via GET /products/{id}/variations, manage the cart in App State, and create orders with POST /orders including line_items, billing, and shipping objects.

## Build a headless WooCommerce mobile storefront in FlutterFlow

WooCommerce powers over 30% of all online stores worldwide. If your client's store runs on WooCommerce, you can build a native mobile app storefront in FlutterFlow that connects to the existing product catalog, inventory, and order system via the WooCommerce REST API v3. Unlike Shopify's GraphQL Storefront API, WooCommerce uses a standard REST API authenticated with consumer keys. Because these keys cannot be safely embedded in mobile apps, this tutorial routes all WooCommerce calls through a Cloud Function that adds auth server-side. You will build a product catalog, variant selector, App State cart, and order submission flow.

## Before you start

- A WooCommerce store (WordPress + WooCommerce plugin installed and active)
- WooCommerce REST API consumer key and consumer secret — generate in WooCommerce Admin → Settings → Advanced → REST API → Add Key
- A FlutterFlow project with Firebase/Firestore connected (for Cloud Functions and optional order storage)
- Basic understanding of Cloud Functions and FlutterFlow's API Manager

## Step-by-step guide

### 1. Create a Cloud Function proxy for WooCommerce REST API authentication

WooCommerce REST API uses HTTP Basic Authentication with the consumer_key as the username and consumer_secret as the password. Embedding consumer_secret in a mobile app is a critical security risk — it gives anyone who extracts the secret full write access to your WooCommerce store (orders, products, customers, settings). Create a Cloud Function named woocommerceProxy that accepts the method, WooCommerce endpoint path, and optional request body. The function builds the Authorization header (Base64 of consumer_key:consumer_secret) and proxies the request to your store's wp-json/wc/v3/ endpoint. Store consumer_key and consumer_secret in Cloud Function environment variables. In FlutterFlow, add an API Group named WooCommerceAPI pointing to your Cloud Function URL, with a simple JSON body containing {method, endpoint, body}.

```
// Cloud Function: woocommerceProxy (Node.js 20)
const functions = require('firebase-functions');
const axios = require('axios');

exports.woocommerceProxy = functions.https.onRequest(async (req, res) => {
  res.set('Access-Control-Allow-Origin', '*');
  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }

  const { method = 'GET', endpoint, body } = req.body;
  const consumerKey = process.env.WC_CONSUMER_KEY;
  const consumerSecret = process.env.WC_CONSUMER_SECRET;
  const storeUrl = process.env.WC_STORE_URL; // e.g. https://yourstore.com

  const credentials = Buffer.from(`${consumerKey}:${consumerSecret}`).toString('base64');

  try {
    const response = await axios({
      method,
      url: `${storeUrl}/wp-json/wc/v3/${endpoint}`,
      headers: {
        Authorization: `Basic ${credentials}`,
        'Content-Type': 'application/json',
      },
      data: body,
      params: method === 'GET' ? body : undefined,
    });
    res.json(response.data);
  } catch (error) {
    const status = error.response?.status || 500;
    res.status(status).json({ error: error.response?.data || error.message });
  }
});
```

**Expected result:** Cloud Function is deployed. All WooCommerce API calls from FlutterFlow go through this proxy with auth handled server-side.

### 2. Configure the API Group and product listing endpoints

In FlutterFlow → API Manager → Add API Group, name it WooCommerceAPI. Set the Base URL to your Cloud Function HTTPS URL. All requests are POST with a JSON body containing method (the HTTP method for WooCommerce), endpoint (the WC REST path), and optionally body (query params or request data). Add an endpoint named getProducts: POST to the Cloud Function URL, request body: {"method": "GET", "endpoint": "products", "body": {"status": "publish", "per_page": "20", "page": "1"}}. Test the endpoint — it should return an array of WooCommerce product objects with fields including id, name, slug, price, regular_price, sale_price, images (array with src), short_description, stock_status, and type (simple/variable). Add a second endpoint getProductById with request body {"method": "GET", "endpoint": "products/[productId]", "body": {}} where [productId] is a variable.

**Expected result:** API Group is configured and getProducts returns your WooCommerce product catalog with pricing and images.

### 3. Build the product catalog and detail pages with variation selector

Create a ProductCatalog page with a Backend Query using the getProducts endpoint. Add a GridView (2 columns) bound to the result array. Each ProductCard Component shows: Image from images[0].src, Text for name (bold), Row with regular_price (strikethrough if sale price exists) and sale_price (red, bold). On Tap: navigate to ProductDetail page passing the product id. On ProductDetail page, add a Backend Query using getProductById passing the productId parameter. For variable products (type == 'variable'), add another Backend Query using a getProductVariations endpoint (WC endpoint: products/{id}/variations). Add a DropDown bound to the variations result — display each variation's attributes as the label (e.g., 'Large / Blue') and store the selected variation's id in Page State selectedVariationId and its price in Page State selectedPrice. For simple products, skip the DropDown and use the product's price directly. Display stock_status with a Conditional Visibility green (In Stock) or red (Out of Stock) Container.

**Expected result:** Product catalog displays with images and pricing. Detail page shows variation selector for variable products.

### 4. Build the App State shopping cart

WooCommerce's REST API does not have a server-side cart concept for headless use — you manage the cart client-side. In App State, create a cartItems variable of type List (JSON type: [{productId, variationId, quantity, name, price, imageUrl}]). Create three Custom Functions: addToCart(cartItems, newItem) that checks if the item with matching productId and variationId already exists and increments quantity, or appends it; removeFromCart(cartItems, productId, variationId) that filters out the matching item; and getCartTotal(cartItems) that sums price × quantity for all items and returns a formatted string. On ProductDetail, add a Quantity stepper (two Buttons with a Text between them showing Page State quantity) and an Add to Cart button. On tap, call a Custom Action that uses the addToCart Custom Function and updates App State cartItems. Add a Cart icon in the AppBar with a Badge showing App State cartItems length.

**Expected result:** Users can add items to a cart stored in App State. The cart badge shows the item count and the cart total is calculated by the Custom Function.

### 5. Submit the order with POST /orders and redirect to payment gateway

Create a Checkout page with TextFields for billing details: first_name, last_name, email, phone, address_1, city, state, postcode, country. Add a DropDown for payment_method populated with your enabled payment gateways (e.g., bacs for bank transfer, paypal, stripe). Add a Place Order button. In its Action Flow: first validate the form (all required fields filled). Then call the WooCommerceAPI with endpoint orders, method POST, and body: {status: 'pending', payment_method: selectedPaymentMethod, payment_method_title: 'gateway name', billing: {first_name, last_name, email, phone, address_1, city, state, postcode, country: 'US'}, line_items: [{product_id, variation_id, quantity}] mapped from App State cartItems using a Custom Function buildWCLineItems}. The response includes an order id and payment_url. If payment_url is not empty, Launch URL to it for hosted payment. Clear App State cartItems after successful order creation.

```
// Custom Function: buildWCLineItems
// Converts App State cartItems to WooCommerce line_items format
List<dynamic> buildWCLineItems(List<dynamic> cartItems) {
  return cartItems.map((item) {
    final map = <String, dynamic>{
      'product_id': item['productId'],
      'quantity': item['quantity'] ?? 1,
    };
    if (item['variationId'] != null && item['variationId'] != 0) {
      map['variation_id'] = item['variationId'];
    }
    return map;
  }).toList();
}

// Custom Function: getCartTotal
String getCartTotal(List<dynamic> cartItems) {
  double total = 0.0;
  for (final item in cartItems) {
    final price = double.tryParse(item['price']?.toString() ?? '0') ?? 0.0;
    final qty = (item['quantity'] as int? ?? 1);
    total += price * qty;
  }
  return '\$${total.toStringAsFixed(2)}';
}
```

**Expected result:** Placing an order creates a WooCommerce order via POST /orders. Customers are redirected to the payment gateway URL for checkout.

## Complete code example

File: `WooCommerce Integration Architecture`

```text
Cloud Function: woocommerceProxy
├── Env vars: WC_CONSUMER_KEY, WC_CONSUMER_SECRET, WC_STORE_URL
├── Builds: Authorization: Basic base64(key:secret)
└── Proxies to: {storeUrl}/wp-json/wc/v3/{endpoint}

API Group: WooCommerceAPI
├── Base URL: https://{cloudFunctionUrl}
├── All requests: POST with body {method, endpoint, body}
├── getProducts: {method:'GET', endpoint:'products',
│   body:{status:'publish', per_page:'20', page:'1'}}
├── getProductById: {method:'GET', endpoint:'products/[id]'}
├── getProductVariations: {method:'GET',
│   endpoint:'products/[id]/variations'}
└── createOrder: {method:'POST', endpoint:'orders', body: orderData}

App State:
├── cartItems: List<JSON>
│   └── [{productId, variationId, quantity, name, price, imageUrl}]
└── cartTotal: String (computed by Custom Function)

Custom Functions:
├── addToCart(cartItems, newItem) → List<JSON>
├── removeFromCart(cartItems, productId, variationId) → List<JSON>
├── getCartTotal(cartItems) → String
└── buildWCLineItems(cartItems) → List (for POST /orders)

Page Architecture:
├── ProductCatalog
│   └── GridView (2 cols, Backend Query: getProducts)
│       └── ProductCard: image + name + price + salePrice
│
├── ProductDetail (param: productId)
│   ├── Backend Query: getProductById
│   ├── Backend Query: getProductVariations (if type==variable)
│   ├── DropDown: variations → Page State selectedVariationId
│   ├── Stepper: quantity → Page State quantity
│   ├── Container: stock_status (green/red)
│   └── Button: Add to Cart → update App State cartItems
│
├── Cart
│   ├── ListView (App State cartItems)
│   │   └── Row: image + name + qty stepper + price + remove btn
│   └── Column: subtotal + checkout button
│
└── Checkout
    ├── TextFields: billing details
    ├── DropDown: payment_method
    └── Button: Place Order
        └── Action: createOrder API → Launch URL payment_url
```

## Common mistakes

- **Exposing the WooCommerce consumer_secret in client-side API Group headers** — The consumer_secret is the password for your WooCommerce store's API. Anyone who extracts it from the compiled APK or IPA can make API calls as an admin — creating or deleting orders, reading all customer data, and modifying products. WooCommerce API keys with write permission are especially dangerous. Fix: Never add WooCommerce authentication headers directly in FlutterFlow's API Manager. Route all WooCommerce API calls through a Cloud Function that reads the consumer_key and consumer_secret from environment variables and constructs the Authorization header server-side before forwarding the request.
- **Trying to use WooCommerce's session-based cart (add-to-cart REST endpoint) for headless apps** — WooCommerce's /cart and /add-to-cart endpoints rely on WordPress cookies and session management, which does not work in mobile apps. FlutterFlow cannot maintain a WordPress session cookie across API calls, so these endpoints return empty cart data. Fix: Manage the cart entirely client-side in FlutterFlow's App State as a List of JSON objects. Only POST /orders when the customer is ready to place the order — WooCommerce creates the order directly without needing a server-side cart session.
- **Not passing variation_id when creating orders for variable products** — WooCommerce variable products have a parent product and multiple variations (each with their own SKU, price, and inventory). If you POST /orders with only product_id for a variable product, WooCommerce creates the order without a specific variation, resulting in incorrect pricing, wrong inventory deduction, and fulfillment confusion. Fix: Always include variation_id in the line_items array when the user selected a variant. In the buildWCLineItems Custom Function, check if variationId is not null or 0 before adding the variation_id field to the line item.

## Best practices

- Always proxy WooCommerce API calls through a Cloud Function — never include the consumer_secret in the FlutterFlow app in any form
- Generate a separate WooCommerce API key with Read Only permission for product browsing and a separate Write permission key for order creation — store them as separate Cloud Function environment variables
- Cache your product catalog in Firestore with a scheduled Cloud Function sync (every 15 min) and serve catalog reads from Firestore rather than hitting the WooCommerce server on every page load
- Use App State for the cart rather than any server-side WooCommerce cart session — simpler, faster, and works offline
- Validate stock availability via the stock_status and stock_quantity fields before allowing checkout — WooCommerce can run out of stock between when the user views the product and when they place the order
- Set the order status to pending in POST /orders (not processing) until payment is confirmed — a webhook from your payment gateway should update the status to processing via the Cloud Function
- Test order creation in WooCommerce test mode with the Stripe for WooCommerce test cards before going live

## Frequently asked questions

### What WooCommerce REST API permissions do I need for my consumer key?

For product browsing only: Read permission. For a full storefront where customers place orders: Read/Write permission — this allows POST /orders to create new orders. Never use the consumer key in the client app regardless of permissions. Generate the key in WooCommerce Admin → Settings → Advanced → REST API → Add Key. Create two separate keys if you want to limit order creation to authenticated users only.

### How do I handle WooCommerce product categories and filtering in FlutterFlow?

Use the GET /products/categories endpoint (via your Cloud Function proxy) to fetch all categories with id and name. Display them as a ChoiceChips widget bound to Page State selectedCategoryId. When a category is selected, call getProducts with the additional query parameter category: selectedCategoryId in the request body. For tag filtering, use the tag query parameter with a tag ID from GET /products/tags.

### How do I show customers their order history from WooCommerce?

Use GET /orders with the parameter customer: wcCustomerId to fetch a specific customer's orders. However, this requires knowing the WooCommerce customer ID, which is created by WooCommerce when the customer places their first order. After a successful POST /orders response, save the customer_id from the response body to Firestore linked to the user's Firebase Auth UID. On subsequent orders and for order history, use this stored customer_id.

### Can FlutterFlow handle WooCommerce product search?

Yes. Use GET /products with the search query parameter containing the user's search term. In FlutterFlow, add a TextField bound to Page State searchQuery. On text change (or when a search button is tapped), call the getProducts API endpoint with search: searchQuery in the request body passed to your Cloud Function. WooCommerce searches product titles and descriptions.

### How do I apply WooCommerce coupon codes in FlutterFlow?

Add a coupon_lines field to your POST /orders request body: [{"code": "COUPONCODE"}]. WooCommerce validates the coupon and applies the discount automatically when the order is created. If the coupon is invalid or expired, the API returns an error in the response. Show a coupon TextField on the checkout page and include its value in the order creation call. Verify the coupon first with GET /coupons?code=COUPONCODE to show the discount amount before order submission.

### Can RapidDev help build a full WooCommerce mobile app in FlutterFlow?

Yes. A production WooCommerce mobile app with customer accounts, order tracking, push notifications for order status, wishlist synced to WooCommerce wishlists, reviews, and payment gateway integrations requires significant Cloud Function work and Custom Actions. RapidDev specializes in WooCommerce and FlutterFlow integrations for existing e-commerce businesses.

---

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