Receipt Bank (now Dext)

Before doing anything in FlutterFlow, confirm that your Dext account tier includes API access. This is the step that trips most builders: Dext does not expose an API key to all paid accounts by default — it is gated at higher tiers and must be enabled per account. Log into your Dext account and look for an API or Developer section in account settings. If you do not see one, contact Dext support or your account manager directly and ask them to enable API access for your account. Provide your account email and the name of the integration you are building. Once API access is enabled, navigate to the API settings page (the exact path may vary — look under Account Settings → Integrations or Developer). Generate an API key and copy it immediately. Store it in your Firebase Functions environment config or Supabase Edge Function secrets under a name like `DEXT_API_KEY`. Do not paste it anywhere in FlutterFlow — not in App Values, not in a Custom Action, not in an API Call header. A Dext API key gives full access to all documents your account has captured, which includes sensitive financial data for every client whose receipts have been uploaded. Verify the base URL by checking the current Dext API documentation at `https://api.dext.com/v1` — confirm this endpoint is live for your account region before building the proxy.

The proxy has two jobs: (1) receive a receipt image from FlutterFlow, forward the multipart upload to Dext with the API key in the Authorization header, and return the document ID; (2) accept a document ID from FlutterFlow and return the current processing status and extracted fields. For a Firebase Cloud Function, create a function named `dextProxy` with two routes: `POST /upload` (receives the image bytes from FlutterFlow, constructs a multipart/form-data body, and POSTs to `https://api.dext.com/v1/documents`) and `GET /status?documentId={{id}}` (fetches `https://api.dext.com/v1/documents/{id}` and returns the status and extracted fields). The Authorization header for Dext follows the pattern: `Authorization: ApiKey YOUR_KEY_HERE` (verify the exact format in current Dext API documentation — it may be `Bearer` or a custom prefix). Read the key from `process.env.DEXT_API_KEY` at runtime. For Supabase, deploy a Deno Edge Function named `dext-proxy` using `supabase/functions/dext-proxy/index.ts`. Read the key with `Deno.env.get('DEXT_API_KEY')`. Handle both upload and status-check routes by inspecting the URL pathname. Deploy the function and note the URL. This URL becomes the base URL of your FlutterFlow API Group.

1// Firebase Cloud Function — dextProxy (index.js)
2const functions = require('firebase-functions');
3const fetch = require('node-fetch');
4const FormData = require('form-data');
5
6const DEXT_API_KEY = process.env.DEXT_API_KEY;
7const DEXT_BASE = 'https://api.dext.com/v1';
8
9exports.dextProxy = functions.https.onRequest(async (req, res) => {
10  res.set('Access-Control-Allow-Origin', '*');
11  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
12
13  // GET /status?documentId=xxx — poll document status
14  if (req.method === 'GET' && req.query.documentId) {
15    const r = await fetch(`${DEXT_BASE}/documents/${req.query.documentId}`, {
16      headers: { 'Authorization': `ApiKey ${DEXT_API_KEY}` }
17    });
18    return res.status(r.status).json(await r.json());
19  }
20
21  // POST /upload — receive image bytes and forward to Dext
22  if (req.method === 'POST') {
23    const form = new FormData();
24    form.append('file', Buffer.from(req.body.imageBase64, 'base64'), {
25      filename: 'receipt.jpg',
26      contentType: 'image/jpeg'
27    });
28    if (req.body.currency) form.append('currency', req.body.currency);
29
30    const r = await fetch(`${DEXT_BASE}/documents`, {
31      method: 'POST',
32      headers: { 'Authorization': `ApiKey ${DEXT_API_KEY}`, ...form.getHeaders() },
33      body: form
34    });
35    return res.status(r.status).json(await r.json());
36  }
37
38  res.status(405).json({ error: 'Method not allowed' });
39});

