React Quickstart

npm create vite@latest my-storefront -- --template react-ts
cd my-storefront
npm install --save-exact @craveup/storefront-sdk@2.0.1

VITE_CRAVEUP_API_URL=https://api.craveup.com
VITE_LOCATION_ID=loc_your_location_id
VITE_MERCHANT_SLUG=your-restaurant-slug

import {
  createStorefrontClient,
  type StorefrontCartSession,
  type StorefrontSessionStore,
} from "@craveup/storefront-sdk";

const apiUrl = import.meta.env.VITE_CRAVEUP_API_URL;
const merchantSlug = import.meta.env.VITE_MERCHANT_SLUG;
if (!apiUrl || !merchantSlug) throw new Error("Missing Storefront configuration");

const apiOrigin = new URL(apiUrl).origin;
const storageKeyPart = (value: string) =>
  encodeURIComponent(value).replaceAll(".", "%2E");
const environmentNamespace = storageKeyPart(apiOrigin);
const scope = `${environmentNamespace}.${storageKeyPart(merchantSlug)}`;
const storageKey = (
  kind: "cart" | "customer" | "receipt",
  resourceId: string,
) => `storefront.${kind}.v1.${scope}.${storageKeyPart(resourceId)}`;
const cartKey = (locationId: string) => storageKey("cart", locationId);
const customerKey = storageKey("customer", "jwt");
const receiptKey = (receiptId: string) => storageKey("receipt", receiptId);

function readCartSession(locationId: string): StorefrontCartSession | null {
  const key = cartKey(locationId);
  const raw = sessionStorage.getItem(key);
  if (!raw) return null;

  try {
    const value = JSON.parse(raw) as Partial<StorefrontCartSession>;
    if (
      value.locationId !== locationId ||
      typeof value.cartId !== "string" ||
      typeof value.revision !== "number" ||
      !Number.isInteger(value.revision) ||
      value.revision < 0 ||
      (value.accessToken !== undefined && typeof value.accessToken !== "string")
    ) {
      throw new Error("Invalid cart session");
    }
    return value as StorefrontCartSession;
  } catch {
    sessionStorage.removeItem(key);
    return null;
  }
}

export const sessionStore: StorefrontSessionStore = {
  get(locationId) {
    return readCartSession(locationId);
  },
  set(session) {
    sessionStorage.setItem(
      cartKey(session.locationId),
      JSON.stringify(session),
    );
  },
  clear(locationId) {
    sessionStorage.removeItem(cartKey(locationId));
  },
};

export const customerTokenStore = {
  get: () => sessionStorage.getItem(customerKey),
  set: (token: string) => sessionStorage.setItem(customerKey, token),
  clear: () => sessionStorage.removeItem(customerKey),
};

export const receiptTokenStore = {
  get: (receiptId: string) => sessionStorage.getItem(receiptKey(receiptId)),
  set: (receiptId: string, token: string) =>
    sessionStorage.setItem(receiptKey(receiptId), token),
  clear: (receiptId: string) =>
    sessionStorage.removeItem(receiptKey(receiptId)),
};

export const storefront = createStorefrontClient({
  baseUrl: apiOrigin,
  sessionStore,
  getAuthToken: customerTokenStore.get,
});

import { useEffect, useState } from "react";
import type { MerchantApiResponse } from "@craveup/storefront-sdk";
import { storefront } from "./lib/storefront";

export default function App() {
  const [merchant, setMerchant] = useState<MerchantApiResponse | null>(null);

  useEffect(() => {
    storefront.merchant
      .getBySlug(import.meta.env.VITE_MERCHANT_SLUG)
      .then(setMerchant);
  }, []);

  if (!merchant) return <p>Loading...</p>;
  return <h1>{merchant.name}</h1>;
}

const locationId = import.meta.env.VITE_LOCATION_ID;
const session = await storefront.orderingSessions.start(locationId, {
  marketplaceId: "web",
  fulfillmentMethod: "takeout",
});

const cart = await storefront.cart.addItem(locationId, session.cart.id, {
  productId: "prod_margherita",
  quantity: 1,
  selections: [],
  itemUnavailableAction: "remove_item",
});