Printful

Log in to your Printful account and click your account name or avatar in the top-right corner of the dashboard. From the dropdown, select Settings, then click the Stores tab. Find the store you want to connect to FlutterFlow in the list and click the API link or the Manage button next to it. Scroll to the API section and click Generate Token (the button label may vary slightly between Printful dashboard versions). Printful will display your new Bearer token — copy it immediately and store it in a secure location like a password manager. Tokens are store-scoped, meaning each token is tied to a specific store. If you run multiple stores and need to access them all from your app, you will either need to generate a token per store or use Printful's multi-store header (X-PF-Store-Id) with a single account-level token. Note your store ID from the dashboard URL or the store settings page — you will need it for the X-PF-Store-Id header. Printful tokens do not expire but can be revoked at any time from the same settings page; treat them like a password.

In your FlutterFlow project, click API Calls in the left navigation panel. Click + Add → Create API Group. Name the group Printful and set the Base URL to https://api.printful.com. Click the Headers tab and add the following headers. First, add Authorization with the value Bearer [your_token]. Because this is a secret key, do not paste the token as a literal string: click the variable icon next to the value field, create an App State variable named printfulToken (type String, initial value empty), and reference it here as FFAppState().printfulToken. You will set the token value at login or app start through a secure initialization action. Second, add Content-Type with the value application/json. If you are working with a multi-store account, add a third header X-PF-Store-Id and set its value to your numeric store ID (this can be a hardcoded string since it is not a secret). Click Save. The Printful API Group is now ready for individual endpoint calls.

1// Printful API Group configuration (reference)
2{
3  "group_name": "Printful",
4  "base_url": "https://api.printful.com",
5  "headers": [
6    {
7      "key": "Authorization",
8      "value": "Bearer [FFAppState().printfulToken]"
9    },
10    {
11      "key": "Content-Type",
12      "value": "application/json"
13    },
14    {
15      "key": "X-PF-Store-Id",
16      "value": "[your_store_id]"
17    }
18  ]
19}

With the Printful API Group selected, click + Add API Call. Name the first call GetOrders and set the Method to GET. In the URL Path field, enter /orders. Click the Variables tab and add two optional variables: offset (integer, default 0) and limit (integer, default 20). Update the URL Path to /orders?offset={{offset}}&limit={{limit}}. Click the Response & Test tab, then click Test. Printful wraps responses in a result object, so your raw JSON will look like { "code": 200, "result": [...] }. Click Generate JSON Paths and look for paths like $.result[*].id, $.result[*].status, $.result[*].recipient.name, and $.result[*].shipping. Name these orderId, orderStatus, recipientName, and shippingCarrier. Create a second API Call named GetOrderDetail with URL Path /orders/{{orderId}}, adding orderId as a required variable. Create a third call named GetStoreProducts at /store/products with offset and limit variables, mapping $.result[*].id, $.result[*].name, $.result[*].thumbnail_url, and $.result[*].synced. In your FlutterFlow canvas, add a ListView and configure its Backend Query to use GetOrders. Add a ListTile widget inside the ListView, bind the title to recipientName and the subtitle to orderStatus. Add a color-coded Container behind the status badge: map 'fulfilled' to green, 'in_process' to amber, and 'canceled' to red using a conditional expression in the widget's background color property.

1// Printful JSON path mapping for /orders
2// All paths start with $.result because Printful wraps responses
3
4$.result[*].id              → orderId
5$.result[*].status          → orderStatus
6$.result[*].recipient.name  → recipientName
7$.result[*].recipient.email → recipientEmail
8$.result[*].shipping        → shippingMethod
9$.result[*].created         → createdTimestamp
10$.result[*].shipments[0].tracking_url → trackingUrl
11
12// /store/products paths
13$.result[*].id              → storeProductId
14$.result[*].name            → productName
15$.result[*].thumbnail_url   → thumbnailUrl
16$.result[*].synced          → isSynced

Creating a Printful order (POST /orders) triggers real fulfillment and billing. This call must never come from the Flutter client because the Bearer token would be embedded in the compiled app, giving anyone with a decompiler the ability to create unlimited billable orders on your account. Deploy a Firebase Cloud Function named createPrintfulOrder. The function authenticates the caller using Firebase Auth (reject unauthenticated requests with an HttpsError), reads the Printful Bearer token from environment variables, and POSTs the order payload to https://api.printful.com/orders. It returns the Printful order response JSON to FlutterFlow. In FlutterFlow, create a separate API Group named PrintfulProxy that points at your Cloud Function's HTTPS trigger URL. Add a Firebase Auth ID token header so only logged-in app users can call it. In the Action Flow Editor on your checkout screen, wire the Place Order button to call the PrintfulProxy API Call with the order details serialized as JSON. If the response contains a result.id, navigate to a confirmation screen showing the new Printful order ID.

1// Firebase Cloud Function: createPrintfulOrder/index.js
2const functions = require('firebase-functions');
3const fetch = require('node-fetch');
4
5exports.createPrintfulOrder = functions.https.onCall(async (data, context) => {
6  if (!context.auth) {
7    throw new functions.https.HttpsError('unauthenticated', 'Login required');
8  }
9
10  const token = process.env.PRINTFUL_TOKEN;
11  const storeId = process.env.PRINTFUL_STORE_ID;
12
13  const response = await fetch('https://api.printful.com/orders', {
14    method: 'POST',
15    headers: {
16      'Authorization': `Bearer ${token}`,
17      'Content-Type': 'application/json',
18      'X-PF-Store-Id': storeId,
19    },
20    body: JSON.stringify(data.order), // order payload from FlutterFlow
21  });
22
23  if (!response.ok) {
24    const error = await response.json();
25    throw new functions.https.HttpsError('internal', error.result || 'Printful error');
26  }
27
28  return await response.json();
29});

The Printful mockup generator is one of the most useful features to surface in a FlutterFlow app. It is a two-step async process: first you submit a task, then you poll until it is complete. In your Printful API Group, create an API Call named SubmitMockupTask with Method POST and URL Path /mockup-generator/create-task/{{productId}}. Add productId as a required variable. The request body should contain a variant_ids array and a files array with your design image URL — see Printful's mockup generator docs for the exact body structure. Map the response path $.result.task_key to taskKey. Create a second API Call named PollMockupTask with Method GET and URL Path /mockup-generator/task?task_key={{taskKey}}, mapping $.result.status to taskStatus and $.result.mockups[0].mockup_url to mockupUrl. In your FlutterFlow Action Flow Editor, wire a Generate Mockup button to first call SubmitMockupTask and store the task_key in a page variable. Then add a Wait action (1–2 seconds) followed by a call to PollMockupTask. Use a Conditional Action to check if taskStatus equals 'completed': if yes, store mockupUrl in an App State variable and display the image; if no, loop back to the Wait + Poll sequence. Add a maximum iteration counter (e.g., 10 tries) to avoid an infinite loop if Printful is slow.

1// POST /mockup-generator/create-task/{productId} body example
2// Send this as the API Call body in FlutterFlow
3{
4  "variant_ids": [4012, 4013],
5  "files": [
6    {
7      "placement": "front",
8      "image_url": "https://yourcdn.com/design.png",
9      "position": {
10        "area_width": 1800,
11        "area_height": 2400,
12        "width": 1800,
13        "height": 1800,
14        "top": 300,
15        "left": 0
16      }
17    }
18  ],
19  "format": "jpg"
20}
21
22// Polling response when complete
23// $.result.status = "completed"
24// $.result.mockups[0].mockup_url = "https://mockup-generator.printful.com/..."