Receipt Bank (now Dext)

Before configuring anything in Bubble, verify that your Dext account has API access. This step saves significant frustration — a 403 response from a correctly configured API call almost always means API access is not enabled on your account tier, not that your configuration is wrong. Log into your Dext account at app.dext.com. Navigate to Settings (usually your account icon → Settings or via the main menu). Look for an 'Integrations', 'Developer', or 'API' section. If you see an API key option, copy your key. If you do not see this section, contact Dext support (support@dext.com) and ask them to enable API access on your account — mention that you are building a third-party integration and need developer API access. Once you have your API key, go to Bubble. Click the Plugins tab → Add plugins → search 'API Connector' (by Bubble) → Install. Click 'Add another API' and name it 'Dext'. Set the base URL to: https://api.dext.com/v1 Add a shared header: - Key: Authorization - Value: ApiKey [api_key] — note the format is 'ApiKey {key}', NOT 'Bearer {key}' - Enable the 'Private' checkbox — your API key stays on Bubble's servers and never reaches the browser IMPORTANT: The exact Authorization header format for Dext may be 'ApiKey {key}' or 'Bearer {key}' — this is a known gotcha. Check the current Dext API documentation at developers.dext.com before finalizing the format. Using the wrong prefix returns 401 even with a valid key. If you get 401 on your Initialize Call and the key is correct, try switching between 'ApiKey' and 'Bearer' prefixes. Save the API configuration. You are now ready to add specific API calls.

1{
2  "base_url": "https://api.dext.com/v1",
3  "shared_headers": [
4    {
5      "key": "Authorization",
6      "value": "ApiKey <your-dext-api-key>",
7      "private": true,
8      "note": "Verify exact prefix format (ApiKey vs Bearer) in current Dext API docs"
9    }
10  ]
11}

The upload call sends a receipt image file to Dext and receives a document_id in return. The image must be sent as multipart/form-data — a standard file upload format that Bubble's API Connector supports. In your Dext API group, click 'Add a call'. Name it 'Upload Document'. - Method: POST - Path: /documents - Body type: Form-data (multipart) Add a form field: - Key: file - Type: File - Value: [document_file] — make this a parameter Add additional form fields that Dext may accept (verify in current documentation): - Key: original_filename - Value: [filename] — helps Dext identify the document type Set 'Use as' to Action (not Data) — you are submitting data, not reading it. Click 'Initialize call'. For the file parameter, you will need a real image file URL to initialize. Use a publicly accessible receipt image URL for testing (e.g., a JPEG URL from an image hosting service). Supply a filename like 'test-receipt.jpg'. A successful response returns a JSON object with a 'documents' array containing at least one object with an 'id' field — this is your document_id. Note the exact JSON path Bubble detects for the ID field. In Bubble, when a user uploads a file (using a File Uploader element), Bubble stores it as a URL in its file storage. You can pass this URL to the API call's file parameter — Bubble's API Connector can fetch and forward file URLs as multipart content. Build a simple 'Upload Receipt' button workflow: 1. Step 1: API call → Dext > Upload Document, with 'document_file' = File Uploader's value (the uploaded file URL) 2. Step 2: Make changes to a thing — create a new 'DextDocument' record in your database with: document_id = API response's id field, status = 'processing', uploaded_by = Current User, uploaded_at = Current date/time 3. Step 3: Schedule API Workflow → 'Poll Document Status' workflow (next step) to run in 5 seconds, passing the document_id Note: Dext may return the document ID in slightly different response paths across API versions. After Initialize Call succeeds, expand the response tree in Bubble's API Connector to confirm the exact field path.

1POST /documents
2Headers:
3  Authorization: ApiKey <private-api-key>
4  Content-Type: multipart/form-data
5
6Form fields:
7  file: <receipt-image-file>
8  original_filename: 'receipt-jan-2026.jpg'
9
10// Successful response:
11{
12  "documents": [
13    {
14      "id": "doc-uuid-12345",
15      "status": "processing",
16      "created_at": "2026-01-09T14:30:00Z",
17      "original_filename": "receipt-jan-2026.jpg"
18    }
19  ]
20}

