Carts

This guide assumes a running environment. The local setup provides one, with a URL and an OrbCart publishable key. Run these examples from a storefront in the source workspace; npm packages are not available yet.

Connect once

import { createCommerce } from "@orbcart/client";

const commerce = createCommerce({
  url: "http://localhost:8787",
  key: "pk_test_replace_with_your_orbcart_key",
});

Use the OrbCart publishable key written by orbcart dev, not your Stripe key. For a deployed browser storefront, allow its origin in the Channel configuration.

Add your first Line

const cart = await commerce.cart();
const current = await cart.add("BACKPACK-30-GREEN", { quantity: 2 });

cart is your handle for making calls. current is the server's answer: Lines, shipping methods, missing details and an estimate. Every Cart mutation returns that complete view.

The browser sends a reference and quantity. Prices always come from your server.

Change a quantity

Use a Line ID from current.lines, not the Offer reference:

const line = current.lines[0];

if (line) {
  await cart.setQuantity(line.id, 3);
  await cart.remove(line.id);
}

Open the Cart again

Save cart.token in your storefront's session. After a reload:

const cart = commerce.openCart(savedToken);
const current = await cart.read();

openCart() creates a handle; read() fetches its current state.

Treat the token like a password

A Cart token grants access to that Cart. Never put it in a URL, analytics event or log. A server-rendered storefront can keep it in an HttpOnly, Secure, SameSite cookie and make requests through its server.

Apply a discount code

await cart.enterCode("WILLKOMMEN10");
await cart.removeCode("WILLKOMMEN10");

That code exists in Nordgrat. Your own codes belong in your Channel configuration. OrbCart calculates the discount; the storefront displays the returned amounts.

Keep shopping after an Order

const nextCart = await commerce.continueShopping(cart.token);
await nextCart.add("BACKPACK-30-GREEN");

Only do this once the previous Cart is ordered. A pending payment is still the same purchase. In React, CartProvider handles this transition for you.

Turn the Cart into a Quote →