Next.js Quickstart

npx create-next-app@latest my-storefront --typescript --app --tailwind
cd my-storefront

NEXT_PUBLIC_CRAVEUP_API_KEY=sk_live_your_api_key
NEXT_PUBLIC_LOCATION_ID=loc_your_location_id
NEXT_PUBLIC_LOCATION_SLUG=your-restaurant-slug

import { createStorefrontClient } from '@craveup/storefront-sdk';

export const storefront = createStorefrontClient({
  apiKey: process.env.NEXT_PUBLIC_CRAVEUP_API_KEY!,
});

import { storefront } from '@/lib/storefront';

export default async function HomePage() {
  const merchant = await storefront.merchant.getBySlug(
    process.env.NEXT_PUBLIC_LOCATION_SLUG!
  );

  return (
    <main className="max-w-4xl mx-auto p-8">
      <h1 className="text-3xl font-bold">{merchant.name}</h1>
      <p className="text-gray-600 mt-2">{merchant.bio}</p>

      <h2 className="text-xl font-semibold mt-8">Locations</h2>
      <ul className="mt-4 space-y-3">
        {merchant.locations.map((loc) => (
          <li key={loc.id} className="p-4 border rounded-lg">
            <p className="font-medium">{loc.restaurantDisplayName}</p>
            <p className="text-sm text-gray-500">{loc.addressString}</p>
          </li>
        ))}
      </ul>
    </main>
  );
}

'use client';

import { useEffect, useState } from 'react';
import { storefront } from '@/lib/storefront';
import type { StorefrontCart } from '@craveup/storefront-sdk';

const LOCATION_ID = process.env.NEXT_PUBLIC_LOCATION_ID!;

export default function OrderPage() {
  const [cart, setCart] = useState<StorefrontCart | null>(null);
  const [cartId, setCartId] = useState<string | null>(null);

  useEffect(() => {
    storefront.orderingSessions
      .start(LOCATION_ID, { marketplaceId: LOCATION_ID })
      .then((session) => {
        if (session.cartId) setCartId(session.cartId);
      });
  }, []);

  async function addItem(productId: string) {
    if (!cartId) return;
    const result = await storefront.cart.addItem(LOCATION_ID, cartId, {
      productId,
      quantity: 1,
      selections: [],
      itemUnavailableAction: 'remove_item',
    });
    setCart(result.cart);
  }

  return (
    <main className="max-w-4xl mx-auto p-8">
      <h1 className="text-2xl font-bold">Order</h1>
      <button
        onClick={() => addItem('prod_margherita')}
        className="mt-4 px-4 py-2 bg-teal-600 text-white rounded"
      >
        Add Margherita Pizza
      </button>
      {cart && (
        <div className="mt-6 p-4 border rounded-lg">
          <p className="font-medium">Cart ({cart.totalQuantity} items)</p>
          <p className="text-lg mt-1">Total: {cart.orderTotalWithServiceFeeFormatted}</p>
        </div>
      )}
    </main>
  );
}

pnpm dev