This is the core of the Dext integration — the polling loop that waits for OCR processing to complete. Dext's OCR takes 10–90 seconds depending on document complexity and queue volume. You cannot simply wait in a standard Bubble workflow because there is no 'wait' action in regular workflows (only in Backend Workflows). First, enable Backend Workflows: go to Settings → API → check 'This app exposes a Workflow API'. The Backend Workflows section now appears in your editor. Add the 'Poll Status' API call to your Dext API Connector: - Method: GET - Path: /documents/[document_id] — make document_id a text parameter - No body - Set 'Use as Data' The response includes a status field ('processing', 'processed', 'failed') and, when processed, the extracted data fields. Initialize this call by providing a real document_id from a previous upload test. You need an active document that has finished processing to capture the 'processed' response shape. Now build the Backend Workflow 'Dext_PollDocumentStatus': - Input parameters: document_id (Text), attempt_count (Number, default 0) Workflow steps: 1. Call API → Dext > Poll Status, with document_id = input document_id 2. Only when response status = 'processed': Make changes to DextDocument (where document_id = input) — set status = 'processed', vendor = response's supplier name field, amount = response's total_amount field, document_date = response's date field, category = response's category field 3. Only when response status = 'processing' AND attempt_count < 15: Schedule API Workflow → 'Dext_PollDocumentStatus', run in 5 seconds, pass document_id = same document_id, attempt_count = input attempt_count + 1 4. Only when attempt_count >= 15: Make changes to DextDocument — set status = 'timeout', show error to user via a Bubble page state or notification system The recursive call in Step 3 (scheduling itself with attempt_count + 1) creates the polling loop. Each iteration waits 5 seconds before checking again, for a maximum of 15 attempts (75 seconds total timeout). Note: Bubble's 'Schedule API workflow' action inside a Backend Workflow adds the scheduled call to a queue. The scheduling step itself completes instantly — the 5-second delay happens before the NEXT execution. The current workflow ends immediately after scheduling the next call, which is correct behavior.

1// Backend Workflow: Dext_PollDocumentStatus
2// Input parameters: document_id (Text), attempt_count (Number)
3
4// Step 1: Call API Dext > Poll Status
5GET /documents/[document_id]
6Headers:
7  Authorization: ApiKey <private-api-key>
8
9// Successful 'processed' response:
10{
11  "document": {
12    "id": "doc-uuid-12345",
13    "status": "processed",
14    "supplier": { "name": "Whole Foods Market" },
15    "total_amount": 67.43,
16    "date": "2026-01-07",
17    "currency": "GBP",
18    "category": { "name": "Groceries" },
19    "tax_amount": 6.13
20  }
21}
22
23// Step 2 (Only when status = 'processed'):
24// Make changes to DextDocument:
25//   status = 'processed'
26//   vendor_name = Step 1 result's document supplier name
27//   total_amount = Step 1 result's document total_amount
28//   document_date = Step 1 result's document date
29//   category = Step 1 result's document category name
30
31// Step 3 (Only when status = 'processing' AND attempt_count < 15):
32// Schedule API Workflow: Dext_PollDocumentStatus
33//   document_id = workflow input document_id
34//   attempt_count = workflow input attempt_count + 1
35//   run at: Current date/time + 5 seconds
36
37// Step 4 (Only when attempt_count >= 15):
38// Make changes to DextDocument: status = 'timeout'

Once the polling workflow has stored the extracted data in your Bubble database, you need to show it to the user for review. Build a 'Pending Documents' Repeating Group and a document detail view that shows the extracted fields for approval or correction. Create a 'Pending Expenses' page or section in your Bubble app. Add a Repeating Group with: - Data source: Search for DextDocuments where uploaded_by = Current User, sorted by uploaded_at (newest first) - Type of content: DextDocument Inside the Repeating Group, show: - A thumbnail of the original receipt (store the file URL in your DextDocument record) - Document status (show a spinner or 'Processing...' badge while status = 'processing') - Vendor name (from OCR extraction) - Amount and currency - Date - Category (as a dropdown for correction if needed) For the spinner while processing: add a Conditional to show/hide elements based on the DextDocument's status field. Show a loading indicator when status = 'processing', show the extracted data when status = 'processed', show an error message when status = 'timeout' or 'failed'. For auto-refresh while processing: add a page data workflow that triggers every 3 seconds (using Bubble's 'Do every X seconds' trigger) and refreshes the Repeating Group's data source. Only show this trigger when at least one DextDocument for the current user has status = 'processing'. This way, users see the data appear automatically when OCR completes without needing to reload the page. For correction: wrap the extracted fields in editable inputs (Text inputs, Dropdowns) so users can fix OCR errors before approval. A 'Submit Expense' button saves the user-confirmed values to a final Expense record. For multi-client accounting firms: add a 'Client' selector at the top of the page. Store a Dext API key per Client in your Clients data type. When an accountant selects a client, the upload and polling workflows use that client's API key — not a single shared key. Store keys as Private fields in the Clients data type with appropriate Privacy Rules.

