How to Integrate Salesforce Commerce Cloud with V0

SFCC API access is managed through Salesforce's Account Manager portal at account.demandware.com. Log in with your Salesforce credentials. Navigate to API Client under your organization. Create a new API Client (or use an existing one) — this generates a Client ID and Client Secret used for server-to-server authentication. Note your Organization Short Code — it is the 10-character alphanumeric code shown in Account Manager that identifies your SFCC organization (e.g., kv7kzm78). Your SFCC instance hostname will be in the format yoursite.sandbox.us01.dx.commercecloud.salesforce.com. The Site ID is the storefront site identifier configured in SFCC Business Manager (typically something like RefArch or your brand name). You also need to ensure the API client has the appropriate SCAPI permissions — in Business Manager (Administration → Site Development → Open Commerce API Settings), add entries allowing your client ID to access the Shop API endpoints including Products, Categories, Carts, and Orders. The specific JSON configuration for OCAPI/SCAPI permissions is available in Salesforce's headless commerce documentation and varies by SFCC version.

Open V0 at v0.dev and describe your storefront pages. V0 excels at generating e-commerce UI — product grids, filter sidebars, breadcrumb navigation, product detail pages with image galleries, and cart drawers. Since you will connect this to real SFCC product data, include realistic product data shapes in your prompt so V0 generates components that match the actual field names. SFCC products have a productId, name, longDescription, price (in a prices array), and images (in an imageGroups array). Design your product listing page first, since it is the most important. Ask V0 to create a responsive grid layout with a mobile-first filter bar that collapses into a bottom sheet on small screens. Ask for a loading skeleton that matches the product card dimensions for perceived performance. V0 will also generate the API route stubs — app/api/sfcc/products/route.ts and app/api/sfcc/cart/route.ts. After the initial generation, use V0's Design Mode to adjust spacing and typography without spending credits, then deploy when the layout looks right.

SFCC Shopper APIs require OAuth 2.0 PKCE authentication. For guest shopping sessions (the most common case for public storefronts), you use the 'guest' grant type to get a shopper JWT. This token is used in subsequent API calls. Create a shared authentication helper that gets a guest access token from SFCC's Shopper Login and API Access Service (SLAS). The token endpoint is POST /shopper/auth/v1/organizations/{orgId}/oauth2/token. For server-to-server calls like product catalog reads, you can use the simpler client credentials flow. Create app/api/sfcc/products/route.ts to fetch products from a category using the Shopper Products API. The Products API endpoint is GET /product/shopper-products/v1/organizations/{orgId}/products with query parameters for siteId, locale, currency, and an IDs list or GET /product/shopper-products/v1/organizations/{orgId}/categories/{categoryId}/products for browsing by category.

1import { NextResponse } from 'next/server';
2
3const SFCC_HOST = process.env.SFCC_INSTANCE_HOST!;
4const ORG_ID = `f_ecom_${process.env.SFCC_SHORT_CODE}_prd`;
5const SITE_ID = process.env.SFCC_SITE_ID!;
6
7async function getGuestToken(): Promise<string> {
8  const response = await fetch(
9    `https://${SFCC_HOST}/shopper/auth/v1/organizations/${ORG_ID}/oauth2/token`,
10    {
11      method: 'POST',
12      headers: {
13        'Content-Type': 'application/x-www-form-urlencoded',
14        Authorization: `Basic ${Buffer.from(
15          `${process.env.SFCC_CLIENT_ID}:${process.env.SFCC_CLIENT_SECRET}`
16        ).toString('base64')}`,
17      },
18      body: new URLSearchParams({
19        grant_type: 'client_credentials',
20        channel_id: SITE_ID,
21      }),
22    }
23  );
24  const data = await response.json();
25  return data.access_token;
26}
27
28export async function GET(request: Request) {
29  const { searchParams } = new URL(request.url);
30  const categoryId = searchParams.get('categoryId') ?? 'root';
31  const limit = searchParams.get('limit') ?? '24';
32
33  try {
34    const token = await getGuestToken();
35    const response = await fetch(
36      `https://${SFCC_HOST}/product/shopper-products/v1/organizations/${ORG_ID}/categories/${categoryId}/products?siteId=${SITE_ID}&limit=${limit}&allImages=true`,
37      {
38        headers: { Authorization: `Bearer ${token}` },
39      }
40    );
41
42    const data = await response.json();
43
44    if (!response.ok) {
45      return NextResponse.json({ error: data.title ?? 'SFCC error' }, { status: response.status });
46    }
47
48    const products = (data.data ?? []).map((p: Record<string, unknown>) => ({
49      id: p.productId,
50      name: p.name,
51      description: p.shortDescription,
52      price: (p.price as number) ?? 0,
53      image: ((p.imageGroups as Record<string, unknown>[])?.[0]?.images as Record<string, unknown>[])?.[0]?.link ?? '',
54    }));
55
56    return NextResponse.json({ products, total: data.total ?? 0 });
57  } catch (error) {
58    console.error('SFCC products error:', error);
59    return NextResponse.json({ error: 'Failed to fetch products' }, { status: 500 });
60  }
61}

Navigate to your Vercel project, go to Settings → Environment Variables, and add the SFCC configuration. SFCC_INSTANCE_HOST is your sandbox hostname without the https:// prefix (e.g., yoursite.sandbox.us01.dx.commercecloud.salesforce.com). SFCC_SHORT_CODE is the 10-character organization short code from Account Manager (e.g., kv7kzm78). SFCC_SITE_ID is the Site ID from SFCC Business Manager (e.g., RefArch or your site name). SFCC_CLIENT_ID and SFCC_CLIENT_SECRET are from the API Client you created in Account Manager. All five variables must be server-only (no NEXT_PUBLIC_ prefix) since they are used only in API routes. After adding variables, redeploy from the Deployments tab. For sandbox and production environments, you will have different SFCC_INSTANCE_HOST values — use Vercel's environment scopes to set sandbox credentials for Preview deployments and production credentials for Production deployments. Never use production SFCC credentials in Preview deployments as API calls affect live commerce data.

1# .env.local (local development only — set in Vercel Dashboard for deployments)
2SFCC_INSTANCE_HOST=yoursite.sandbox.us01.dx.commercecloud.salesforce.com
3SFCC_SHORT_CODE=kv7kzm78
4SFCC_SITE_ID=RefArch
5SFCC_CLIENT_ID=your-api-client-id
6SFCC_CLIENT_SECRET=your-api-client-secret

With product fetching working, update your V0 UI to load real SFCC product data and implement cart functionality. The Add to Cart flow requires creating a basket (Shopper Baskets API: POST /checkout/shopper-baskets/v1/organizations/{orgId}/baskets) and then adding items to it (POST /checkout/shopper-baskets/v1/organizations/{orgId}/baskets/{basketId}/items). The basket ID should be stored in a cookie or in component state for the session. Create app/api/sfcc/cart/route.ts to handle basket operations. The cart API route needs to handle POST requests for adding items and GET requests for fetching the current basket. For production storefront implementations with custom checkout flows, order management, and payment integration, the complexity increases significantly. Many teams choose to use SFCC's own Composable Storefront (React PWA Kit) as the foundation and extend it with V0-generated components, rather than building the full checkout flow from scratch. RapidDev specializes in Salesforce Commerce Cloud headless implementations and can help design the complete cart-to-checkout architecture for production deployments.