PartnershipsBook Demo
Getting StartedAPI ReferenceAPI Sandbox
API Sandbox
API Sandbox
API Sandbox Overview

The API Sandbox is a live testing environment that helps you explore how the API behaves across key workflows. It includes interactive examples for:

  • Retrieving products by team, popularity, or specific IDs
  • Creating and modifying carts
  • Updating customer and shipping details during checkout

Each sandbox includes sample requests and responses to show how endpoints work in practice. Use it for development, debugging, or validating your integration logic.

# Products by Bestseller
View some of the best-selling products
"use client";

import { QueryProvider } from "../providers/query-client";
import { ProductSearchProvider } from "../providers/product-search";
import { ProductSearchResults } from "../components/product/product-search-results";
import s from "./products-by-bestseller.module.css";
import "../app/globals.css";

function Content() {
  return (
    <div className={s.container}>
      <div className={s.card}>
        <div className={s.header}>Best Selling Products</div>

        <div className={s.content}>
          <ProductSearchResults />
        </div>
      </div>
    </div>
  );
}

export default function ProductsByBestseller() {
  return (
    <QueryProvider>
      <ProductSearchProvider>
        <Content />
      </ProductSearchProvider>
    </QueryProvider>
  );
}
Open on CodeSandboxOpen Sandbox
# Products by Team
Filter products by team
"use client";

import { QueryProvider } from "../providers/query-client";
import { ProductSearchProvider } from "../providers/product-search";
import { ProductSearchResults } from "../components/product/product-search-results";
import { TeamSelector } from "../components/selectors/team-selector";
import s from "./products-by-team.module.css";
import { teams } from "../data";
import "../app/globals.css";

const availableTeams = ["Lakers", "Bulls", "Rockets"].map((x) => teams[x]);

function Content() {
  return (
    <div className={s.container}>
      <div className={s.card}>
        <div className={s.header}>
          <TeamSelector availableTeams={availableTeams} />
        </div>

        <div className={s.content}>
          <ProductSearchResults />
        </div>
      </div>
    </div>
  );
}

export default function ProductsByTeam() {
  return (
    <QueryProvider>
      <ProductSearchProvider>
        <Content />
      </ProductSearchProvider>
    </QueryProvider>
  );
}
Open on CodeSandboxOpen Sandbox
# Products by Player
Filter products by player
"use client";

import { QueryProvider } from "../providers/query-client";
import { ProductSearchProvider } from "../providers/product-search";
import { ProductSearchResults } from "../components/product/product-search-results";
import { PlayerSelector } from "../components/selectors/player-selector";
import { players } from "../data";
import s from "./products-by-player.module.css";
import "../app/globals.css";

function Content() {
  return (
    <div className={s.container}>
      <div className={s.card}>
        <div className={s.header}>
          <PlayerSelector players={players} />
        </div>

        <div className={s.content}>
          <ProductSearchResults />
        </div>
      </div>
    </div>
  );
}

export default function ProductsByPlayer() {
  return (
    <QueryProvider>
      <ProductSearchProvider>
        <Content />
      </ProductSearchProvider>
    </QueryProvider>
  );
}
Open on CodeSandboxOpen Sandbox
# Add, Update, Delete, Cart
Manage products within a cart
"use client";

import { useEffect } from "react";
import { QueryProvider } from "../providers/query-client";
import { CartProvider } from "../providers/cart";
import { ProductOptionsProvider, useProductOptions } from "../providers/product-options";
import { ProductSearchProvider, useProductSearch } from "../providers/product-search";
import { Cart } from "../components/cart";
import { ProductOptionsCard } from "../components/product/product-options-card";
import s from "./add-update-delete-cart.module.css";
import "../app/globals.css";

function Content() {
  const setProduct = useProductOptions((s) => s.setProduct);
  const products = useProductSearch((s) => s.products);

  useEffect(() => {
    if (products.length) {
      setProduct(products[Math.floor(Math.random() * products.length)]);
    }
  }, [products]);

  return (
    <div className={s.container}>
      <div className={s.optionsCard}>
        <ProductOptionsCard />
      </div>

      <div className={s.cartCard}>
        <div className={s.title}>Cart</div>

        <div className={s.cart}>
          <Cart showCheckoutBtn={false} />
        </div>
      </div>
    </div>
  );
}

export default function AddUpdateDeleteCart() {
  return (
    <QueryProvider>
      <CartProvider>
        <ProductSearchProvider>
          <ProductOptionsProvider>
            <Content />
          </ProductOptionsProvider>
        </ProductSearchProvider>
      </CartProvider>
    </QueryProvider>
  );
}
Open on CodeSandboxOpen Sandbox
# Set Cart Customer Info
Associate customer data with carts
"use client";

import { useEffect } from "react";
import { AnimatePresence } from "motion/react";
import { QueryProvider } from "../providers/query-client";
import { CartProvider, useCart } from "../providers/cart";
import { ProductOptionsProvider, useProductOptions } from "../providers/product-options";
import { ProductSearchProvider, useProductSearch } from "../providers/product-search";
import { Cart } from "../components/cart";
import { ProductOptionsCard } from "../components/product/product-options-card";
import { Checkout } from "../components/checkout";
import s from "./set-cart-customer.module.css";
import "../app/globals.css";

function Content() {
  const setProduct = useProductOptions((s) => s.setProduct);
  const products = useProductSearch((s) => s.products);
  const cart = useCart((s) => s.cart);

  useEffect(() => {
    if (products.length) {
      setProduct(products[Math.floor(Math.random() * products.length)]);
    }
  }, [products]);

  return (
    <div className={s.container}>
      <div className={s.optionsCard}>
        <ProductOptionsCard />
      </div>

      <div className={s.cartCard}>
        <div className={s.title}>Cart</div>

        <div className={s.cartContent}>
          <Cart showCheckoutBtn={false} />
        </div>
      </div>

      <div className={s.checkoutCard}>
        <div className={s.title}>Set Customer Info</div>

        <AnimatePresence>
          {!!cart?.length ? (
            <>
              <div className={s.checkoutContent}>
                <Checkout checkoutBtnText="Set Customer info" />
              </div>
            </>
          ) : (
            <div className={s.emptyState}>Try adding some products to the cart, then you can set customer info.</div>
          )}
        </AnimatePresence>
      </div>
    </div>
  );
}

export default function SetCartCustomerInfo() {
  return (
    <QueryProvider>
      <CartProvider>
        <ProductSearchProvider>
          <ProductOptionsProvider>
            <Content />
          </ProductOptionsProvider>
        </ProductSearchProvider>
      </CartProvider>
    </QueryProvider>
  );
}
Open on CodeSandboxOpen Sandbox