Vanilla JavaScript Quickstart

const API_ORIGIN = "https://api.craveup.com";
const API = `${API_ORIGIN}/api/v1/storefront`;
const merchantSlug = "your-restaurant-slug";
const locationId = "loc_your_location_id";
const storageKeyPart = (value) =>
  encodeURIComponent(value).replaceAll(".", "%2E");
const environmentNamespace = storageKeyPart(new URL(API_ORIGIN).origin);
const cartStorageKey = [
  "crave",
  "storefront",
  "cart",
  "v1",
  environmentNamespace,
  storageKeyPart(merchantSlug),
  storageKeyPart(locationId),
].join(".");

function readCartSession() {
  const raw = sessionStorage.getItem(cartStorageKey);
  if (!raw) return null;

  try {
    const value = JSON.parse(raw);
    if (
      !value ||
      typeof value !== "object" ||
      typeof value.cartId !== "string" ||
      typeof value.accessToken !== "string" ||
      !Number.isInteger(value.revision) ||
      value.revision < 0
    ) {
      throw new Error("Invalid cart session");
    }
    return value;
  } catch {
    sessionStorage.removeItem(cartStorageKey);
    return null;
  }
}

let cartSession = readCartSession();

function mutationHeaders() {
  if (!cartSession) throw new Error("Start an ordering session first.");
  return {
    "Content-Type": "application/json",
    "X-Cart-Token": cartSession.accessToken,
    "If-Match": `"cart-${cartSession.revision}"`,
    "Idempotency-Key": crypto.randomUUID(),
  };
}

async function parse(response) {
  const body = await response.json();
  if (!response.ok) throw body;

  const match = response.headers.get("ETag")?.match(/^(?:W\/)?"cart-(\d+)"$/);
  if (match && cartSession) {
    const nextRevision = Number(match[1]);
    if (nextRevision > cartSession.revision) {
      cartSession.revision = nextRevision;
      sessionStorage.setItem(cartStorageKey, JSON.stringify(cartSession));
    }
  }
  return body;
}

const merchant = await fetch(`${API}/merchant/${merchantSlug}`).then(parse);
const menu = await fetch(`${API}/locations/${locationId}/menus`).then(parse);

const response = await fetch(
  `${API}/locations/${locationId}/ordering-sessions`,
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Idempotency-Key": crypto.randomUUID(),
    },
    body: JSON.stringify({
      marketplaceId: "web",
      fulfillmentMethod: "takeout",
    }),
  },
);

const session = await parse(response);
cartSession = {
  cartId: session.cart.id,
  accessToken: session.cartAccessToken,
  revision: session.cart.revision,
};

sessionStorage.setItem(cartStorageKey, JSON.stringify(cartSession));

const cart = await fetch(
  `${API}/locations/${locationId}/carts/${cartSession.cartId}/items`,
  {
    method: "POST",
    headers: mutationHeaders(),
    body: JSON.stringify({
      productId: "prod_margherita",
      quantity: 1,
      selections: [],
      itemUnavailableAction: "remove_item",
    }),
  },
).then(parse);