How to Integrate Lovable with QuickBooks Online

Go to developer.intuit.com and sign in or create an Intuit Developer account. In the dashboard, click 'Create an app'. Select 'QuickBooks Online and Payments' as the platform. Give your app a name (e.g., 'My Lovable Dashboard') and click 'Create app'. In the app settings, navigate to the 'Keys & OAuth' section. You'll see your Client ID and Client Secret for both Sandbox and Production environments. Copy the Sandbox Client ID and Client Secret for development. Critically, you also need to configure your Redirect URI — this is the URL QuickBooks sends the authorization code to after the user approves access. For the OAuth2 callback, you'll create an Edge Function endpoint. Enter your Edge Function URL: https://[your-project].supabase.co/functions/v1/quickbooks-oauth (you'll create this function shortly). You can also add http://localhost:3000/auth/quickbooks/callback for local development if needed. In the 'Scopes' section, select the data your app needs. For accounting access (invoices, customers, payments), select 'com.intuit.quickbooks.accounting'. For payment processing, add 'com.intuit.quickbooks.payment'. Click 'Save' after configuring scopes.

Open your Lovable project, click '+' → Cloud → Secrets, and add: QUICKBOOKS_CLIENT_ID (your Sandbox Client ID), QUICKBOOKS_CLIENT_SECRET (your Sandbox Client Secret), QUICKBOOKS_ENVIRONMENT with value 'sandbox'. The base URLs are https://sandbox-quickbooks.api.intuit.com for Sandbox and https://quickbooks.api.intuit.com for Production. QuickBooks OAuth2 is a standard three-leg flow: (1) build an authorization URL and redirect the user to it, (2) QuickBooks redirects back to your redirect URI with an authorization code, (3) exchange the code for access token and refresh token. For a single-user integration (your own QuickBooks account connected to your app), you complete this flow once and store the resulting refresh token. To get your initial refresh token: build the authorization URL manually using your Client ID, scopes, and redirect URI, then open it in your browser. It will look like: https://appcenter.intuit.com/connect/oauth2?client_id=YOUR_CLIENT_ID&response_type=code&scope=com.intuit.quickbooks.accounting&redirect_uri=YOUR_REDIRECT_URI&state=randomstate. After approving, QuickBooks redirects to your redirect URI with a code parameter. For the Sandbox flow, you can use Intuit's OAuth 2.0 Playground at developer.intuit.com/app/developer/playground to get a Sandbox refresh token without building the full redirect handler. Use the playground to exchange the authorization code for tokens, then save the refresh_token value as QUICKBOOKS_REFRESH_TOKEN in Cloud Secrets, and the realm_id (company ID) as QUICKBOOKS_REALM_ID.

QuickBooks access tokens expire after 1 hour. Every Edge Function that calls the QuickBooks API must first get a fresh access token by calling Intuit's token endpoint with your refresh token. This pattern — refresh then call — runs inside each Edge Function invocation, ensuring you always have a valid token. Create a single Edge Function that handles multiple QuickBooks API operations. It reads the refresh token from Deno.env (Cloud Secrets), calls the Intuit token endpoint to get a fresh access token, then proxies the requested operation. The function should support common actions: fetching customers, fetching invoices (with optional filters), creating invoices, and fetching payment records. The QuickBooks REST API uses a specific URL pattern: https://sandbox-quickbooks.api.intuit.com/v3/company/{realmId}/{entity} where realmId is your company ID and entity is 'invoice', 'customer', 'payment', etc. The API uses both REST-style endpoints and a SQL-like query language called the QuickBooks Query Language (QBQL) for filtering: SELECT * FROM Invoice WHERE Balance > 0. For RapidDev clients building multi-tenant QuickBooks integrations (where each of your customers connects their own QuickBooks company), the token management architecture is more complex — each user's refresh token needs to be stored encrypted in Supabase and retrieved per-user in the Edge Function. RapidDev's team can help architect this pattern.

