How to Integrate Lovable with Salesforce Commerce Cloud

SFCC authentication requires setup in your SFCC Business Manager before any API calls can be made from Lovable. You need to create a SLAS API Client that will represent your Lovable integration. Log in to your SFCC Business Manager (typically at yourdomain.demandware.net/on/demandware.store/Sites-Site/default/ViewApplication-DisplayWelcomePage). Navigate to Administration → Site Development → SLAS Administration. If you do not see this menu, ask your SFCC administrator — you need Organization Manager or Administrator permissions. In SLAS Administration, click 'Add API Client'. Fill in: - Client ID: a unique identifier for this integration (e.g., lovable-storefront-client). Keep this value — it becomes your SFCC_CLIENT_ID secret. - Client secret: click 'Generate' to create a secure random secret. Copy it immediately — it is only shown once. This becomes your SFCC_CLIENT_SECRET secret. - Redirect URIs: add your Lovable app's deployed URL (for OAuth flows with shoppers, not needed for server-to-server) and https://localhost:3000 for development. - Scopes: for server-to-server Edge Function calls, you need at minimum: sfcc.products.rw, sfcc.baskets.rw, sfcc.orders.rw, sfcc.customerlists.rw depending on what APIs you intend to call. - Token endpoint auth method: select 'client_secret_post' Click Save. Also note your SFCC instance URL (visible in your browser address bar when logged into Business Manager — it looks like abcd-001.dx.commercecloud.salesforce.com) and your Site ID (visible in Administration → Sites → Manage Sites).

Store your SFCC credentials in Lovable's Cloud Secrets panel. These credentials grant access to your SFCC product catalog, order data, and customer information — they must never appear in frontend code or be committed to your Git repository. In Lovable, click the '+' icon next to the Preview label to open the Cloud panel. Click the 'Secrets' tab. Add the following secrets: SFCC_CLIENT_ID: your SLAS API Client ID (e.g., lovable-storefront-client) SFCC_CLIENT_SECRET: the generated client secret from SLAS Administration SFCC_INSTANCE_URL: your SFCC instance hostname (e.g., abcd-001.dx.commercecloud.salesforce.com — without https:// prefix, as the Edge Function constructs the full URL) SFCC_SITE_ID: your SFCC Site ID (e.g., RefArch or your custom site name) SFCC_SHORT_CODE: a short identifier for your SFCC organization, visible in your instance URLs (e.g., kv7kzm78 — it appears in API endpoint URLs like https://kv7kzm78.api.commercecloud.salesforce.com) With all five secrets saved, your Edge Functions have the complete information needed to authenticate and make API calls to SFCC.

