WooCommerce

Log in to your WordPress admin panel and navigate to WooCommerce in the left sidebar, then click Settings at the bottom of the WooCommerce menu. From the Settings page, click the Advanced tab at the top, then click the REST API link in the sub-navigation bar (it may also appear directly under WooCommerce → Advanced → REST API depending on your WooCommerce version). Click the Add Key button to create a new key pair. Give the key a descriptive name like 'FlutterFlow App', select the WordPress user the key belongs to (usually an Administrator), and choose the Permission level: select Read for a catalog-display app, or Read/Write only if you plan to use the Cloud Function proxy for writes. Click the Generate API Key button. WooCommerce will display your Consumer Key (starting with ck_) and Consumer Secret (starting with cs_) only once — copy both values immediately and save them somewhere secure, like a password manager. You will not be able to view the secret again. Also note your store's base URL, which follows the pattern https://yourstore.com/wp-json/wc/v3.

Open your FlutterFlow project and click API Calls in the left navigation panel. Click the + Add button at the top of the API Calls panel and select Create API Group from the dropdown. Name the group WooCommerce. In the Base URL field, enter your store's endpoint: https://yourstore.com/wp-json/wc/v3 (replace yourstore.com with your actual domain, and make sure it uses https — HTTP stores block Basic Auth in production). Now you need to add the Authorization header. Click the Headers tab within the API Group editor and click + Add Header. Set the Key to Authorization. For the Value, you need to supply a Base64-encoded string of your consumer key and secret in the format key:secret. The easiest way to generate this is to open your browser's developer console and type btoa('ck_yourkey:cs_yoursecret') — copy the resulting Base64 string. However, do not paste this static string directly into FlutterFlow as a hardcoded literal; instead, click the variable icon next to the header value field and create an App State variable called wcAuthToken. Store the Base64 string in that App State variable and reference it here as FFAppState().wcAuthToken. This keeps the token out of the exported Dart source as a plaintext constant. Click Save to save the API Group.

1// API Group configuration (reference)
2{
3  "group_name": "WooCommerce",
4  "base_url": "https://yourstore.com/wp-json/wc/v3",
5  "headers": [
6    {
7      "key": "Authorization",
8      "value": "Basic [Base64(consumer_key:consumer_secret)]"
9    },
10    {
11      "key": "Content-Type",
12      "value": "application/json"
13    }
14  ]
15}

With the WooCommerce API Group selected in the API Calls panel, click + Add API Call to create your first endpoint. Name it GetProducts and set the Method to GET. In the URL Path field, enter /products. Click the Variables tab and add two variables: page (integer, default 1) and per_page (integer, default 20). In the URL Path, update it to /products?page={{page}}&per_page={{per_page}} — FlutterFlow will substitute these at runtime. Click the Response & Test tab. In the Test section, click Add Request Info if needed, then click the Test button. FlutterFlow will fire the GET request against your store and display the raw JSON response. Click Generate JSON Paths from the response body to auto-generate response fields. Look for paths like $[*].id, $[*].name, $[*].price, $[*].images[0].src, and $[*].stock_quantity. Give each path a friendly name (productId, productName, productPrice, productImage, stockQuantity). Repeat this process to create a second API Call named GetOrders using /orders?page={{page}}&per_page={{per_page}}&status={{status}}, adding a status variable with a default of any. In your FlutterFlow canvas, add a ListView widget to a page. In the widget's Backend Query settings, select API Call, choose your WooCommerce API Group, and pick GetProducts. Map productName to a Text widget, productImage to an Image widget, and productPrice to another Text widget. FlutterFlow will generate a row for each product automatically.

1// Example JSON paths for WooCommerce GET /products response
2// Use these in the Response & Test tab → JSON Path fields
3
4// Product list paths
5$[*].id              → productId
6$[*].name            → productName
7$[*].price           → productPrice
8$[*].images[0].src   → productImage
9$[*].stock_quantity  → stockQuantity
10$[*].status          → productStatus
11$[*].categories[0].name → categoryName
12
13// Order list paths  
14$[*].id              → orderId
15$[*].status          → orderStatus
16$[*].total           → orderTotal
17$[*].billing.first_name → customerFirstName
18$[*].billing.last_name  → customerLastName
19$[*].date_created    → orderDate

Order creation and stock updates require Write permission and must never run from the Flutter client directly, because the consumer secret would be embedded in the compiled app. The correct pattern is to deploy a Firebase Cloud Function that holds the Write-permission consumer key and secret in environment variables, receives a plain authenticated request from FlutterFlow (authenticated with Firebase Auth), signs the WooCommerce Basic Auth header server-side, and forwards the call to your WooCommerce store. In the Firebase Console, navigate to your project and open Cloud Functions. Create a new function named woocommerceProxy. The function reads the consumer key and secret from environment config (set these with Firebase CLI environment variables before deploying — do not hardcode them in the function source). It receives a JSON body from FlutterFlow specifying the endpoint and payload, constructs the Basic Auth header, and forwards the request to your WooCommerce store using node-fetch or axios. In FlutterFlow, create a new API Call inside a separate API Group named WooProxy, pointing at your Cloud Function's HTTPS trigger URL. Add a Firebase Auth JWT header so only authenticated app users can call the proxy. In your Action Flow Editor, trigger this proxy call when the user taps 'Place Order' or 'Update Stock', passing the order details as JSON in the request body.

1// Firebase Cloud Function: woocommerceProxy/index.js
2const functions = require('firebase-functions');
3const fetch = require('node-fetch');
4
5exports.woocommerceProxy = functions.https.onCall(async (data, context) => {
6  // Reject unauthenticated calls
7  if (!context.auth) {
8    throw new functions.https.HttpsError('unauthenticated', 'Login required');
9  }
10
11  const consumerKey = process.env.WC_CONSUMER_KEY;
12  const consumerSecret = process.env.WC_CONSUMER_SECRET;
13  const storeBase = process.env.WC_STORE_URL; // e.g. https://yourstore.com/wp-json/wc/v3
14
15  const token = Buffer.from(`${consumerKey}:${consumerSecret}`).toString('base64');
16
17  const { endpoint, method, body } = data; // e.g. /orders, POST, {...}
18
19  const response = await fetch(`${storeBase}${endpoint}`, {
20    method: method || 'GET',
21    headers: {
22      'Authorization': `Basic ${token}`,
23      'Content-Type': 'application/json',
24    },
25    body: body ? JSON.stringify(body) : undefined,
26  });
27
28  const result = await response.json();
29  return result;
30});

WooCommerce's REST API paginates using page (1-based) and per_page (max 100, keep ≤50 on shared hosting) query parameters. To implement infinite scroll or a Load More button in FlutterFlow, create an App State variable called currentPage (integer, initial value 1). When the user taps the Load More button, add an Action in the Action Flow Editor: first Update App State to increment currentPage by 1, then fire the GetProducts API Call passing FFAppState().currentPage as the page variable. Append the returned products to a local state list. To reset pagination when a filter changes (e.g., category), add an action that resets currentPage to 1 and clears the product list before firing the first page call. For testing: API Calls that only use FlutterFlow's built-in API Call system (no Custom Actions or Custom Code) run correctly in FlutterFlow's web Run Mode — you can test product listings directly in the browser preview. However, if you add a Custom Action later (for example, to handle file uploads), you will need to test on a physical device or simulator. Always confirm your store's HTTPS certificate is valid before testing; an expired or self-signed certificate will cause connection errors on both web and native builds.