How to Integrate Lovable with Shift4Shop (formerly 3dcart)

Log in to your Shift4Shop store admin panel at [yourstorename].shift4shop.com/manager. In the left navigation, go to Settings → API and click the REST API tab. If you haven't enabled the REST API before, click Enable REST API. Shift4Shop will display your store's REST API key — this is called the Private Token and it's the credential used for Bearer token authentication. Copy the Private Token — it's a long alphanumeric string. Also note your store's base URL for API calls. For most Shift4Shop stores this is https://apirest.3dcart.com/3dCartWebAPI/v1/, but if your store was originally a 3dcart account migrated to Shift4Shop, verify this in the API settings page. The API key section also shows your Store URL which you'll need for constructing correct API endpoints. Note that Shift4Shop's REST API uses two authentication headers: PrivateKey (your store's secret token) and Token (an optional public key). For server-side Edge Function usage, you only need the PrivateKey. The API documentation is available at apirest.3dcart.com where you can browse all endpoints and their expected request/response formats before building your integration.

With your Shift4Shop Private Token in hand, store it securely in Lovable's Cloud Secrets panel. In your Lovable project, click the '+' icon next to the Preview panel at the top of the screen to open the Cloud tab. Inside the Cloud tab, click Secrets in the left sidebar. Click Add Secret to create a new encrypted secret. Set the name to SHIFT4SHOP_PRIVATE_TOKEN and paste your Private Token as the value, then click Save. If your store has a custom API base URL that differs from the default apirest.3dcart.com, add a second secret named SHIFT4SHOP_BASE_URL with your store's base API URL as the value. Shift4Shop's API also uses your store key as part of request headers. Some API operations require knowing your store's unique key (different from the private token) — you can find this in Settings → API as well. Add it as SHIFT4SHOP_STORE_KEY if needed. The Cloud Secrets panel encrypts all values immediately on save — once stored, you'll only see the secret name, not the value, which confirms it's properly protected. Lovable's security system blocks approximately 1,200 hardcoded API keys per day; using Cloud Secrets keeps your Shift4Shop credentials out of your Git history and frontend code.

Now create the Edge Function that will proxy calls to the Shift4Shop REST API. Type the prompt below into Lovable's chat. Lovable will generate the TypeScript code at supabase/functions/shift4shop-proxy/index.ts and deploy it to your Cloud project. The Edge Function reads your Private Token from Deno.env.get('SHIFT4SHOP_PRIVATE_TOKEN') and constructs the required authentication headers. Shift4Shop's REST API requires the Private Token in the PrivateKey header and expects the Content-Type to be application/json. The function accepts a path query parameter containing the specific API endpoint to call (e.g., '/Products', '/Orders', '/Customers'), and a method parameter for GET, POST, or PUT. It proxies the request to the Shift4Shop API base URL and returns the response. CORS headers are included on all responses so your React frontend can call the function from the browser. The function supports all common Shift4Shop REST API operations — reading product catalogs, creating or updating products, fetching orders, and looking up customer records — by forwarding whatever path and parameters you pass from the frontend.

1import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
2
3const SHIFT4SHOP_BASE = 'https://apirest.3dcart.com/3dCartWebAPI/v1'
4
5const corsHeaders = {
6  'Access-Control-Allow-Origin': '*',
7  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
8}
9
10serve(async (req) => {
11  if (req.method === 'OPTIONS') {
12    return new Response('ok', { headers: corsHeaders })
13  }
14
15  try {
16    const privateToken = Deno.env.get('SHIFT4SHOP_PRIVATE_TOKEN')
17
18    if (!privateToken) {
19      return new Response(
20        JSON.stringify({ error: 'SHIFT4SHOP_PRIVATE_TOKEN not configured in Cloud Secrets' }),
21        { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
22      )
23    }
24
25    const url = new URL(req.url)
26    const apiPath = url.searchParams.get('path') || '/Products'
27    const method = url.searchParams.get('method') || 'GET'
28
29    // Forward additional query params to Shift4Shop
30    const forwardParams = new URLSearchParams()
31    for (const [key, value] of url.searchParams.entries()) {
32      if (key !== 'path' && key !== 'method') {
33        forwardParams.append(key, value)
34      }
35    }
36
37    const paramString = forwardParams.toString()
38    const shift4ShopUrl = `${SHIFT4SHOP_BASE}${apiPath}${paramString ? '?' + paramString : ''}`
39
40    const requestInit: RequestInit = {
41      method,
42      headers: {
43        'PrivateKey': privateToken,
44        'Content-Type': 'application/json',
45        'Accept': 'application/json',
46      },
47    }
48
49    if (method !== 'GET' && method !== 'HEAD') {
50      requestInit.body = await req.text()
51    }
52
53    const apiResponse = await fetch(shift4ShopUrl, requestInit)
54    const data = await apiResponse.json()
55
56    return new Response(JSON.stringify(data), {
57      status: apiResponse.status,
58      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
59    })
60  } catch (error) {
61    return new Response(
62      JSON.stringify({ error: error.message }),
63      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
64    )
65  }
66})

With the Edge Function deployed, ask Lovable to build your first Shift4Shop-connected component. Start with the product catalog as it's the most common use case and requires only GET requests to the /Products endpoint. The Shift4Shop Products API returns an array of product objects, each containing fields like SKUInfo (array of SKU objects with price and stock), Name, MainPicture, Description, CategoryList, and more. Lovable will generate TypeScript interfaces for these response types and create properly typed React components. For the order management dashboard, the Orders API at /Orders returns order objects with fields including InvoiceNumber, OrderDate, CustomerEmail, OrderStatusDescription, OrderAmount, and an array of OrderItems. Add query parameters like ?limit=25&offset=0 for pagination and ?Status=New to filter by order status. Test each API endpoint by checking that real data from your Shift4Shop store appears in your Lovable preview. If you see a 401 response, verify the SHIFT4SHOP_PRIVATE_TOKEN secret is set correctly. If you see a 404, confirm your store is on a plan that includes REST API access and that the endpoint path matches the Shift4Shop API documentation exactly.