How to Integrate 3dcart (Shift4Shop) with V0

Open V0 at v0.dev and describe the storefront page you want to build. V0 works best when you describe the exact layout, components, and interactions you need. For a product catalog, specify the number of columns, what each product card shows, what filters are available, and how loading states should look. For a product detail page, describe the image gallery, variants selector, and add-to-cart flow. V0 will generate a complete React component with Tailwind CSS that you can preview immediately. Once generated, use follow-up prompts to refine the design — 'Make the product cards taller,' 'Add a skeleton loading state,' or 'Use a sidebar layout for filters on desktop.' When the design looks right, push the code to GitHub via the Git panel in V0. Vercel will automatically deploy the new code. At this stage, the components will use placeholder or mock data; the next steps wire up real Shift4Shop product data.

The Shift4Shop REST API uses a Private Key passed in request headers for authentication. Your API base URL is your store's domain followed by /api/v1/ or /api/v2/ depending on the resource. Create a Next.js API route that accepts a resource type query parameter and forwards the request to Shift4Shop with proper authentication headers. The Shift4Shop API accepts and returns JSON. Important authentication detail: Shift4Shop API v2 uses the header 'SecureURL' set to your store's secure URL, 'PrivateKey' set to your API private key, and 'Token' set to 'true'. These are non-standard headers — double check the Shift4Shop API documentation for the exact header names as they differ from most APIs. The route below handles products, categories, and orders with a single handler that routes based on the 'resource' query parameter, keeping your route file organized.

1import { NextRequest, NextResponse } from 'next/server';
2
3const SHIFT4SHOP_STORE_URL = process.env.SHIFT4SHOP_STORE_URL; // e.g. https://yourstore.shift4shop.com
4const SHIFT4SHOP_PRIVATE_KEY = process.env.SHIFT4SHOP_PRIVATE_KEY;
5
6function getShift4ShopHeaders() {
7  return {
8    'Content-Type': 'application/json',
9    'Accept': 'application/json',
10    'SecureURL': SHIFT4SHOP_STORE_URL ?? '',
11    'PrivateKey': SHIFT4SHOP_PRIVATE_KEY ?? '',
12    'Token': 'true',
13  };
14}
15
16export async function GET(request: NextRequest) {
17  if (!SHIFT4SHOP_STORE_URL || !SHIFT4SHOP_PRIVATE_KEY) {
18    return NextResponse.json(
19      { error: 'Shift4Shop credentials not configured' },
20      { status: 500 }
21    );
22  }
23
24  const { searchParams } = new URL(request.url);
25  const resource = searchParams.get('resource') ?? 'products';
26  const id = searchParams.get('id');
27  const limit = searchParams.get('limit') ?? '20';
28  const offset = searchParams.get('offset') ?? '0';
29
30  let endpoint = '';
31  if (resource === 'products') {
32    endpoint = `${SHIFT4SHOP_STORE_URL}/api/v1/Products?limit=${limit}&offset=${offset}`;
33  } else if (resource === 'product' && id) {
34    endpoint = `${SHIFT4SHOP_STORE_URL}/api/v1/Products/${id}`;
35  } else if (resource === 'categories') {
36    endpoint = `${SHIFT4SHOP_STORE_URL}/api/v1/Categories`;
37  } else if (resource === 'orders') {
38    endpoint = `${SHIFT4SHOP_STORE_URL}/api/v1/Orders?limit=${limit}&offset=${offset}`;
39  } else {
40    return NextResponse.json({ error: 'Unknown resource type' }, { status: 400 });
41  }
42
43  try {
44    const response = await fetch(endpoint, {
45      headers: getShift4ShopHeaders(),
46    });
47
48    if (!response.ok) {
49      const errorText = await response.text();
50      return NextResponse.json(
51        { error: `Shift4Shop API error: ${response.status}`, details: errorText },
52        { status: response.status }
53      );
54    }
55
56    const data = await response.json();
57    return NextResponse.json(data);
58  } catch (error) {
59    console.error('Shift4Shop API route error:', error);
60    return NextResponse.json({ error: 'Failed to connect to Shift4Shop API' }, { status: 500 });
61  }
62}

Your Shift4Shop Private Key and store URL need to be stored in Vercel as environment variables so they are available in the serverless API route. Do not put them in your source code or any V0 chat messages. In Vercel: open your project dashboard at vercel.com, go to Settings → Environment Variables, and add two new variables. The first is SHIFT4SHOP_STORE_URL with your store's full URL including https:// (for example, https://yourstore.shift4shop.com or your custom domain). The second is SHIFT4SHOP_PRIVATE_KEY with your API private key. Both can be found in your Shift4Shop admin panel under Settings → Apps & Integrations → API. Select Production and Preview for both variables. For local development, create a .env.local file in your project root with both values. After adding the variables, go to the Vercel Deployments tab and trigger a redeployment — existing deployments do not pick up new environment variables automatically.

1# .env.local (do NOT commit this file — add it to .gitignore)
2SHIFT4SHOP_STORE_URL=https://yourstore.shift4shop.com
3SHIFT4SHOP_PRIVATE_KEY=your_private_key_here

Update the V0-generated components to fetch data from your /api/shift4shop route and render real products. The key is mapping the Shift4Shop API response fields (like CatalogID, Name, Price, Thumbnail) to your component's props. Shift4Shop product objects include fields like CatalogID, SKU, Name, ShortDescription, Price, SalePrice, Thumbnail, and Stock among others. Once the component correctly maps these fields, products from your live Shift4Shop store will appear in the UI. After updating the component, push to GitHub and Vercel will auto-deploy. Test the live URL to confirm products load correctly. If you need to configure Next.js to allow Shift4Shop image domains (necessary for product images to display), add your store's image domain to the images.domains or images.remotePatterns array in next.config.js.

1// next.config.js — allow Shift4Shop product images
2/** @type {import('next').NextConfig} */
3const nextConfig = {
4  images: {
5    remotePatterns: [
6      {
7        protocol: 'https',
8        hostname: '*.shift4shop.com',
9      },
10      {
11        protocol: 'https',
12        hostname: 'yourstore.shift4shop.com',
13      },
14    ],
15  },
16};
17
18module.exports = nextConfig;