PrestaShop

Log in to your PrestaShop back office (yourdomain.com/admin). In the left navigation, go to Advanced Parameters → Webservice. At the top of the page, make sure the 'Enable PrestaShop Webservice' toggle is switched ON and that 'Enable CGI mode' is OFF unless your hosting requires it. Click Save to activate the API. Next, click the + Add new webservice key button at the top-right of the Webservice page. In the form that appears: in the Key field, click the Generate button — PrestaShop will create a long alphanumeric key for you. Give it a Description like 'FlutterFlow App'. Under Permissions, scroll through the resource list and check the boxes for the resources your app needs. For a read-only catalog app, enable GET on 'products', 'categories', and 'orders'. For an app that creates orders, also enable POST/PUT on 'orders'. Principle of least privilege applies — only grant what your app will actually call. Click Save. Note the generated key — you will not be able to view it again in full from the admin panel. Copy it to a secure location. Your Webservice is now active and accessible at https://yourdomain.com/api/.

PrestaShop's Webservice uses HTTP Basic Auth in a non-standard way. The username is your Webservice key and the password is empty. To construct the Authorization header, you base64-encode the string 'key:' where key is your actual Webservice key followed by a colon and nothing after it. For example, if your key is ABC123XYZ, you encode the string 'ABC123XYZ:' (with the colon, no password). The result is a base64 string like QUJDMTIYWE5aOg==. The Authorization header value is: Basic QUJDMTIYWE5aOg== You can obtain this base64 value using any online base64 encoder — just paste 'YOURKEY:' (with the colon) and copy the output. Keep this encoded string handy for the next step. IMPORTANT: Do not hardcode this value as a literal string in the FlutterFlow API Group header. Instead, store it in FlutterFlow's App State as a string constant (for a read-only public catalog key), or pass it as a variable. For write operations, this key should live only in your Firebase Cloud Function environment — never in client Dart code. If someone decompiles your app and finds a read-only key, they can at most read your catalog. A write-capable key would let them create or modify orders.

In FlutterFlow, click API Calls in the left navigation panel. Click + Add, then Create API Group. Name it 'PrestaShop'. Set the Base URL to https://yourdomain.com/api (replace with your actual store domain — no trailing slash). Under Headers, click + Add Header. Set the key to Authorization and the value to Basic [your-base64-string]. You can store the base64 value as a variable: click the Variable icon next to the value field, then create a new variable called prestashopAuthHeader. This keeps the header value out of the exported codebase. IMPORTANT: Under the Base URL field, add a Query Parameter: key output_format, value JSON. This parameter will be appended to every API Call in this group automatically. Alternatively, you can add ?output_format=JSON at the end of each individual endpoint path — but adding it once at the group level is cleaner and ensures you never forget it on a specific call. Now click + Add API Call within the PrestaShop group. Name it 'Get Products'. Set Method to GET and the endpoint path to /products. In the Response & Test tab, paste a sample JSON response from your store (you can get it by visiting https://yourdomain.com/api/products?output_format=JSON in a browser). Click Generate JSON Paths — FlutterFlow will create path mappings like $.products[*].id, $.products[*].name, $.products[*].price. Add a second API Call named 'Get Orders' with endpoint /orders, and repeat the JSON path generation with a sample orders response. Add a third call 'Get Order Detail' with endpoint /orders/[id] where [id] is a URL variable — in FlutterFlow, create a variable called orderId and reference it as /orders/{{orderId}}.

1{
2  "api_group": "PrestaShop",
3  "base_url": "https://yourdomain.com/api",
4  "headers": {
5    "Authorization": "Basic {{prestashopAuthHeader}}"
6  },
7  "query_params": {
8    "output_format": "JSON"
9  },
10  "api_calls": [
11    {
12      "name": "Get Products",
13      "method": "GET",
14      "endpoint": "/products",
15      "json_paths": [
16        "$.products[*].id",
17        "$.products[*].name[0].value",
18        "$.products[*].price",
19        "$.products[*].quantity"
20      ]
21    },
22    {
23      "name": "Get Orders",
24      "method": "GET",
25      "endpoint": "/orders",
26      "json_paths": [
27        "$.orders[*].id",
28        "$.orders[*].reference",
29        "$.orders[*].current_state",
30        "$.orders[*].total_paid"
31      ]
32    },
33    {
34      "name": "Get Order Detail",
35      "method": "GET",
36      "endpoint": "/orders/{{orderId}}",
37      "variables": [{ "name": "orderId", "type": "integer" }]
38    }
39  ]
40}