In FlutterFlow, build the capture screen. Add a Camera or Image Picker widget — click the widget on the canvas, open its Settings panel, and choose 'Camera' or 'Gallery' as the source. Set the maximum dimensions to 1920×1920 pixels to keep upload size reasonable without losing OCR accuracy. Add a 'Submit Receipt' button below the image widget. In the button's Action Flow Editor, add the following sequence: (1) an 'Update Page State' action to set a loading boolean to true, showing a progress indicator; (2) a 'Convert Image to Base64' action (available under Custom Actions if you need a Dart snippet, or use FlutterFlow's built-in media conversion in newer versions) to encode the selected image; (3) an API Call action targeting your proxy's upload endpoint — set the body to `{"imageBase64": "{{base64Image}}"}` using the encoded image; (4) capture the returned document ID into a Page State variable named `currentDocumentId`; (5) start a polling loop. Create a second API Group named 'Dext Proxy' with the base URL of your Firebase/Supabase function URL. Add two API Calls: 'Upload Receipt' (POST, body `{"imageBase64": "{{imageBase64}}", "currency": "{{currency}}"}`) and 'Get Document Status' (GET, endpoint `?documentId={{documentId}}`). In 'Response & Test' for 'Get Document Status', paste a sample Dext document response and generate JSON paths for `$.status`, `$.data.total_amount`, `$.data.date`, `$.data.supplier.name`, `$.data.category`.

1{
2  "api_group": "Dext Proxy",
3  "base_url": "https://us-central1-yourproject.cloudfunctions.net/dextProxy",
4  "calls": [
5    {
6      "name": "Upload Receipt",
7      "method": "POST",
8      "endpoint": "/",
9      "body": { "imageBase64": "{{imageBase64}}", "currency": "{{currency}}" },
10      "variables": [
11        { "name": "imageBase64", "type": "String" },
12        { "name": "currency", "type": "String", "test_value": "GBP" }
13      ],
14      "json_paths": {
15        "documentId": "$.id"
16      }
17    },
18    {
19      "name": "Get Document Status",
20      "method": "GET",
21      "endpoint": "/?documentId={{documentId}}",
22      "variables": [
23        { "name": "documentId", "type": "String" }
24      ],
25      "json_paths": {
26        "status": "$.status",
27        "amount": "$.data.total_amount",
28        "date": "$.data.date",
29        "supplier": "$.data.supplier.name",
30        "category": "$.data.category"
31      }
32    }
33  ]
34}

Because Dext's OCR is asynchronous, the app must keep checking the document status until it changes from 'processing' to 'ready' (verify the exact status values in Dext's API documentation — common values are 'pending', 'processing', 'processed', 'failed'). Implement a polling loop in FlutterFlow using a combination of a Timer and an Action Flow condition. In the Action Flow Editor on the capture screen, after capturing the document ID, add a 'Wait' action (set to 3000 ms), then call 'Get Document Status' with the stored document ID. Add a conditional branch: if `$.status == 'processed'` (or the equivalent 'ready' value), navigate to the Review Screen passing the extracted fields as page parameters. If the status is still 'processing', loop back to the Wait → poll cycle. Add a maximum retry counter (Page State integer) — after 20 attempts (60 seconds total), show an error Snackbar: 'Receipt is taking longer than expected — check Dext later'. On the Review Screen, create text fields pre-populated with the passed parameters: Vendor Name, Total Amount, Date, and Category. The user can edit any field before tapping 'Confirm' to save the expense record to your Firestore or Supabase database. If your Dext plan and the proxy support webhooks (Dext can POST to a URL when processing completes), use the webhook approach instead: Dext calls your Firebase/Supabase function, which updates a Firestore document, and the FlutterFlow app listens on a real-time stream from Firestore. This eliminates the polling loop entirely. If you'd prefer RapidDev to set up the webhook pattern or the full proxy architecture, the team builds FlutterFlow integrations like this every week — free scoping call at rapidevelopers.com/contact.

Beyond single-document capture, a useful feature is a document list screen showing all submissions with their processing status. Add a third API Call to your Dext Proxy API Group named 'List Documents' — a GET to your proxy endpoint with an optional status filter (e.g. `?status=processed&limit=20`). The proxy calls `https://api.dext.com/v1/documents?status=processed&limit=20` with the API key. In FlutterFlow, add a new screen named 'Documents'. Set the 'List Documents' API Call as the Backend Query for the page, which automatically fetches on load. Add a ListView widget bound to the returned document array. Each list item shows the supplier name, amount, date, and a status badge (a Container with conditional background color: green for 'processed', yellow for 'processing', red for 'failed'). Tap on a list item to navigate to the Review Screen for that document. Pass the document ID as a parameter and call 'Get Document Status' on load to fetch the full extracted fields. Add a pull-to-refresh gesture to the ListView to let users manually refresh the list. Cache the list in Page State to avoid redundant API calls on every tab switch.