Add real ordering to any website.

<script
  async
  src="https://js.usebatch.shop/v1.js"
  data-batch-shop="your-shop-slug"
  data-batch-theme="auto"></script>

npm install @batch/sdk

import { createClient, createCartStore, money } from '@batch/sdk';
// React entry:
import { BatchProvider, useBatch, Menu } from '@batch/sdk/react';
// Optional starter theme:
import '@batch/sdk/styles/alphaprism.css';

<script type="module">
  import { createClient, createCartStore, money }
    from 'https://js.usebatch.shop/v1/batch.esm.js';

  const client = createClient({ shop: 'your-shop-slug' });
  const cart = createCartStore(client);
  // …render products, wire your cart + an availability-gated date picker, then checkout…
</script>

<script async src="https://js.usebatch.shop/v1.js"
        data-batch-shop="mayas-cakes" data-batch-theme="auto"></script>

<batch-cart-button></batch-cart-button>
<batch-menu></batch-menu>
<button data-batch-buy="prod_choc_cake">Order the chocolate cake</button>

import { createClient, createCartStore } from '@batch/sdk';
// static HTML, no build? import from 'https://js.usebatch.shop/v1/batch.esm.js' (Option C)

const client = createClient({ shop: 'mayas-cakes' });
const cart = createCartStore(client);
await cart.hydrate();                 // load any persisted cart

const products = await client.getProducts();
// …render products in your own markup…

await cart.add({ product_id: products[0].id, qty: 1 });
const { token } = cart.getState();
const session = await client.createCheckoutSession({ cart_token: token! });
// branch on mode — card shops get a Stripe URL, pay-at-pickup shops don't:
location.assign(session.mode === 'stripe' ? session.checkout_url : session.order_status_url);

<batch-menu></batch-menu>
<batch-menu data-category="cakes"></batch-menu>   <!-- filter to one category -->
<div data-batch-menu data-category="cookies"></div>  <!-- upgrade your own element -->

<batch-buy product="prod_choc_cake" qty="1" label="Add to order"></batch-buy>

<!-- or upgrade any element (e.g. your own styled button) -->
<button data-batch-buy="prod_choc_cake" data-batch-qty="2">Add two</button>

<batch-cart-button label="Your order"></batch-cart-button>

<batch-calendar></batch-calendar>

<batch-quote-form data-product="prod_custom_cake"></batch-quote-form>

:root {
  --batch-bg:        #f7f2ea;  /* drawer / modal background   (fallback #fffdf8) */
  --batch-surface:   #fffdf9;  /* card / input background     (fallback #fff)    */
  --batch-ink:       #191410;  /* primary text                (fallback #2b2320) */
  --batch-ink-soft:  #6f6257;  /* muted text                  (fallback #7a6f66) */
  --batch-accent:    #b4552d;  /* buttons, selected states    (fallback #b4552d) */
  --batch-accent-2:  #4c6b54;  /* secondary accent                              */
  --batch-on-accent: #fffdf9;  /* text on accent              (fallback #fff)    */
  --batch-radius:    1.25rem;  /* corner radius               (fallback 0.75rem) */
}

// script-tag global is `Batch`
const ctx = Batch.getContext();
ctx?.events.on('cart:updated', ({ count, subtotalCents }) => {
  document.querySelector('#cart-count')!.textContent = String(count);
});

import { createClient, type BatchClient } from '@batch/sdk';

const client: BatchClient = createClient({
  shop: 'mayas-cakes',                        // required — the shop slug
  // baseUrl: 'http://localhost:3000/api/v1', // optional — defaults to the production apex
});

import { money } from '@batch/sdk';

function productTile(p: PublicProduct, currency: string): string {
  const price = p.price_cents !== null
    ? money(p.price_cents, currency)             // integer cents → "$32.00"
    : (p.price_note ?? 'Priced by quote');
  return `<article class="tile">
    <img class="tile__photo" src="${p.images[0] ?? ''}" alt="${p.name}" />
    <h3>${p.name}</h3><p>${price}</p>
    <button data-product="${p.id}">Add</button>
  </article>`;
}

const shop = await client.getShop();
const products = await client.getProducts();
document.querySelector('#menu')!.innerHTML =
  products.map((p) => productTile(p, shop.currency)).join('');

/* entirely your design — Batch imposes nothing here */
.tile__photo { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; }

import { createCartStore, type CartState } from '@batch/sdk';

const cart = createCartStore(client);       // 2nd arg: custom storage (default localStorage)
await cart.hydrate();                        // once on boot: load persisted cart
const unsubscribe = cart.subscribe((state: CartState) => renderCart(state));

