How to Integrate Lovable with BigCommerce

Log in to your BigCommerce admin panel. In the left sidebar, click 'Advanced Settings,' then click 'API Accounts.' Click the 'Create API Account' button and choose 'Store-level API account' (this is appropriate for building your own storefront — Channel-level accounts are for multi-storefront configurations). Give the account a name like 'Lovable Storefront.' In the OAuth Scopes section, enable the scopes your integration needs: set 'Products' to Read-only (or Modify if you need to update inventory), 'Carts' to Modify, 'Checkouts' to Modify, 'Orders' to Read-only (or Modify for an admin dashboard), and 'Customers' to Read-only. Click 'Save.' BigCommerce generates a Client ID, Client Secret, and Access Token — download the credentials file immediately, as the Access Token is shown only once. You will also see your Store Hash, a short alphanumeric string that identifies your store in API URLs (for example, if your admin URL is store-abc123.mybigcommerce.com, your store hash is 'abc123'). Keep the credentials file secure — the Access Token provides full API access within the scopes you selected.

In Lovable, open the Cloud tab by clicking the '+' icon next to the Preview panel. Navigate to the Secrets section. Click 'Add Secret' and create two secrets. First, add BIGCOMMERCE_ACCESS_TOKEN and paste the Access Token from your BigCommerce credentials file. Second, add BIGCOMMERCE_STORE_HASH and paste your store hash (the short string from your store URL, not the full URL). These two values are all your Edge Function needs to make authenticated BigCommerce API calls. The base URL pattern for BigCommerce's REST API is https://api.bigcommerce.com/stores/{storeHash}/v3/... — your Edge Function will construct this dynamically. Secrets in Lovable are encrypted at rest and accessible only from Edge Functions through Deno.env.get(). Lovable's security system blocks approximately 1,200 hardcoded API keys per day, and your BigCommerce token gives full store access within its scopes, so this server-side storage is essential.

Use Lovable's chat to generate and deploy the Edge Function that will proxy all BigCommerce API calls. The function accepts a POST request containing the BigCommerce endpoint path, the HTTP method to use, and an optional request body. It constructs the full BigCommerce API URL using your store hash, adds the X-Auth-Token header with your Access Token, and forwards the request. The function returns the BigCommerce API response to your frontend. This proxy approach means all BigCommerce calls originate from your Edge Function's IP address rather than from users' browsers — CORS is never an issue, and your credentials stay encrypted server-side. The function handles both v2 and v3 API endpoints since BigCommerce uses both versions for different capabilities (v3 for catalog and carts, v2 for orders).

1import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
2
3const corsHeaders = {
4  "Access-Control-Allow-Origin": "*",
5  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
6};
7
8serve(async (req) => {
9  if (req.method === "OPTIONS") {
10    return new Response("ok", { headers: corsHeaders });
11  }
12
13  try {
14    const accessToken = Deno.env.get("BIGCOMMERCE_ACCESS_TOKEN");
15    const storeHash = Deno.env.get("BIGCOMMERCE_STORE_HASH");
16
17    if (!accessToken || !storeHash) {
18      throw new Error("BigCommerce credentials not configured in Secrets");
19    }
20
21    const { endpoint, method = "GET", body } = await req.json();
22    if (!endpoint) throw new Error("'endpoint' is required");
23
24    const url = `https://api.bigcommerce.com/stores/${storeHash}${endpoint}`;
25
26    const fetchOptions: RequestInit = {
27      method,
28      headers: {
29        "X-Auth-Token": accessToken,
30        "Content-Type": "application/json",
31        Accept: "application/json",
32      },
33    };
34
35    if (body && method !== "GET") {
36      fetchOptions.body = JSON.stringify(body);
37    }
38
39    const response = await fetch(url, fetchOptions);
40    const data = await response.json();
41
42    return new Response(JSON.stringify(data), {
43      headers: { ...corsHeaders, "Content-Type": "application/json" },
44      status: response.ok ? 200 : response.status,
45    });
46  } catch (error) {
47    return new Response(
48      JSON.stringify({ error: error.message }),
49      { headers: { ...corsHeaders, "Content-Type": "application/json" }, status: 500 }
50    );
51  }
52});

With the proxy deployed, prompt Lovable to build the product listing and detail pages that form the core of your headless storefront. The BigCommerce Products API returns rich product data including images, variants (size, color), pricing, inventory counts, and custom fields. For a product listing page, you typically fetch products with the include=images,variants query parameter so you have all the data needed for cards in one request. For a product detail page, you fetch a single product by ID plus its reviews, related products, and any configurable options. Lovable generates complete React components with proper TypeScript types for the BigCommerce response shape. You can then use Lovable's Visual Editing mode to adjust colors, fonts, spacing, and layout without consuming AI credits — making the storefront match your brand without repeatedly prompting the AI.

The BigCommerce Carts API allows you to create a cart, add items, update quantities, and retrieve a checkout URL that redirects the customer to BigCommerce's PCI-compliant hosted checkout page for payment. The cart ID is a UUID that BigCommerce generates when you create the cart — store this in the user's localStorage (or in a Supabase session for logged-in users) so the cart persists across page reloads. To get the checkout redirect URL, call the /v3/carts/{cartId}/redirect_urls endpoint — BigCommerce returns a one-time checkout_url that you redirect the customer to. After checkout completes, BigCommerce redirects back to your store's configured return URL. For order confirmation, store a webhook listener in your Edge Function that BigCommerce calls when a payment is captured, and update your Supabase database with the confirmed order data.