How to Integrate Lovable with Dext (formerly Receipt Bank)

Dext's API access works differently from most SaaS tools — it's part of their Partner Program rather than a self-serve developer portal. To get API credentials, go to dext.com and contact their sales or partner team requesting API access. Describe your use case (building an internal tool, a client portal, etc.) and they will provision an API key for your account. For testing purposes, Dext provides a sandbox environment where you can upload test receipts and see the OCR extraction in action without processing real documents. The sandbox API base URL is typically https://api.dext.com/v1 with a test API key they provide during onboarding. Dext's API authenticates using an API key in the Authorization header as a Bearer token. Some partner integrations use OAuth2 — ask your Dext contact which authentication method your account is provisioned with. This tutorial assumes Bearer token authentication with a single API key. While waiting for API credentials, explore Dext's documentation at developers.dext.com to understand the document lifecycle: upload → processing → processed (with extracted fields) or error. Familiarize yourself with the document object structure, which includes supplier name, date, total amount, tax amount, currency, category, and the raw OCR confidence scores for each field.

Open your Lovable project and click the '+' icon in the top-right editor area to access the panels. Select 'Cloud' and expand the 'Secrets' section. Add your Dext credentials as encrypted environment variables accessible only from Edge Functions. Add DEXT_API_KEY with your API key value. Add DEXT_API_BASE with the base URL: use 'https://api.dext.com/v1' for production or the sandbox URL provided by Dext for testing. If your integration uses a specific Dext organization ID or company ID, add DEXT_COMPANY_ID as well — some API endpoints are scoped to a company. Dext's API key grants access to your entire Dext account including all documents, clients, and accounting integrations. Protecting it with Cloud Secrets is critical. The key must never appear in frontend code — a user with access to your app's network requests would be able to view and download all documents ever processed in your Dext account. Lovable's security infrastructure blocks approximately 1,200 hardcoded API keys per day; use it as designed by always storing credentials in Cloud Secrets.

Create a Supabase Edge Function to handle receipt uploads. The challenge with document upload APIs is that the frontend needs to send a file (binary image data) through your Edge Function to Dext. The flow is: the user selects a file in the browser → the browser sends the file to your Edge Function as a multipart form POST → the Edge Function forwards the file to Dext's upload endpoint with your API key. Dext's document upload endpoint is a POST to /api/v1/documents (or similar — check your partner documentation for the exact path). The request body should be multipart/form-data with the file attached, plus any metadata fields like document type and source. Dext returns a document object with an ID and status 'processing'. Store the document ID in a Supabase uploads table immediately after upload. Include: document_id, user_id, original_filename, upload_status ('processing'), uploaded_at. This lets you track all uploads and poll for their completion status. For the polling logic, create a second action in the Edge Function (or a separate function) that accepts a document_id and calls GET /api/v1/documents/{id} to check the current status and retrieve extracted fields when processing is complete. Return the full document object including confidence scores so your UI can flag low-confidence extractions for user review.

1// supabase/functions/dext-receipts/index.ts
2import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
3import { createClient } from "https://esm.sh/@supabase/supabase-js@2";
4
5const DEXT_KEY = Deno.env.get("DEXT_API_KEY") ?? "";
6const DEXT_BASE = Deno.env.get("DEXT_API_BASE") ?? "https://api.dext.com/v1";
7const corsHeaders = {
8  "Access-Control-Allow-Origin": "*",
9  "Access-Control-Allow-Methods": "POST, OPTIONS",
10  "Access-Control-Allow-Headers": "Content-Type, Authorization",
11};
12
13serve(async (req) => {
14  if (req.method === "OPTIONS") return new Response(null, { headers: corsHeaders });
15  const supabase = createClient(Deno.env.get("SUPABASE_URL") ?? "", Deno.env.get("SUPABASE_SERVICE_ROLE_KEY") ?? "");
16
17  try {
18    const body = await req.json();
19    const { action } = body;
20
21    if (action === "upload") {
22      const { file_base64, filename, user_id } = body;
23      const fileBytes = Uint8Array.from(atob(file_base64), c => c.charCodeAt(0));
24      const formData = new FormData();
25      formData.append("document", new Blob([fileBytes]), filename);
26
27      const res = await fetch(`${DEXT_BASE}/documents`, {
28        method: "POST",
29        headers: { "Authorization": `Bearer ${DEXT_KEY}` },
30        body: formData,
31      });
32      const data = await res.json();
33      if (!res.ok) throw new Error(data.message ?? "Upload failed");
34
35      await supabase.from("uploads").insert({
36        document_id: data.id,
37        user_id,
38        filename,
39        status: "processing",
40        created_at: new Date().toISOString(),
41      });
42
43      return new Response(JSON.stringify({ document_id: data.id }), {
44        headers: { ...corsHeaders, "Content-Type": "application/json" },
45      });
46    }
47
48    if (action === "status") {
49      const { document_id } = body;
50      const res = await fetch(`${DEXT_BASE}/documents/${document_id}`, {
51        headers: { "Authorization": `Bearer ${DEXT_KEY}` },
52      });
53      const data = await res.json();
54      if (!res.ok) throw new Error(data.message ?? "Status fetch failed");
55
56      const result = {
57        status: data.status,
58        supplier_name: data.supplier?.name ?? "",
59        date: data.date ?? "",
60        total_amount: data.total ?? null,
61        tax_amount: data.tax ?? null,
62        currency: data.currency ?? "GBP",
63        category: data.category?.name ?? "",
64      };
65
66      if (data.status === "processed") {
67        await supabase.from("uploads").update({ status: "processed" }).eq("document_id", document_id);
68      }
69
70      return new Response(JSON.stringify(result), { headers: { ...corsHeaders, "Content-Type": "application/json" } });
71    }
72
73    return new Response(JSON.stringify({ error: "Unknown action" }), { status: 400, headers: corsHeaders });
74  } catch (err) {
75    return new Response(JSON.stringify({ error: err.message }), { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } });
76  }
77});

Build the frontend receipt capture workflow. The key UX pattern is: the user uploads a file → sees 'Processing receipt...' with a spinner → the app polls the Edge Function every 5 seconds → when processing is complete, the form auto-fills with extracted data → the user reviews, edits if needed, and saves. Create a file input component that accepts image files (JPEG, PNG, HEIC for mobile photos) and PDF files. When a file is selected, display a preview of the image or a PDF icon. Show a file size limit warning if the file exceeds Dext's limit (typically 25MB). For the polling mechanism, use React's useEffect with a setInterval that calls the Edge Function's status action every 5 seconds. When the response shows status='processed', clear the interval and populate the form fields. Use a ref to track the interval ID to prevent memory leaks. For the expense form, display fields for: vendor name (from supplier_name), date (from date), total amount (from total_amount), tax amount (from tax_amount), currency (from currency), and category (from category). Mark fields with low confidence scores with a yellow warning indicator so users know which values to double-check. When the user clicks Submit, save the expense to the Supabase expenses table with all fields plus the document_id reference for audit trail purposes.