interface CartState {
  status: 'idle' | 'loading' | 'ready' | 'error';
  token: string | null;
  items: CartItem[];
  pricing: CartPricing | null;      // pricing.subtotal_cents — the server total
  fulfillment: Record<string, unknown> | null;
  contact: Record<string, unknown> | null;
  errorCode: string | null;         // stable code when status === 'error'
  errorTitle: string | null;        // human title — safe to show verbatim
}

import {
  optionsOf, collectibleOptions, needsConfiguration,
  priceHintCents, missingRequired,
} from '@batch/sdk';

const options = optionsOf(product);            // ProductOption[]  ([] if none/unparseable)
if (needsConfiguration(product)) {             // true ⇒ show a picker before adding
  const pickable = collectibleOptions(options); // drops 'photos' (no public upload path yet)
  // …render your own UI for each option…
}

// live display hint while choosing (NOT the charged price — server reprices):
const hint = priceHintCents(product.price_cents ?? 0, options, selections);

// pre-submit validation, mirroring the server's required checks:
const missing = missingRequired(options, selections); // [{ option_id, label }]

import { monthGrid, selectableDates, windowsOf, windowDisplay } from '@batch/sdk';

const grid = monthGrid(2026, 8);              // { label:"August 2026", cells:[42], from, to }
const days = await client.getAvailability({ from: grid.from, to: grid.to });
const open = selectableDates(days);           // Set<'YYYY-MM-DD'> — the pickable days

for (const cell of grid.cells) {              // 'YYYY-MM-DD' | null (padding)
  if (!cell) continue;
  const selectable = open.has(cell);          // closed/full/past are simply absent
  // …render a day button; add `disabled` when !selectable…
}

// pickup windows — read via windowsOf(), never .windows directly:
const byDate = new Map(days.map((d) => [d.date, d]));
for (const w of windowsOf(byDate.get('2026-08-01'))) {
  const label = w.label;         // ← submit this as fulfillment.window
  const text  = windowDisplay(w); // "Morning (9:00–11:00)" for the UI
}

await cart.setCheckoutDetails(
  { method: 'pickup', on_date: '2026-08-01', window: 'Morning (9–11am)' },
  { name: 'Dana R.', email: 'dana@example.com', phone: '(503) 555-0148' },
);

await cart.setCheckoutDetails(
  {
    method: 'delivery',
    on_date: '2026-08-01',
    address: { street: '1412 SE Morrison St', city: 'Portland', zip: '97214' },
  },
  { name: 'Dana R.', email: 'dana@example.com', phone: '(503) 555-0148' },
);

import {
  createClient, createCartStore,
  optionsOf, collectibleOptions, missingRequired, priceHintCents, money,
  monthGrid, selectableDates, nextMonth, prevMonth,
  type CartState, type OptionSelections, type ProductOption,
  type PublicProduct, type PublicShop,
} from '@batch/sdk';

const client = createClient({ shop: 'mayas-cakes' });
const cart = createCartStore(client);

let shop: PublicShop;
let catalog: PublicProduct[] = [];
const $ = <T extends HTMLElement>(sel: string) => document.querySelector<T>(sel)!;

async function boot() {
  [shop, catalog] = await Promise.all([client.getShop(), client.getProducts()]);
  renderMenu();
  cart.subscribe(renderCart);
  await Promise.all([cart.hydrate(), renderDatePicker()]);
}

// ── custom product grid ──────────────────────────────────────────────
function renderMenu() {
  $('#menu').innerHTML = catalog.map((p) => {
    const price = p.price_cents !== null
      ? money(p.price_cents, shop.currency) : (p.price_note ?? 'By quote');
    return `<article class="tile" data-id="${p.id}">
      <img class="tile__img" src="${p.images[0] ?? ''}" alt="${p.name}" />
      <h3>${p.name}</h3><p class="tile__price">${price}</p>
      <button class="tile__add" data-id="${p.id}">Add to order</button>
    </article>`;
  }).join('');
}

$('#menu').addEventListener('click', (e) => {
  const btn = (e.target as HTMLElement).closest<HTMLButtonElement>('.tile__add');
  if (!btn) return;
  const product = catalog.find((p) => p.id === btn.dataset.id);
  if (!product) return;
  if (collectibleOptions(optionsOf(product)).length > 0) openOptionModal(product);
  else void addToCart(product.id, {});
});

async function addToCart(productId: string, selections: OptionSelections) {
  await cart.add({ product_id: productId, qty: 1, selections });
  const s = cart.getState();
  if (s.status === 'error') alert(s.errorTitle ?? 'Could not add — try again.');
}

