How to Integrate FlutterFlow with WooCommerce REST API

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}.

1// Cloud Function: woocommerceProxy (Node.js 20)
2const functions = require('firebase-functions');
3const axios = require('axios');
4
5exports.woocommerceProxy = functions.https.onRequest(async (req, res) => {
6  res.set('Access-Control-Allow-Origin', '*');
7  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
8
9  const { method = 'GET', endpoint, body } = req.body;
10  const consumerKey = process.env.WC_CONSUMER_KEY;
11  const consumerSecret = process.env.WC_CONSUMER_SECRET;
12  const storeUrl = process.env.WC_STORE_URL; // e.g. https://yourstore.com
13
14  const credentials = Buffer.from(`${consumerKey}:${consumerSecret}`).toString('base64');
15
16  try {
17    const response = await axios({
18      method,
19      url: `${storeUrl}/wp-json/wc/v3/${endpoint}`,
20      headers: {
21        Authorization: `Basic ${credentials}`,
22        'Content-Type': 'application/json',
23      },
24      data: body,
25      params: method === 'GET' ? body : undefined,
26    });
27    res.json(response.data);
28  } catch (error) {
29    const status = error.response?.status || 500;
30    res.status(status).json({ error: error.response?.data || error.message });
31  }
32});

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.

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.

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.

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.

1// Custom Function: buildWCLineItems
2// Converts App State cartItems to WooCommerce line_items format
3List<dynamic> buildWCLineItems(List<dynamic> cartItems) {
4  return cartItems.map((item) {
5    final map = <String, dynamic>{
6      'product_id': item['productId'],
7      'quantity': item['quantity'] ?? 1,
8    };
9    if (item['variationId'] != null && item['variationId'] != 0) {
10      map['variation_id'] = item['variationId'];
11    }
12    return map;
13  }).toList();
14}
15
16// Custom Function: getCartTotal
17String getCartTotal(List<dynamic> cartItems) {
18  double total = 0.0;
19  for (final item in cartItems) {
20    final price = double.tryParse(item['price']?.toString() ?? '0') ?? 0.0;
21    final qty = (item['quantity'] as int? ?? 1);
22    total += price * qty;
23  }
24  return '\$${total.toStringAsFixed(2)}';
25}