> ## Documentation Index
> Fetch the complete documentation index at: https://docs.craveup.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Vanilla JavaScript Quickstart
> Use the Crave REST API with plain JavaScript — no framework required.
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](https://craveup.com/login)
* At least one live location in your merchant account
* A browser or any environment with `fetch` (Node.js 18+, Deno, Bun)
## 1. API basics
**Base URL:** `https://api.craveup.com/api/v1`
All storefront endpoints are scoped under `/locations/{locationId}`.
## 2. Create an API helper
```js filename="storefront.js" theme={null}
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
```js filename="storefront.js" theme={null}
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
```js filename="storefront.js" theme={null}
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
```js filename="storefront.js" theme={null}
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
```js filename="storefront.js" theme={null}
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
```js filename="storefront.js" theme={null}
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
```html filename="index.html" theme={null}
My Storefront
Loading...
```
## Next steps
See all available REST endpoints.
Fetch menus, categories, and products.
Collect customer details and process payments.
Handle API errors gracefully.