// ── custom option modal ──────────────────────────────────────────────
function openOptionModal(product: PublicProduct) {
  const options = collectibleOptions(optionsOf(product));
  const selections: OptionSelections = {};
  const modal = $('#option-modal');
  modal.hidden = false;

  const paint = () => {
    const hint = priceHintCents(product.price_cents ?? 0, options, selections);
    $('#option-price').textContent = money(hint, shop.currency);
  };

  $('#option-body').innerHTML = options.map(optionMarkup).join('');
  $('#option-body').onclick = (e) => {
    const chip = (e.target as HTMLElement).closest<HTMLButtonElement>('[data-opt]');
    if (!chip) return;
    const { opt, choice, kind } = chip.dataset;
    if (kind === 'select') selections[opt!] = choice!;
    else {
      const arr = Array.isArray(selections[opt!]) ? (selections[opt!] as string[]) : [];
      selections[opt!] = arr.includes(choice!) ? arr.filter((c) => c !== choice) : [...arr, choice!];
    }
    paint();
  };
  $<HTMLButtonElement>('#option-confirm').onclick = async () => {
    const missing = missingRequired(options, selections);
    if (missing.length) {
      $('#option-error').textContent = `Choose ${missing.map((m) => m.label).join(', ')}.`;
      return;
    }
    modal.hidden = true;
    await addToCart(product.id, selections);
  };
  paint();
}

function optionMarkup(o: ProductOption): string {
  if (o.type === 'text' || o.type === 'photos') return '';
  const chips = o.choices.map((c) =>
    `<button data-opt="${o.id}" data-choice="${c.id}" data-kind="${o.type}">
      ${c.label}${c.price_delta_cents ? ` +${money(c.price_delta_cents, shop.currency)}` : ''}
    </button>`).join('');
  return `<fieldset><legend>${o.label}</legend>${chips}</fieldset>`;
}

// ── your cart UI ─────────────────────────────────────────────────────
function renderCart(state: CartState) {
  $('#cart-count').textContent = String(state.items.reduce((n, i) => n + i.qty, 0));
  $('#cart-subtotal').textContent = state.pricing
    ? money(state.pricing.subtotal_cents, shop.currency) : '—';
  $<HTMLButtonElement>('#checkout').disabled =
    state.items.length === 0 || state.status === 'loading';
}

// ── availability-gated pickup date picker (never offers a closed day) ─
const now = new Date();
let calMonth: [number, number] = [now.getFullYear(), now.getMonth() + 1];
let pickedDate: string | null = null;

async function renderDatePicker() {
  const grid = monthGrid(...calMonth);
  const days = await client.getAvailability({ from: grid.from, to: grid.to });
  const open = selectableDates(days);                        // Set<'YYYY-MM-DD'>
  $('#cal-label').textContent = grid.label;
  $('#cal-grid').innerHTML = grid.cells.map((cell) => {
    if (!cell) return `<span class="cal__pad"></span>`;
    const on = open.has(cell);                               // closed/full/past are absent
    return `<button type="button" class="cal__day" data-date="${cell}"
      ${on ? '' : 'disabled aria-disabled="true"'}
      ${cell === pickedDate ? 'aria-pressed="true"' : ''}>${Number(cell.slice(-2))}</button>`;
  }).join('');
}
$('#cal-grid').addEventListener('click', (e) => {
  const btn = (e.target as HTMLElement).closest<HTMLButtonElement>('.cal__day');
  if (!btn || btn.disabled) return;                          // closed days can't be chosen
  pickedDate = btn.dataset.date!;
  void renderDatePicker();                                   // reflect the selection
});
$('#cal-prev').addEventListener('click', () => { calMonth = prevMonth(...calMonth); void renderDatePicker(); });
$('#cal-next').addEventListener('click', () => { calMonth = nextMonth(...calMonth); void renderDatePicker(); });

// ── checkout: details → card OR pay-at-pickup ────────────────────────
$('#checkout').addEventListener('click', async () => {
  const name = $<HTMLInputElement>('#name').value.trim();
  const email = $<HTMLInputElement>('#email').value.trim();
  const phone = $<HTMLInputElement>('#phone').value.trim();
  // phone is REQUIRED by the API; be as lenient as the server is (≥7 digits)
  if (!pickedDate || !name || !email.includes('@') || phone.replace(/\D/g, '').length < 7) {
    $('#checkout-error').textContent = 'Pick an available date, your name, email, and a phone number.';
    return;
  }
  await cart.setCheckoutDetails({ method: 'pickup', on_date: pickedDate }, { name, email, phone });
  const s = cart.getState();
  if (s.status === 'error') {
    // a picked date can't 422 here — but a slot can sell out between pick and checkout
    $('#checkout-error').textContent = s.errorTitle ?? 'That date just filled up — pick another.';
    void renderDatePicker();
    return;
  }
  const session = await client.createCheckoutSession({ cart_token: s.token! });
  // card shop → Stripe; pay-at-pickup shop → hosted status page with instructions
  location.assign(session.mode === 'stripe' ? session.checkout_url : session.order_status_url);
});

void boot();

const session = await client.createCheckoutSession({ cart_token: state.token! });

