Vanilla JavaScript Quickstart

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 Storefront API request requires a Crave API key passed in the X-API-Key header. Requests still target a concrete locationId in the URL, and the key must be allowed to access that location.

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 Crave Dashboard > Developers > API Development > Step 1 - API Keys. Copy the full token when it is shown, then copy the target locationId from Step 2 - Location IDs on the same page.

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 = 'crv_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 = 'crv_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.

Email Support

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

Platform

Getting Started

Quickstarts

Implementation

AI

Ordering Flow

More Guides

Integrations

Reference

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

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

REST API Reference

Display Menu

Checkout Flow

Error Codes

Slack Community

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