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.
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>
);
}
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>
);
}
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>
);
}
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>
);
}