1// DextDocument data type fields:
2// - document_id (Text)
3// - status (Text: 'processing' | 'processed' | 'timeout' | 'failed')
4// - vendor_name (Text, from OCR)
5// - total_amount (Number, from OCR)
6// - amount_currency (Text)
7// - document_date (Date, from OCR)
8// - category (Text, from OCR)
9// - tax_amount (Number, from OCR)
10// - original_file_url (Text)
11// - uploaded_by (User)
12// - uploaded_at (Date)
13// - user_approved (Yes/No, default no)
14// - user_notes (Text)
15
16// Repeating Group data source:
17// Search for DextDocuments:
18//   Constraint: uploaded_by = Current User
19//   Sort by: uploaded_at (descending)
20
21// Conditional: show 'Processing...' spinner
22// When: current cell's DextDocument's status = 'processing'
23// Show: loading-spinner-group
24// Hide: extracted-data-group
25
26// Auto-refresh: Do every 3 seconds
27// Only when: Search for DextDocuments (status='processing', uploaded_by=Current User):count > 0
28// Action: Refresh Group: repeating-group-documents

Before going live, apply Bubble Privacy Rules to restrict access to expense documents, and run a complete end-to-end test of the upload → poll → display flow. Privacy Rules for DextDocument: Go to Data tab → Privacy → click 'DextDocument' (your receipt data type). Add a rule: 'This DextDocument's uploaded_by = Current User' → check View (all fields) for logged-in users. This ensures accountants can only see their own documents, and employees can only see their own submitted receipts. For multi-client firms: also add rules that allow accountants from a specific firm to see documents uploaded by any client under their firm. This requires a 'Firm' relationship field on both the User and DextDocument types — the Privacy Rule becomes 'This DextDocument's uploaded_by's firm = Current User's firm'. API key security: your Dext API key is stored as a Private header in the API Connector and never reaches the browser. However, if you store per-client API keys in the database, mark those fields as Private in Privacy Rules — no role should be able to view them through Bubble's Data API or the editor debug panel. End-to-end test: 1. Log into your Bubble app as a test user 2. Navigate to your expense submission page 3. Use the File Uploader to select a clear receipt image (JPEG, good lighting, text legible) 4. Click 'Upload Receipt' 5. Watch the Repeating Group for the new 'processing' document to appear 6. Wait for the auto-refresh to switch the status to 'processed' 7. Verify the extracted vendor, amount, date, and category are correct 8. Test with a second receipt to confirm the polling loop handles multiple concurrent uploads For Workload Unit (WU) awareness: each upload consumes WU for the API call, and each polling iteration consumes WU for the Backend Workflow run and the GET /documents API call. A single receipt with 10 polling attempts = approximately 11 WU operations. If you have 100 users uploading 5 receipts each per day = 5,500 WU operations daily from the Dext integration alone. Factor this into your Bubble plan's WU budget. RapidDev's team has helped accounting firms build automated receipt processing workflows in Bubble with Dext — if you need help with the polling architecture or the multi-client key management pattern, book a free scoping call at rapidevelopers.com/contact.

1// Privacy Rules for DextDocument type:
2// Rule 1: 'This DextDocument's uploaded_by is Current User'
3//   → View: all fields checked
4//   → Purpose: employees/users see only their own receipts
5
6// Rule 2 (for accounting firms, optional):
7// 'This DextDocument's uploaded_by's firm is Current User's firm
8//  AND Current User's role is Accountant'
9//   → View: all fields checked
10//   → Purpose: accountants see all documents from clients in their firm
11
12// WU budget estimate per 100 active users:
13// - 5 uploads/user/day × 100 users = 500 upload API calls/day
14// - 500 uploads × avg 8 polling attempts = 4,000 polling calls/day
15// - Total: ~4,500 WU operations/day from Dext integration
16// Monitor in Bubble Logs → Workflow logs tab
17
18// End-to-end verification checklist:
19// [ ] Upload a receipt → document_id appears in database
20// [ ] Status starts as 'processing'
21// [ ] Status updates to 'processed' within 90 seconds
22// [ ] vendor_name, total_amount, document_date, category populated
23// [ ] Privacy Rules: user B cannot see user A's documents
24// [ ] Timeout path tested (at 15 attempts): status = 'timeout'