3dcart (now Shift4Shop)

Log into your Shift4Shop store's Admin Panel. Navigate to Settings → API (the exact path may vary slightly by Shift4Shop version — look for API, REST API, or Developer Tools in the Settings menu). You will find three credentials that are ALL required for every API call: 1. SecureURL — this is your store's primary domain URL (e.g. https://www.yourstore.com). It acts as a store identifier in the API, not a password, but it is still required in every request header. 2. PrivateKey — this is a long alphanumeric string that authenticates API access to your specific store. It is a sensitive credential — treat it like a password. Do not share it, do not paste it into FlutterFlow, and do not commit it to source control. 3. Token — this is a separate public token used alongside the PrivateKey. Both are required simultaneously; submitting only one returns a 401 error. Note down all three credentials and keep them in a secure location like 1Password or your Firebase Functions environment configuration. Also confirm your store's API base URL: if your store was created after the Shift4Shop rebrand, use https://api.shift4shop.com/v3/; if your store predates the rebrand or was originally a 3dcart store, test both URLs — the legacy https://apirest.3dcart.com may still be what your store responds to. When in doubt, check your store's API documentation page or contact Shift4Shop support to confirm the correct base URL for your account.

The Shift4Shop PrivateKey cannot appear in a FlutterFlow API Call — it would be compiled into your app binary and extractable by anyone who downloads your app. Create a Firebase Cloud Function that receives requests from FlutterFlow, adds all three required Shift4Shop headers from environment variables, and forwards the request to the Shift4Shop API. In the Firebase Console, navigate to your project → Cloud Functions. Ensure your project is on the Blaze billing plan (required for outbound HTTP calls from Cloud Functions). Click + Add Function or use the Functions dashboard to deploy. Store your three credentials as environment variables: SHIFT4SHOP_SECURE_URL, SHIFT4SHOP_PRIVATE_KEY, SHIFT4SHOP_TOKEN, and SHIFT4SHOP_BASE_URL. Deploy the proxy function below. It accepts three query parameters from FlutterFlow: resource (e.g. Products, Orders, Customers), id (optional, for single-resource endpoints), and an optional action for write operations. The function constructs the full Shift4Shop API URL, adds all three required headers, and returns the response to FlutterFlow. After deploying, copy the Cloud Function trigger URL (something like https://us-central1-your-project.cloudfunctions.net/shift4shopProxy) and test it immediately: call it with ?resource=Products in your browser — if configured correctly, you should receive a JSON array of your store's products. This confirms all three Shift4Shop credentials are working before you touch FlutterFlow at all.

1const functions = require('firebase-functions');
2const axios = require('axios');
3
4const SECURE_URL  = process.env.SHIFT4SHOP_SECURE_URL;  // e.g. https://www.yourstore.com
5const PRIVATE_KEY = process.env.SHIFT4SHOP_PRIVATE_KEY;
6const TOKEN       = process.env.SHIFT4SHOP_TOKEN;
7const BASE_URL    = process.env.SHIFT4SHOP_BASE_URL      // e.g. https://api.shift4shop.com/v3
8                    || 'https://api.shift4shop.com/v3';
9
10exports.shift4shopProxy = functions.https.onRequest(async (req, res) => {
11  res.set('Access-Control-Allow-Origin', '*');
12  res.set('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE, OPTIONS');
13  res.set('Access-Control-Allow-Headers', 'Content-Type');
14  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
15
16  if (!PRIVATE_KEY || !TOKEN || !SECURE_URL) {
17    res.status(500).json({ error: 'Shift4Shop credentials not configured' });
18    return;
19  }
20
21  // e.g. resource=Products, id=123 (optional)
22  const resource = req.query.resource || 'Products';
23  const id = req.query.id ? `/${req.query.id}` : '';
24  const endpoint = `${BASE_URL}/${resource}${id}`;
25
26  // Forward query params except our own routing params
27  const forwardParams = { ...req.query };
28  delete forwardParams.resource;
29  delete forwardParams.id;
30
31  try {
32    const response = await axios({
33      method: req.method === 'GET' ? 'GET' : req.method,
34      url: endpoint,
35      headers: {
36        'SecureUrl':   SECURE_URL,
37        'PrivateKey':  PRIVATE_KEY,
38        'Token':       TOKEN,
39        'Content-Type': 'application/json',
40        'Accept': 'application/json',
41      },
42      params: forwardParams,
43      data: req.method !== 'GET' ? req.body : undefined,
44    });
45    res.status(200).json(response.data);
46  } catch (error) {
47    const status = error.response?.status || 500;
48    res.status(status).json({ error: error.message, detail: error.response?.data });
49  }
50});
51

Open your FlutterFlow project and click API Calls in the left nav → + Add → Create API Group. Name it Shift4Shop. In the Base URL field, paste your Cloud Function trigger URL: https://us-central1-your-project.cloudfunctions.net/shift4shopProxy. Leave the Authentication section empty — authentication is handled inside the Cloud Function, not in FlutterFlow. Inside the Shift4Shop API Group, click + Add API Call to add your first endpoint. Name it GetProducts, set Method to GET. Add a Query Parameter named resource with a default value of Products. Add additional optional query parameters: limit (default 20), offset (default 0), categoryid (optional, for filtering by category). These parameters are passed through the proxy to Shift4Shop's native pagination and filter parameters. Add a second API Call named GetOrders: same method GET, resource parameter defaulting to Orders. Add query parameters: limit (20), offset (0), and status (optional string, for filtering by order status like New, Processing, Shipped). Add a third API Call named GetCustomers: resource=Customers, limit=20, offset=0, searchby (String, optional for search-by-email or search-by-name functionality). For each API Call, open the Response & Test tab, fill in the resource parameter, and click Test API Call. If the proxy is working, you'll see JSON from your Shift4Shop store. Click Generate JSON Paths to detect the response structure. Shift4Shop wraps resources in arrays at the root level — products come as [{...}, {...}], not nested inside a wrapper object.

1{
2  "API Group": "Shift4Shop",
3  "Base URL": "https://us-central1-YOUR_PROJECT.cloudfunctions.net/shift4shopProxy",
4  "Authentication": "None (handled by Cloud Function)",
5  "API Calls": [
6    {
7      "Name": "GetProducts",
8      "Method": "GET",
9      "Query Parameters": [
10        { "name": "resource",    "default": "Products" },
11        { "name": "limit",       "default": "20" },
12        { "name": "offset",      "default": "0" },
13        { "name": "categoryid",  "type": "String" }
14      ]
15    },
16    {
17      "Name": "GetOrders",
18      "Method": "GET",
19      "Query Parameters": [
20        { "name": "resource", "default": "Orders" },
21        { "name": "limit",    "default": "20" },
22        { "name": "offset",   "default": "0" },
23        { "name": "status",   "type": "String" }
24      ]
25    },
26    {
27      "Name": "GetCustomers",
28      "Method": "GET",
29      "Query Parameters": [
30        { "name": "resource",  "default": "Customers" },
31        { "name": "limit",     "default": "20" },
32        { "name": "offset",    "default": "0" },
33        { "name": "searchby",  "type": "String" }
34      ]
35    }
36  ]
37}
38

With working API Calls confirmed, create FlutterFlow Data Types to represent the Shift4Shop response shapes. Go to Data Types in the left nav → + Add Data Type. Create a Shift4Product type with fields: catalogid (String), name (String), price (Double), stock (Integer), thumbnailUrl (String), categoryId (String). Create a Shift4Order type with fields: orderid (String), customeremail (String), ordertotal (Double), orderstatus (String), orderdate (String), firstname (String), lastname (String). Create a Shift4Customer type with fields: customerid (String), firstname (String), lastname (String), email (String), orders (Integer). Link these to your API Calls: open GetProducts → Response & Test, use the generated JSON Paths (Shift4Shop products come as an array — JSON Paths will look like $[0].catalogid, $[0].name, $[0].price, $[0].thumbnailurl). Do the same for GetOrders and GetCustomers. Build your first page — an Orders page: add a ListView, bind it via Backend Query to Shift4Shop → GetOrders. Inside the ListView, add a Card with Text widgets for orderid, customeremail, ordertotal (formatted as currency), and a Container for orderstatus with conditional background color (New = blue, Processing = orange, Shipped = green, Completed = grey). Build a Products page with a similar ListView bound to GetProducts, showing product name, price, and a stock count with a warning color when stock is zero. Build a Customers page with GetCustomers data, a search field bound to the searchby parameter, and a customer detail screen that deep-links to order history. Add a bottom navigation bar with tabs for Orders, Products, and Customers to complete the mobile admin app structure.

Read operations (GET) are sufficient for a basic store overview app, but a full store management tool also needs to update order statuses — marking orders as shipped, processing, or completed. Write operations require additional security care: not only must the PrivateKey stay in the Cloud Function proxy, but you also need to ensure that only authorized users (you and your team) can trigger write calls. First, add a write endpoint to your Cloud Function proxy. The current proxy already supports non-GET methods — update the Cloud Function to handle the PUT method for updating a specific resource by ID. Shift4Shop uses PUT /Orders/{orderId} with a JSON body containing the new status field to update an order. In FlutterFlow, add a new API Call in the Shift4Shop API Group: name it UpdateOrderStatus, set Method to PUT. Add two variables: resourceId (the order ID to update) and status (the new status string). Update the proxy call so the resource parameter is Orders and the id parameter carries the resourceId. Before wiring this action to a button, add your own app-level authentication. Enable Firebase Authentication in your FlutterFlow project (Settings & Integrations → Firebase → Firebase Authentication → Email/Password). Create a simple login screen with an email/password form. Gate the entire admin app behind a logged-in state check on every page — use the conditional widget visibility or an initial action flow on each page to redirect unauthenticated users to the login screen. Only after confirming the user is logged in (and ideally checking their Firebase custom claims or a Firestore role document to verify they're an admin) should the UpdateOrderStatus action be available. Connect the status update to a dropdown widget on the order detail screen and confirm the update through a Dialog confirmation before firing the PUT call.