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 { NotificationProvider } from "../providers/notification";
import s from "./products-by-bestseller.module.css";
import "../app/globals.css";

export default function ProductsByBestseller() {
  return (
    <NotificationProvider>
      <QueryProvider>
        <ProductSearchProvider initialFilters={{ sort: "best_selling" }}>
          <div className="sandpack-demo">
            <div className={s.container}>
              <div className={s.card}>
                <div className={s.header}>Best Selling Products</div>
                <div className={s.content}>
                  <ProductSearchResults isAnimationEnabled={false} />
                </div>
              </div>
            </div>
          </div>
        </ProductSearchProvider>
      </QueryProvider>
    </NotificationProvider>
  );
}
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 { NotificationProvider } from "../providers/notification";
import s from "./products-by-team.module.css";
import "../app/globals.css";

export default function ProductsByTeam() {
  return (
    <NotificationProvider>
      <QueryProvider>
        <ProductSearchProvider initialFilters={{ teams: ["lakers"], sort: "best_selling" }}>
          <div className="sandpack-demo">
            <div className={s.container}>
              <div className={s.card}>
                <div className={s.header}>
                  <TeamSelector
                    availableTeams={[
                      {
                        slug: "lakers",
                        acronym: "LAL",
                        shortName: "Lakers",
                        logo: "https://cdn.nba.com/teams/uploads/sites/1610612747/2021/12/lakers_70x70.svg",
                      },
                      {
                        slug: "bulls",
                        shortName: "Bulls",
                        acronym: "CHI",
                        logo: "https://cdn.nba.com/logos/nba/1610612741/primary/L/logo.svg",
                      },
                      {
                        slug: "rockets",
                        shortName: "Rockets",
                        acronym: "HOU",
                        logo: "https://cdn.nba.com/logos/nba/1610612745/primary/L/logo.svg",
                      },
                    ]}
                  />
                </div>

                <div className={s.content}>
                  <ProductSearchResults isAnimationEnabled={false} />
                </div>
              </div>
            </div>
          </div>
        </ProductSearchProvider>
      </QueryProvider>
    </NotificationProvider>
  );
}
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 { NotificationProvider } from "../providers/notification";
import s from "./products-by-player.module.css";
import "../app/globals.css";

export default function ProductsByPlayer() {
  return (
    <NotificationProvider>
      <QueryProvider>
        <ProductSearchProvider initialFilters={{ players: ["lebron-james"], sort: "best_selling" }}>
          <div className="sandpack-demo">
            <div className={s.container}>
              <div className={s.card}>
                <div className={s.header}>
                  <PlayerSelector
                    players={[
                      {
                        name: "Lebron James",
                        slug: "lebron-james",
                        team: "Los Angeles Lakers",
                        image: "https://cdn.nba.com/headshots/nba/latest/1040x760/2544.png",
                        team: { acronym: "LAL" },
                      },
                      {
                        name: "Austin Reaves",
                        slug: "austin-reaves",
                        team: "Los Angeles Lakers",
                        image: "https://cdn.nba.com/headshots/nba/latest/1040x760/1630559.png",
                        team: { acronym: "LAL" },
                      },
                      {
                        name: "Kobe Bryant",
                        slug: "kobe-bryant",
                        team: "Los Angeles Lakers",
                        image: "https://cdn.nba.com/headshots/nba/latest/1040x760/977.png",
                        team: { acronym: "LAL" },
                      },
                    ]}
                  />
                </div>

                <div className={s.content}>
                  <ProductSearchResults isAnimationEnabled={false} />
                </div>
              </div>
            </div>
          </div>
        </ProductSearchProvider>
      </QueryProvider>
    </NotificationProvider>
  );
}
Open on CodeSandboxOpen Sandbox
# Refined product filtering
Refined product filtering
"use client";

import { QueryProvider } from "../providers/query-client";
import { ProductSearchProvider } from "../providers/product-search";
import { ProductSearchResults } from "../components/product/product-search-results";
import { NotificationProvider } from "../providers/notification";
import { TeamsFilter } from "../components/selectors/teams-filter";
import { PlayersFilter } from "../components/selectors/players-filter";
import { GeneralFilters } from "../components/selectors/general-filters";
import s from "./products-filtered.module.css";
import "../app/globals.css";

export default function ProductsFiltered() {
  return (
    <NotificationProvider>
      <QueryProvider>
        <ProductSearchProvider>
          <div className="sandpack-demo">
            <div className={s.container}>
              <div className={s.filterContainer}>
                <TeamsFilter />
                <PlayersFilter />
                <GeneralFilters />
              </div>

              <div className={s.resultsContainer}>
                <div className={s.card}>
                  <div className={s.content}>
                    <ProductSearchResults isAnimationEnabled={false} />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </ProductSearchProvider>
      </QueryProvider>
    </NotificationProvider>
  );
}
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 { NotificationProvider } from "../providers/notification";
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="sandpack-demo">
      <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>
    </div>
  );
}

export default function AddUpdateDeleteCart() {
  return (
    <NotificationProvider>
      <QueryProvider>
        <CartProvider shouldPersist={false}>
          <ProductSearchProvider>
            <ProductOptionsProvider>
              <Content />
            </ProductOptionsProvider>
          </ProductSearchProvider>
        </CartProvider>
      </QueryProvider>
    </NotificationProvider>
  );
}
Open on CodeSandboxOpen Sandbox
# QR Code Checkout
Checkout with a QR code
"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 { NotificationProvider } from "../providers/notification";
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="sandpack-demo">
      <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}>QR Code Checkout</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>
    </div>
  );
}

export default function SetCartCustomerInfo() {
  return (
    <NotificationProvider>
      <QueryProvider>
        <CartProvider shouldPersist={false}>
          <ProductSearchProvider>
            <ProductOptionsProvider>
              <Content />
            </ProductOptionsProvider>
          </ProductSearchProvider>
        </CartProvider>
      </QueryProvider>
    </NotificationProvider>
  );
}
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 { NotificationProvider } from "../providers/notification";
import { Cart } from "../components/cart";
import { ProductOptionsCard } from "../components/product/product-options-card";
import { Checkout } from "../components/checkout-alt";
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="sandpack-demo">
      <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>
    </div>
  );
}

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