if (session.mode === 'stripe') {
  location.assign(session.checkout_url);      // Stripe-hosted checkout
} else {
  location.assign(session.order_status_url);  // manual-payment shop → instructions page
}

// type CheckoutSession =
//   | { mode: 'stripe'; checkout_url; order_status_url; order_number }
//   | { mode: 'manual';               order_status_url; order_number }

import { BatchProvider, useBatch, CartButton, Menu, BuyButton } from '@batch/sdk/react';

function App() {
  return (
    <BatchProvider shop="mayas-cakes" theme="auto">
      <CartButton label="Your order" />
      <Menu category="cakes" />
      <BuyButton product="prod_choc_cake" qty={1} label="Add" />
    </BatchProvider>
  );
}

import { useMemo, useSyncExternalStore } from 'react';
import { createClient, createCartStore } from '@batch/sdk';

function useCart(shop: string) {
  const { client, cart } = useMemo(() => {
    const client = createClient({ shop });
    return { client, cart: createCartStore(client) };
  }, [shop]);
  const state = useSyncExternalStore(cart.subscribe, cart.getState, cart.getState);
  return { client, cart, state };
}

class BatchApiError extends Error {
  code: string;    // stable problem code, e.g. 'capacity_gone', 'option_required'
  status: number;  // HTTP status
  title: string;   // human-readable; safe to show verbatim
}
class BatchNetworkError extends Error {
  cause?: unknown; // fetch failed, timed out, or the body was empty/non-JSON
}

const s = cart.getState();
if (s.status === 'error') {
  // s.errorCode: stable code · s.errorTitle: show this to the shopper
  showBanner(s.errorTitle ?? 'Something went wrong — try again.');
}

interface PublicShop {
  id: string; slug: string; name: string; bio: string | null;
  currency: string; timezone: string; city: string | null;
  instagram_handle: string | null;
  my_orders_url?: string;                // the shop's passwordless order-lookup page
  fulfillment?: {                        // absent on older servers = pickup only
    mode: 'pickup' | 'delivery' | 'both';
    pickup_note?: string | null; delivery_note?: string | null;
  };
}

// what setCheckoutDetails() sends — phone is REQUIRED, address only on delivery
interface CheckoutFulfillment {
  method: 'pickup' | 'delivery'; on_date: string; window?: string;
  address?: { street: string; city: string; zip: string };
}
interface CheckoutContact { name: string; email: string; phone: string; }
interface PublicProduct {
  id: string; kind: string; name: string; description: string | null;
  price_cents: number | null; price_note: string | null; category: string | null;
  images: string[]; options: unknown;   // ← read via optionsOf(product)
}
type ProductOption =
  | { id; label; type: 'select'; required: boolean; choices: OptionChoice[] }
  | { id; label; type: 'multi';  max?: number;      choices: OptionChoice[] }
  | { id; label; type: 'text';   required: boolean; max_len?: number }
  | { id; label; type: 'photos'; max?: number };
type OptionSelections = Record<string, string | string[]>;

interface AvailabilityDay {
  date: string; open: boolean; remaining_orders: number | null;
  windows: unknown[];                    // ← read via windowsOf(day)
  products?: Record<string, number>;
}
interface CartItem { product_id: string; qty: number; selections?: OptionSelections; }
interface CartPricing { subtotal_cents: number; [key: string]: unknown; }

type CheckoutSession =
  | { mode: 'stripe'; checkout_url: string; order_status_url: string; order_number: number }
  | { mode: 'manual'; order_status_url: string; order_number: number };

interface QuoteRequest {
  product_id?: string; event_date: string; details: string;
  fulfillment_method?: 'pickup' | 'delivery';
  contact: { name: string; email: string; phone?: string }; marketing_opt_in?: boolean;
}

createClient, DEFAULT_BASE_URL, type BatchClient
createCartStore, mergeLine, sameLine, type CartState, CartStatus, CartStore, KeyValueStorage
init, bootFromScriptTag, getContext, cartCount, type BatchContext, BatchEvents, BatchInitOptions
createEmitter, type Emitter
optionsOf, collectibleOptions, needsConfiguration, priceHintCents, missingRequired,
  windowsOf, windowDisplay, type SelectionIssue
themeVarsFromDesign, applyThemeVars
money, dateLabel
monthGrid, nextMonth, prevMonth, isoOf, selectableDates, type MonthGrid
BASE_CSS, injectStyles, STYLE_ELEMENT_ID
BatchApiError, BatchNetworkError, SDK_VERSION
types: AvailabilityDay, BatchClientConfig, Cart, CartItem, CartPricing, CheckoutSession,
  OptionChoice, OptionSelections, ProductOption, PublicDesign, PublicProduct, PublicShop,
  QuoteAck, QuoteContact, QuoteRequest

BatchProvider, useBatch, BuyButton, CartButton, Menu, QuoteForm, Calendar