React Native / Expo Quickstart

npx create-expo-app my-storefront --template blank-typescript
cd my-storefront
npx expo install expo-secure-store
npm install --save-exact @craveup/storefront-sdk@2.0.1

EXPO_PUBLIC_CRAVEUP_API_URL=https://api.craveup.com
EXPO_PUBLIC_CRAVEUP_LOCATION_ID=loc_your_location_id
EXPO_PUBLIC_CRAVEUP_MERCHANT_SLUG=your-restaurant-slug

import * as SecureStore from "expo-secure-store";
import {
  createStorefrontClient,
  type StorefrontCartSession,
  type StorefrontSessionStore,
} from "@craveup/storefront-sdk";

const apiUrl = process.env.EXPO_PUBLIC_CRAVEUP_API_URL;
const merchantSlug = process.env.EXPO_PUBLIC_CRAVEUP_MERCHANT_SLUG;
if (!apiUrl || !merchantSlug) throw new Error("Missing Storefront configuration");

const apiOrigin = new URL(apiUrl).origin;
const secureKeyPart = (value: string) =>
  Array.from(value, (character) =>
    character.codePointAt(0)!.toString(16).padStart(6, "0"),
  ).join("");
const environmentNamespace = secureKeyPart(apiOrigin);
const merchantNamespace = secureKeyPart(merchantSlug);
const key = (
  kind: "cart" | "customer" | "receipt",
  resourceId: string,
) =>
  [
    "storefront",
    kind,
    "v1",
    environmentNamespace,
    merchantNamespace,
    secureKeyPart(resourceId),
  ].join(".");
const cartKey = (locationId: string) => key("cart", locationId);
const customerKey = key("customer", "jwt");
const receiptKey = (receiptId: string) => key("receipt", receiptId);

async function readCartSession(
  locationId: string,
): Promise<StorefrontCartSession | null> {
  const storageKey = cartKey(locationId);
  const raw = await SecureStore.getItemAsync(storageKey);
  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 {
    await SecureStore.deleteItemAsync(storageKey);
    return null;
  }
}

export const sessionStore: StorefrontSessionStore = {
  async get(locationId) {
    return readCartSession(locationId);
  },
  async set(session) {
    await SecureStore.setItemAsync(
      cartKey(session.locationId),
      JSON.stringify(session),
    );
  },
  async clear(locationId) {
    await SecureStore.deleteItemAsync(cartKey(locationId));
  },
};

export const customerTokenStore = {
  get: () => SecureStore.getItemAsync(customerKey),
  set: (token: string) => SecureStore.setItemAsync(customerKey, token),
  clear: () => SecureStore.deleteItemAsync(customerKey),
};

export const receiptTokenStore = {
  get: (receiptId: string) =>
    SecureStore.getItemAsync(receiptKey(receiptId)),
  set: (receiptId: string, token: string) =>
    SecureStore.setItemAsync(receiptKey(receiptId), token),
  clear: (receiptId: string) =>
    SecureStore.deleteItemAsync(receiptKey(receiptId)),
};

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

const merchant = await storefront.merchant.getBySlug(
  process.env.EXPO_PUBLIC_CRAVEUP_MERCHANT_SLUG!,
);

const locationId = process.env.EXPO_PUBLIC_CRAVEUP_LOCATION_ID!;
const session = await storefront.orderingSessions.start(locationId, {
  marketplaceId: "mobile",
  fulfillmentMethod: "takeout",
});

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