How to Integrate Lovable with Magento (Adobe Commerce)

In your Magento admin panel, navigate to System → Extensions → Integrations. Click 'Add New Integration' in the top right. On the New Integration form, enter a name like 'Lovable Headless Frontend' and your admin password in the 'Your Password' field (Magento requires this to confirm the integration creation). On the API tab, select the resources your Lovable integration needs access to. For a read-only storefront, select: Catalog (Products, Categories, Product Attributes), Stores (Store Information, Store Configurations), and optionally Customers and Orders for authenticated features. For a full-featured storefront with cart and checkout, also select Cart and Checkout. Click Save. Magento will generate four tokens: Consumer Key, Consumer Secret, Access Token, and Access Token Secret. For simple Bearer token authentication, you only need the Access Token — copy it immediately. The Access Token is a persistent token (unlike OAuth user tokens, it does not expire unless you revoke the integration). This is the token you will store in Cloud Secrets for all API requests.

Open your Lovable project and click the '+' next to the Preview panel to open the Cloud tab, then find the Secrets section. Add two secrets: MAGENTO_ACCESS_TOKEN with your Integration Access Token value, and MAGENTO_BASE_URL with your Magento store's base URL — for example https://mystore.com — with no trailing slash. The MAGENTO_BASE_URL value is used by the Edge Function to construct API calls like MAGENTO_BASE_URL + /rest/V1/products. If you run multiple Magento stores, you can also add a MAGENTO_DEFAULT_STORE_CODE secret for the default store code used in multi-store URL patterns (/rest/{store_code}/V1/). These secrets are encrypted at rest, protected by Lovable's SOC 2 Type II and ISO 27001:2022 certified infrastructure, and accessible only from server-side Edge Functions via Deno.env.get(). Lovable's automated security layer blocks approximately 1,200 hardcoded API keys daily — storing your Magento access token in Cloud Secrets ensures it stays protected.

Ask Lovable to create a Supabase Edge Function that authenticates with Magento's REST API and proxies requests to the correct endpoints. The Edge Function should read MAGENTO_ACCESS_TOKEN and MAGENTO_BASE_URL from Deno.env.get(), accept a 'path' query parameter specifying the Magento REST endpoint (e.g., /rest/V1/products or /rest/V1/categories), include the Authorization: Bearer header with the access token on all requests, handle both GET requests (for fetching data) and POST/PUT requests (for cart operations), forward query parameters like searchCriteria to Magento for filtering, and return the JSON response with CORS headers. Magento's REST API uses a searchCriteria query string syntax for filtering: searchCriteria[filter_groups][0][filters][0][field]=status&searchCriteria[filter_groups][0][filters][0][value]=1&searchCriteria[filter_groups][0][filters][0][condition_type]=eq for filtering active products. Your Edge Function should pass these parameters through transparently.

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("MAGENTO_ACCESS_TOKEN");
15    const baseUrl = Deno.env.get("MAGENTO_BASE_URL");
16    const storeCode = Deno.env.get("MAGENTO_STORE_CODE") || "default";
17
18    if (!accessToken || !baseUrl) {
19      return new Response(
20        JSON.stringify({ error: "Magento credentials not configured" }),
21        { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
22      );
23    }
24
25    const url = new URL(req.url);
26    const path = url.searchParams.get("path") || `/rest/${storeCode}/V1/products`;
27    url.searchParams.delete("path");
28
29    const magentoUrl = new URL(`${baseUrl}${path}`);
30    url.searchParams.forEach((value, key) => {
31      magentoUrl.searchParams.set(key, value);
32    });
33
34    const requestOptions: RequestInit = {
35      method: req.method,
36      headers: {
37        "Authorization": `Bearer ${accessToken}`,
38        "Content-Type": "application/json",
39        "Accept": "application/json",
40      },
41    };
42
43    if (req.method !== "GET" && req.method !== "HEAD") {
44      requestOptions.body = await req.text();
45    }
46
47    const response = await fetch(magentoUrl.toString(), requestOptions);
48    const data = await response.json();
49
50    return new Response(JSON.stringify(data), {
51      status: response.status,
52      headers: { ...corsHeaders, "Content-Type": "application/json" },
53    });
54  } catch (error) {
55    return new Response(
56      JSON.stringify({ error: error.message }),
57      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
58    );
59  }
60});

With the Edge Function deployed, ask Lovable to create React components that fetch and display Magento products. Magento's product list endpoint is /rest/V1/products and requires searchCriteria parameters to filter and paginate results. A basic request to fetch 20 active, visible products uses: searchCriteria[filter_groups][0][filters][0][field]=status, value=1, condition_type=eq (for enabled products) and searchCriteria[pageSize]=20. The response is a { items: [...], total_count: N, search_criteria: {...} } structure. Each product in items has sku, name, price, status, type_id (simple, configurable, grouped, bundled), and a custom_attributes array containing all Magento attribute values including description, image, and category assignments. For configurable products, you need to make an additional call to /rest/V1/configurable-products/{sku}/options to get the available options (like color and size), then /rest/V1/configurable-products/{sku}/children to get all simple product variants with their specific prices and attributes. Ask Lovable to handle both simple and configurable product types in the product card component.

Magento has separate cart flows for guest shoppers and authenticated customers. For guest cart, POST to /rest/V1/guest-carts to create a cart and receive a cart ID (a random token string). Then add items by POSTing to /rest/V1/guest-carts/{cartId}/items with a payload containing { cartItem: { sku, qty, quote_id } }. For authenticated customers, POST to /rest/V1/carts/mine with the customer's bearer token to create or retrieve their cart, then add items to /rest/V1/carts/mine/items. Store the guest cart ID in localStorage or the customer cart in Supabase session. For checkout, call /rest/V1/guest-carts/{cartId}/shipping-information with address and shipping method, then /rest/V1/guest-carts/{cartId}/payment-information to place the order with a payment method. For complex enterprise checkout flows with multiple payment methods, custom shipping carriers, or B2B quote workflows, RapidDev's team can help architect the full cart-to-order pipeline. After order placement, Magento returns an order ID that you can use to track order status via /rest/V1/orders/{orderId}.