Vanilla JavaScript Quickstart - Crave API Documentation

Build a lightweight ordering page using the Crave REST API directly. This quickstart uses plain JavaScript with fetch — no build tools, no framework, no SDK dependency.

Prerequisites

A Crave API key from the Dashboard
At least one live location in your merchant account
A browser or any environment with fetch (Node.js 18+, Deno, Bun)

1. API basics

Every request to the Storefront API requires a location-scoped API key passed in the X-API-Key header.

curl -H "X-API-Key: YOUR_API_KEY" \
     -H "Content-Type: application/json" \
     https://api.craveup.com/api/v1/locations/{locationId}/...

Generate an API key from the Crave Dashboard under Settings → API Keys. Each key is scoped to a single location.

Keep API keys secret. Never commit them to source control or expose them in client-side code that cannot be trusted. For browser apps, use a server-side proxy or restrict the key to read-only storefront operations.

Base URL: https://api.craveup.com/api/v1 All storefront endpoints are scoped under /locations/{locationId}.

2. Create an API helper

const API_BASE = 'https://api.craveup.com/api/v1';
const API_KEY = 'sk_live_your_api_key'; // replace with your key
const LOCATION_ID = 'loc_your_location_id';

async function api(method, path, body) {
  const res = await fetch(`${API_BASE}${path}`, {
    method,
    headers: {
      'Content-Type': 'application/json',
      'X-API-Key': API_KEY,
    },
    body: body ? JSON.stringify(body) : undefined,
  });

  if (!res.ok) {
    const text = await res.text();
    throw new Error(`API ${res.status}: ${text}`);
  }

  if (res.status === 204) return null;
  return res.json();
}

3. Fetch the merchant

async function getMerchant(slug) {
  return api('GET', `/merchant/${slug}`);
}

// Usage
const merchant = await getMerchant('downtown-pizza');
console.log(merchant.name, merchant.locations.length, 'locations');

4. Start an ordering session

async function startSession() {
  return api('POST', `/locations/${LOCATION_ID}/ordering-sessions`, {
    marketplaceId: LOCATION_ID,
  });
}

const session = await startSession();
const cartId = session.cartId;
console.log('Cart created:', cartId);

5. Add items to the cart

async function addItem(cartId, productId, quantity = 1) {
  return api('POST', `/locations/${LOCATION_ID}/carts/${cartId}/cart-item`, {
    productId,
    quantity,
    selections: [],
    itemUnavailableAction: 'remove_item',
  });
}

const result = await addItem(cartId, 'prod_margherita', 2);
console.log('Cart total:', result.cart.orderTotalWithServiceFeeFormatted);

6. Get the cart

async function getCart(cartId) {
  return api('GET', `/locations/${LOCATION_ID}/carts/${cartId}`);
}

const cart = await getCart(cartId);
console.log(`${cart.totalQuantity} items — ${cart.orderTotalWithServiceFeeFormatted}`);

7. Update customer details

async function setCustomer(cartId, name, email) {
  return api('PUT', `/locations/${LOCATION_ID}/cart/${cartId}/validate-and-update`, {
    customerName: name,
    emailAddress: email,
  });
}

await setCustomer(cartId, 'Alex Johnson', 'alex@example.com');

8. Full HTML example

<!DOCTYPE html>
<html>
<head><title>My Storefront</title></head>
<body>
  <h1 id="name">Loading...</h1>
  <button id="add-btn">Add Margherita</button>
  <p id="cart-info"></p>

  <script type="module">
    const API_BASE = 'https://api.craveup.com/api/v1';
    const API_KEY = 'sk_live_your_api_key';
    const LOCATION_ID = 'loc_your_location_id';
    const SLUG = 'your-restaurant-slug';

    async function api(method, path, body) {
      const res = await fetch(`${API_BASE}${path}`, {
        method,
        headers: { 'Content-Type': 'application/json', 'X-API-Key': API_KEY },
        body: body ? JSON.stringify(body) : undefined,
      });
      if (!res.ok) throw new Error(`API ${res.status}`);
      return res.status === 204 ? null : res.json();
    }

    const merchant = await api('GET', `/merchant/${SLUG}`);
    document.getElementById('name').textContent = merchant.name;

    const session = await api('POST', `/locations/${LOCATION_ID}/ordering-sessions`, {
      marketplaceId: LOCATION_ID,
    });

    document.getElementById('add-btn').addEventListener('click', async () => {
      const result = await api('POST', `/locations/${LOCATION_ID}/carts/${session.cartId}/cart-item`, {
        productId: 'prod_margherita',
        quantity: 1,
        selections: [],
        itemUnavailableAction: 'remove_item',
      });
      document.getElementById('cart-info').textContent =
        `${result.cart.totalQuantity} items — ${result.cart.orderTotalWithServiceFeeFormatted}`;
    });
  </script>
</body>
</html>

Next steps

REST API Reference

See all available REST endpoints.

Display Menu

Fetch menus, categories, and products.

Checkout Flow

Collect customer details and process payments.

Error Codes

Handle API errors gracefully.

Slack Community

Ask questions and get help from the Crave team and community.

Discord

Join our Discord server for real-time discussions.

Email Support

Reach out to hello@craveup.com for direct support.

​Prerequisites

​1. API basics

​2. Create an API helper

​3. Fetch the merchant

​4. Start an ordering session

​5. Add items to the cart

​6. Get the cart

​7. Update customer details

​8. Full HTML example

​Next steps

REST API Reference

Display Menu

Checkout Flow

Error Codes

Slack Community

Discord

Email Support

Prerequisites

1. API basics

2. Create an API helper

3. Fetch the merchant

4. Start an ordering session

5. Add items to the cart

6. Get the cart

7. Update customer details

8. Full HTML example

Next steps