Overview
This guide walks you through building a complete purchase flow using the Henry Shopping API. You’ll learn how to search for products, get details, and complete a purchase.
Want to see it in action? Check out our Live
Demo - a fully functional Next.js app that you
can clone and run locally. Prerequisites
Before you begin, make sure you have:
- Your API key from the Henry Dashboard (sign up for access)
- Node.js installed
Setup
First, get your API key from the (Henry Dashboard for access). Then, set your environment variables:
# .env.local
HENRY_API_KEY=your_api_key_here
HENRY_API_URL=https://api.sandbox.henrylabs.ai/v0 # or https://api.henrylabs.ai/v0 for production
Security Tip: Never expose your API key in client-side code. Always proxy
requests through your backend. See our demo
implementation for
best practices. Step 1: Search for Products
Search for products from supported merchants:
// Backend API route (e.g., /api/products/search)
const response = await fetch(
"https://api.sandbox.henrylabs.ai/v0/products/search",
{
method: "POST",
headers: {
"x-api-key": process.env.HENRY_API_KEY,
"Content-Type": "application/json",
},
body: JSON.stringify({
query: "nike shoes",
limit: 10,
}),
},
);
const result = await response.json();
// Returns: { success: true, data: [products...] }
Try searching for popular items like “nike shoes”, “running shoes”, or “air
jordans” for best results.
Step 2: Get Product Details
Fetch detailed information including variants and pricing:
// Backend API route (e.g., /api/products/details)
const response = await fetch(
`https://api.sandbox.henrylabs.ai/v0/products/details?productId=${productId}`,
{
headers: {
"x-api-key": process.env.HENRY_API_KEY,
},
},
);
const result = await response.json();
// Returns detailed product info with variants (size, color, etc.)
- Product title, brand, rating, and reviews
- Available variants (sizes, colors, etc.)
- Store information and pricing
- Product images
Step 3: Add to Cart & Checkout
Add to Cart
// Backend API route (e.g., /api/cart/add)
const response = await fetch("https://api.sandbox.henrylabs.ai/v0/cart/items", {
method: "POST",
headers: {
"x-api-key": process.env.HENRY_API_KEY,
"x-user-id": userId, // Your user's unique identifier
"Content-Type": "application/json",
},
body: JSON.stringify({
productsDetails: [
{
productId: "product_123",
name: "Nike Air Max",
price: "120.00",
quantity: 1,
productLink: "https://store.com/product",
productImageLink: "https://image.url",
metadata: {
Size: "10",
Color: "Black",
},
},
],
}),
});
Create Checkout
// Backend API route (e.g., /api/cart/checkout)
const response = await fetch(
"https://api.sandbox.henrylabs.ai/v0/cart/checkout",
{
method: "POST",
headers: {
"x-api-key": process.env.HENRY_API_KEY,
"x-user-id": userId,
},
},
);
const result = await response.json();
const checkoutUrl = result.data.checkout_url;
// Redirect user to Henry's hosted checkout
window.open(checkoutUrl, "_blank");
Complete Flow Example
Here’s how it all comes together:
// 1. User searches for products
const searchQuery = "nike shoes";
// 2. Display search results
// User clicks on a product
// 3. Fetch and display product details
// User clicks "Buy Now"
// 4. Add to cart with selected variants
const selectedSize = "10";
const selectedColor = "Black";
// 5. Create checkout and redirect
const checkoutUrl = await createCheckout();
window.open(checkoutUrl, "_blank");
What Happens After Checkout?
Once users complete checkout on Henry’s hosted page:
- Order is placed with the merchant
- User receives confirmation email
- You can track order status via the Orders API
// Track order status
const response = await fetch(
`https://api.sandbox.henrylabs.ai/v0/orders/${orderId}`,
{
headers: {
"x-api-key": process.env.HENRY_API_KEY,
},
},
);
Next Steps