Now that your API Calls are defined and JSON Paths are generated, you can bind the data to UI widgets. Open the page in FlutterFlow where you want to show your PrestaShop product list. Add a ListView widget to the canvas. Select the ListView, open the Backend Query panel on the right, choose API Call as the data source, select PrestaShop → Get Products, and click Confirm. FlutterFlow will ask you which JSON Path array to use as the list — select $.products[*] or the root products array. Each item in the list view now has access to the fields you mapped: id, name, price, quantity. Add child widgets inside the ListView: a Text widget for the product name, bound to the name[0].value JSON path; a Text widget for the price; and an Image widget if your response includes image_link. For the price field, PrestaShop returns prices as strings formatted with tax — check your response to decide whether to display as-is or convert. For the Orders screen, repeat the same process: ListView → Backend Query → PrestaShop → Get Orders. Bind order reference, current_state (numeric ID representing the order status — you may want to map it to labels like 'Processing', 'Shipped' using a conditional in FlutterFlow), and total_paid to Text widgets. For pagination, add a variable page to your backend query and wire it to a 'Load More' Button action that increments the variable. In the API Call URL, add a query parameter limit with value '20,{{page}}' where the PrestaShop pagination format is limit=offset,count — 20,0 returns items 0-19, 20,20 returns items 20-39.

For any operation that modifies your store — creating an order, updating stock, changing product details — the Webservice key must not be embedded in the client app. Instead, you deploy a Firebase Cloud Function that holds the key in its environment configuration and accepts calls from your FlutterFlow app. In the Firebase console, go to your project → Functions → Get Started (if you haven't already, upgrade to the Blaze pay-as-you-go plan, which is required for outbound network calls from Cloud Functions). Use the Firebase console's Functions editor or deploy via the Firebase CLI from your local machine. The Cloud Function receives a request from FlutterFlow (which sends the customer's cart data as a JSON body), validates it, then calls the PrestaShop Webservice with the secret key stored as a Firebase environment variable — never passed from the client. The function returns the new order ID and confirmation back to FlutterFlow. In FlutterFlow, create a new API Group named 'PrestaShopProxy' with the base URL of your Cloud Function (e.g. https://us-central1-yourproject.cloudfunctions.net). Add an API Call named 'Create Order' with method POST. Wire it to an Action in the checkout flow: when the user taps 'Place Order', trigger this API Call with the cart data as request body. Map the returned order ID to App State for display on the confirmation screen. This pattern means only Firebase (a secure server environment) ever holds or uses the Webservice key. Your FlutterFlow client never sees it.

1// Firebase Cloud Function: createPrestaShopOrder
2// Deploy to Firebase Functions (Node.js 18+)
3const functions = require('firebase-functions');
4const fetch = require('node-fetch');
5
6// Store key in Firebase env: firebase functions:config:set prestashop.key="YOURKEY" prestashop.url="https://yourdomain.com"
7const PS_KEY = functions.config().prestashop.key;
8const PS_URL = functions.config().prestashop.url;
9
10const authHeader = 'Basic ' + Buffer.from(PS_KEY + ':').toString('base64');
11
12exports.createPrestaShopOrder = functions.https.onRequest(async (req, res) => {
13  // Optional: verify request is from your FlutterFlow app (e.g. check a shared secret header)
14  if (req.method !== 'POST') {
15    return res.status(405).send('Method Not Allowed');
16  }
17
18  const orderPayload = req.body; // JSON cart data from FlutterFlow
19
20  try {
21    const response = await fetch(
22      `${PS_URL}/api/orders?output_format=JSON`,
23      {
24        method: 'POST',
25        headers: {
26          'Authorization': authHeader,
27          'Content-Type': 'application/json',
28        },
29        body: JSON.stringify(orderPayload),
30      }
31    );
32
33    const data = await response.json();
34    res.status(response.status).json(data);
35  } catch (err) {
36    console.error('PrestaShop order creation failed:', err);
37    res.status(500).json({ error: 'Order creation failed' });
38  }
39});