Create the Edge Function that handles SFCC's SLAS OAuth2 client credentials flow and proxies product API calls. The function needs to do two things in sequence: first, exchange the client credentials for an access token; second, use that token to call the desired SFCC API endpoint. SFCC's SLAS token endpoint follows the OAuth2 client credentials standard: POST to https://{shortCode}.api.commercecloud.salesforce.com/shopper/auth/v1/organizations/{orgId}/oauth2/access_token with your client credentials. The response includes an access_token (valid for 30 minutes) and optionally a refresh_token. For server-side Edge Functions, re-requesting a token on each call is simpler than managing token caching, though token caching is recommended for production to avoid hitting SLAS rate limits. The product search endpoint in SFCC's Shop API is: GET https://{shortCode}.api.commercecloud.salesforce.com/product/shopper-products/v1/organizations/{orgId}/products with query parameters for IDs, siteId, locale, currency, and expand fields. The search endpoint for category browsing is: GET .../product/shopper-search/v1/organizations/{orgId}/product-search with parameters for q (search query), refine (category filter), start, and count. The code below shows the complete authentication + product search flow. For production, add token caching using a Supabase table or in-memory store to avoid authenticating on every request.

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
8async function getSFCCToken(
9  shortCode: string,
10  clientId: string,
11  clientSecret: string,
12  siteId: string
13): Promise<string> {
14  // For Shopper APIs, use the guest access token endpoint
15  const orgId = `f_ecom_${siteId.toLowerCase()}_prd` // Adjust orgId pattern for your instance
16  const tokenUrl = `https://${shortCode}.api.commercecloud.salesforce.com/shopper/auth/v1/organizations/${orgId}/oauth2/access_token`
17
18  const response = await fetch(tokenUrl, {
19    method: 'POST',
20    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
21    body: new URLSearchParams({
22      grant_type: 'client_credentials',
23      client_id: clientId,
24      client_secret: clientSecret,
25    }),
26  })
27
28  if (!response.ok) {
29    const error = await response.text()
30    throw new Error(`SFCC auth failed: ${response.status} - ${error}`)
31  }
32
33  const data = await response.json()
34  return data.access_token
35}
36
37serve(async (req) => {
38  if (req.method === 'OPTIONS') {
39    return new Response('ok', { headers: corsHeaders })
40  }
41
42  try {
43    const url = new URL(req.url)
44    const categoryId = url.searchParams.get('categoryId') || 'root'
45    const start = url.searchParams.get('start') || '0'
46    const count = url.searchParams.get('count') || '20'
47
48    const shortCode = Deno.env.get('SFCC_SHORT_CODE')
49    const clientId = Deno.env.get('SFCC_CLIENT_ID')
50    const clientSecret = Deno.env.get('SFCC_CLIENT_SECRET')
51    const siteId = Deno.env.get('SFCC_SITE_ID')
52
53    if (!shortCode || !clientId || !clientSecret || !siteId) {
54      throw new Error('Missing SFCC credentials in secrets')
55    }
56
57    // Get SLAS access token
58    const accessToken = await getSFCCToken(shortCode, clientId, clientSecret, siteId)
59
60    // Call SFCC Shopper Search API
61    const orgId = `f_ecom_${siteId.toLowerCase()}_prd`
62    const searchUrl = new URL(
63      `https://${shortCode}.api.commercecloud.salesforce.com/product/shopper-search/v1/organizations/${orgId}/product-search`
64    )
65    searchUrl.searchParams.set('siteId', siteId)
66    searchUrl.searchParams.set('refine', `cgid=${categoryId}`)
67    searchUrl.searchParams.set('start', start)
68    searchUrl.searchParams.set('count', count)
69    searchUrl.searchParams.set('expand', 'images,prices')
70
71    const searchResponse = await fetch(searchUrl.toString(), {
72      headers: { Authorization: `Bearer ${accessToken}` },
73    })
74
75    if (!searchResponse.ok) {
76      const error = await searchResponse.text()
77      throw new Error(`SFCC products API error: ${searchResponse.status} - ${error}`)
78    }
79
80    const searchData = await searchResponse.json()
81
82    // Normalize response format
83    const products = (searchData.hits || []).map((hit: Record<string, unknown>) => ({
84      id: hit.productId,
85      name: hit.productName,
86      price: (hit.price as number) || 0,
87      imageUrl: ((hit.image as Record<string, string>)?.link) || '',
88      shortDescription: hit.shortDescription || '',
89    }))
90
91    return new Response(
92      JSON.stringify({ products, total: searchData.total, start: searchData.start }),
93      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
94    )
95  } catch (error) {
96    return new Response(
97      JSON.stringify({ error: error.message }),
98      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
99    )
100  }
101})

With the Edge Function deployed, create the product listing page in your Lovable app that calls the SFCC proxy and renders the catalog. Use supabase.functions.invoke() or a direct fetch to the Edge Function URL with category and pagination parameters. For the product listing UI, consider the standard SFCC storefront patterns: a category navigation sidebar, a product grid with images and prices, pagination controls, sort options (price asc/desc, new arrivals, best sellers), and filter refinements by color, size, or brand. You can ask Lovable to generate these components in a single prompt, specifying the data shape from your Edge Function. For cart integration, create a second Edge Function (sfcc-cart) that proxies to SFCC's Baskets API. Store the SFCC basket ID in localStorage on the client side and pass it with each cart operation. When the basket ID expires (SFCC baskets expire after 14 days by default), create a new basket automatically. For production deployments with significant catalog size, implement client-side caching of category and product data using React Query or SWR — this avoids re-fetching SFCC data on every page navigation and reduces SFCC API quota consumption. For complex enterprise implementations spanning multiple SFCC catalogs, locales, and currencies, RapidDev's team can help architect the full headless commerce pattern.