1// supabase/functions/quickbooks/index.ts
2import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
3
4const IS_SANDBOX = Deno.env.get("QUICKBOOKS_ENVIRONMENT") !== "production";
5const QB_BASE = IS_SANDBOX
6  ? "https://sandbox-quickbooks.api.intuit.com"
7  : "https://quickbooks.api.intuit.com";
8const TOKEN_URL = "https://oauth.platform.intuit.com/oauth2/v1/tokens/bearer";
9const corsHeaders = { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "POST, OPTIONS", "Access-Control-Allow-Headers": "Content-Type, Authorization" };
10
11async function getAccessToken(): Promise<string> {
12  const clientId = Deno.env.get("QUICKBOOKS_CLIENT_ID") ?? "";
13  const clientSecret = Deno.env.get("QUICKBOOKS_CLIENT_SECRET") ?? "";
14  const refreshToken = Deno.env.get("QUICKBOOKS_REFRESH_TOKEN") ?? "";
15  const credentials = btoa(`${clientId}:${clientSecret}`);
16  const res = await fetch(TOKEN_URL, {
17    method: "POST",
18    headers: {
19      Authorization: `Basic ${credentials}`,
20      "Content-Type": "application/x-www-form-urlencoded",
21      Accept: "application/json",
22    },
23    body: `grant_type=refresh_token&refresh_token=${encodeURIComponent(refreshToken)}`,
24  });
25  const data = await res.json();
26  if (!data.access_token) throw new Error(data.error_description ?? "Token refresh failed");
27  return data.access_token;
28}
29
30serve(async (req) => {
31  if (req.method === "OPTIONS") return new Response(null, { headers: corsHeaders });
32  try {
33    const { action, query, invoice } = await req.json();
34    const token = await getAccessToken();
35    const realmId = Deno.env.get("QUICKBOOKS_REALM_ID") ?? "";
36    const headers = { Authorization: `Bearer ${token}`, Accept: "application/json", "Content-Type": "application/json" };
37
38    if (action === "get-invoices") {
39      const sql = encodeURIComponent(query ?? "SELECT * FROM Invoice WHERE Balance > 0 MAXRESULTS 100");
40      const res = await fetch(`${QB_BASE}/v3/company/${realmId}/query?query=${sql}&minorversion=65`, { headers });
41      const data = await res.json();
42      return new Response(JSON.stringify({ invoices: data.QueryResponse?.Invoice ?? [] }), { headers: { ...corsHeaders, "Content-Type": "application/json" } });
43    }
44
45    if (action === "get-customers") {
46      const sql = encodeURIComponent("SELECT * FROM Customer WHERE Active = true MAXRESULTS 200");
47      const res = await fetch(`${QB_BASE}/v3/company/${realmId}/query?query=${sql}&minorversion=65`, { headers });
48      const data = await res.json();
49      return new Response(JSON.stringify({ customers: data.QueryResponse?.Customer ?? [] }), { headers: { ...corsHeaders, "Content-Type": "application/json" } });
50    }
51
52    if (action === "create-invoice" && invoice) {
53      const res = await fetch(`${QB_BASE}/v3/company/${realmId}/invoice?minorversion=65`, {
54        method: "POST",
55        headers,
56        body: JSON.stringify(invoice),
57      });
58      const data = await res.json();
59      return new Response(JSON.stringify({ invoice: data.Invoice }), { headers: { ...corsHeaders, "Content-Type": "application/json" } });
60    }
61
62    return new Response(JSON.stringify({ error: "Unknown action" }), { status: 400, headers: corsHeaders });
63  } catch (err) {
64    return new Response(JSON.stringify({ error: err.message }), { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } });
65  }
66});

With the Edge Function in place, build the frontend invoice management view. Ask Lovable to create a dashboard page that fetches and displays open invoices, shows customer names, amounts due, and due dates, and provides action buttons for common operations. The invoice data from QuickBooks is rich — each invoice record includes the customer reference (CustomerRef), line items (Line array), balance due, total amount, due date, invoice number (DocNumber), and a link to the customer-facing invoice PDF (InvoiceLink). Display the most relevant fields in a table and add a Detail panel or modal for individual invoice information. For the invoice creation form, you'll need to look up customers from QuickBooks to populate a dropdown — call the get-customers action to populate the selector, then construct the invoice payload with the correct QuickBooks object structure. A minimal QuickBooks invoice object requires: CustomerRef (the customer's QuickBooks ID), Line array with at least one line item (each line needs Amount, DetailType='SalesItemLineDetail', and a SalesItemLineDetail with ItemRef and UnitPrice), and optionally DueDate. Refresh the invoice list after successful creation to show the new invoice immediately without a page reload.

QuickBooks access tokens expire after 60 minutes and refresh tokens expire after 100 days. For a personal integration where you're the only QuickBooks user, the refresh token stored in Cloud Secrets handles access token renewal automatically on each Edge Function call. However, the refresh token itself eventually expires — at 100 days, your app will lose access until you re-authorize. For production resilience, store the refresh token in Supabase with a last_refreshed timestamp, and update it whenever the token endpoint returns a new refresh_token (Intuit sometimes rotates it). Check the expiry date before it lapses and send yourself an email reminder to re-authorize. For multi-user integrations where each customer connects their own QuickBooks account (OAuth2 multi-tenant pattern), you need a full OAuth2 redirect flow: a 'Connect QuickBooks' button that redirects to Intuit's authorization URL, a redirect handler Edge Function that receives the code and exchanges it for tokens, and secure per-user token storage in Supabase. This architecture ensures each user's tokens are separate and can be revoked independently.