How to Integrate Bolt.new with Spocket

Spocket's API is not as openly documented or accessible as platforms like Stripe, Twilio, or Shopify. Before building, verify your access level. Log into your Spocket account and navigate to Settings → Developer/API (the exact location varies by subscription tier). If you do not see an API section, your current plan does not include developer API access — upgrade to Empire plan or contact Spocket's partner team at partners.spocket.co to discuss API access for your use case. Spocket's available API endpoints cover: product browsing (search the Spocket marketplace), product import (add a supplier product to your store catalog), inventory (check stock levels for imported products), orders (create fulfillment orders with suppliers, get order status and tracking), and suppliers (list available suppliers and their shipping times by region). The authentication method for Spocket's API uses an API key sent as a Bearer token in the Authorization header. Some API documentation shows an access_token flow — check the current Spocket developer documentation for the exact authentication pattern in your account. An important practical consideration: Spocket's primary value for dropshippers is the pre-negotiated supplier relationships, product vetting, and the managed fulfillment process. The API endpoints give you programmatic access to these capabilities, but the full Spocket ecosystem (supplier onboarding, dispute resolution, quality control) runs through their platform. Build your integration to use the API for automation while relying on the Spocket platform for supplier management. During development in Bolt's WebContainer, all outbound HTTPS calls to Spocket's API endpoint work correctly — there are no TCP socket requirements. Products can be fetched, orders placed, and status checked from the Bolt preview. The only capability requiring a deployed URL is Spocket's webhook system for push notifications on order status changes.

1// lib/spocket.ts
2const BASE = process.env.SPOCKET_BASE_URL ?? 'https://app.spocket.co/api';
3const API_KEY = process.env.SPOCKET_API_KEY!;
4
5export interface SpocketProduct {
6  id: string;
7  name: string;
8  description: string;
9  images: string[];
10  retail_price: number;
11  cost: number;
12  inventory: number;
13  supplier_country: string;
14  shipping_time_min: number;
15  shipping_time_max: number;
16  category: string;
17  variants: Array<{
18    id: string;
19    name: string;
20    price: number;
21    inventory: number;
22  }>;
23}
24
25export interface SpocketOrder {
26  id: string;
27  status: 'pending' | 'processing' | 'shipped' | 'delivered' | 'cancelled';
28  tracking_number?: string;
29  tracking_url?: string;
30  estimated_delivery?: string;
31  line_items: Array<{ product_id: string; quantity: number; price: number }>;
32}
33
34async function spocketRequest<T>(
35  endpoint: string,
36  options: RequestInit = {}
37): Promise<T> {
38  const res = await fetch(`${BASE}${endpoint}`, {
39    ...options,
40    headers: {
41      Authorization: `Bearer ${API_KEY}`,
42      'Content-Type': 'application/json',
43      Accept: 'application/json',
44      ...options.headers,
45    },
46  });
47  if (!res.ok) {
48    const err = await res.text();
49    throw new Error(`Spocket API error (${res.status}): ${err}`);
50  }
51  return res.json();
52}
53
54export const spocket = {
55  searchProducts: (
56    query: string,
57    filters: { country?: string; category?: string; min_margin?: number } = {}
58  ) => {
59    const params = new URLSearchParams({ q: query, ...filters as Record<string, string> });
60    return spocketRequest<{ products: SpocketProduct[]; total: number }>(
61      `/products?${params}`
62    );
63  },
64  getProduct: (id: string) =>
65    spocketRequest<SpocketProduct>(`/products/${id}`),
66  importProduct: (productId: string) =>
67    spocketRequest<{ success: boolean; storeProductId: string }>(
68      '/imports', { method: 'POST', body: JSON.stringify({ product_id: productId }) }
69    ),
70  getOrders: (status?: string) =>
71    spocketRequest<{ orders: SpocketOrder[] }>(`/orders${status ? '?status=' + status : ''}`),
72  createOrder: (
73    productId: string,
74    variantId: string,
75    quantity: number,
76    shippingAddress: Record<string, string>
77  ) =>
78    spocketRequest<SpocketOrder>('/orders', {
79      method: 'POST',
80      body: JSON.stringify({ product_id: productId, variant_id: variantId, quantity, shipping_address: shippingAddress }),
81    }),
82};

Create Next.js API routes that proxy Spocket product data to your React frontend. The catalog routes handle product search with filtering, individual product detail, and the product import flow (adding a Spocket product to your store's catalog for dropshipping). The product search route should validate and pass through filter parameters: country of supplier origin (US, EU, CA), product category (apparel, beauty, home, electronics, etc.), price range, and minimum margin percentage. The margin filter is particularly useful for dropshippers who want to ensure profitability before importing — calculate margin as (retail_price - cost) / retail_price * 100. Product import is a key workflow: when a store owner finds a Spocket product they want to sell, the import action adds it to their store catalog, establishes the supplier relationship, and starts inventory tracking. The import endpoint returns a store product ID that you use to link your store's product listings to the underlying Spocket supplier product. For inventory management, Spocket tracks stock levels at the supplier. When a customer places an order in your store, check current Spocket inventory before confirming. Build an API route that can batch-check inventory for multiple product IDs so the cart/checkout can show accurate availability without making a separate API call per product. Think about caching strategy: product prices and availability change less frequently than you might expect. Cache the product catalog API response for 5-15 minutes using Next.js's built-in fetch caching or a simple in-memory cache. This reduces Spocket API calls and improves your storefront's response time for end customers.

1// app/api/spocket/products/route.ts
2import { NextResponse } from 'next/server';
3import { spocket } from '@/lib/spocket';
4
5export async function GET(request: Request) {
6  try {
7    const { searchParams } = new URL(request.url);
8    const query = searchParams.get('search') ?? '';
9    const filters: Record<string, string> = {};
10
11    const country = searchParams.get('country');
12    const category = searchParams.get('category');
13    const minPrice = searchParams.get('min_price');
14    const maxPrice = searchParams.get('max_price');
15
16    if (country) filters.country = country;
17    if (category) filters.category = category;
18    if (minPrice) filters.min_price = minPrice;
19    if (maxPrice) filters.max_price = maxPrice;
20
21    const data = await spocket.searchProducts(query, filters);
22
23    // Add margin calculation to each product
24    const products = data.products.map((p) => ({
25      ...p,
26      margin: p.retail_price > 0
27        ? Math.round(((p.retail_price - p.cost) / p.retail_price) * 100)
28        : 0,
29      shipping_description:
30        p.shipping_time_min === p.shipping_time_max
31          ? `${p.shipping_time_min} days`
32          : `${p.shipping_time_min}-${p.shipping_time_max} days`,
33    }));
34
35    // Filter by minimum margin if specified
36    const minMargin = Number(searchParams.get('min_margin') ?? '0');
37    const filtered = minMargin > 0
38      ? products.filter((p) => p.margin >= minMargin)
39      : products;
40
41    return NextResponse.json({ products: filtered, total: filtered.length });
42  } catch (error: unknown) {
43    const e = error as { message: string };
44    return NextResponse.json({ error: e.message }, { status: 500 });
45  }
46}

Create the React frontend for the product discovery and import workflow. This is the store owner's tool for browsing Spocket's catalog and selecting products to sell. The UX has two modes: discovery (browsing available products before import) and catalog management (viewing imported products with live inventory status). The discovery interface should emphasize the key Spocket differentiators: supplier country (US/EU flag badges), shipping time (a major selling point — 3-7 days vs 15-45 days), and profit margin (calculated from retail price and cost). Use visual indicators — color-coded margin badges (green for 50%+, yellow for 30-50%, orange for below 30%) and shipping time labels that make the US/EU advantage obvious. The import workflow should be a single-click action: the store owner clicks 'Import to Store' on a product card, your Bolt app calls the import API route, and the product appears in their catalog. After import, show the Spocket product linked to the store with a 'Sync Inventory' button that checks current stock levels. For the order fulfillment view, display a clear status pipeline: Order Received → Sent to Supplier → Supplier Processing → Shipped → Delivered. Each stage maps to Spocket's order status values. When an order ships, Spocket provides a tracking number and carrier — display these prominently so store owners can answer customer shipping questions without logging into the Spocket dashboard.

The core automation value of Spocket integration is order fulfillment: when a customer buys from your store, you automatically place a corresponding order with the Spocket supplier. This triggers the supplier to pack and ship directly to the customer (dropshipping), eliminating the need to hold inventory. The order creation flow: your store receives a customer order (via Shopify, WooCommerce, or your custom checkout) → your Bolt app sends the order to Spocket API → Spocket places the order with the supplier → supplier ships and provides tracking → Spocket updates the order status and tracking number. For inventory sync: Spocket tracks supplier stock levels. Implement a nightly sync (or triggered before checkout) that fetches current inventory for your imported products and updates your store catalog. Products that go out of stock at the supplier should be automatically marked unavailable in your store. Use a cron job on Netlify (via Netlify Scheduled Functions) or a webhook from Spocket (if available) to trigger inventory sync. Edge cases to handle: supplier runs out of stock after order is placed but before shipping (Spocket handles refund/cancellation), customer wants to return a Spocket-fulfilled item (handled through Spocket's return process, not directly with supplier), price changes by supplier (Spocket reflects these via the product API — sync prices regularly). Each of these scenarios has a Spocket API action or policy that your integration should handle gracefully. During Bolt WebContainer development, the order creation API call to Spocket works over HTTPS — you can test placing orders in the Bolt preview. Use test or sandbox credentials if Spocket provides them. If not, use a real low-cost product for integration testing and cancel immediately after confirming the API works.

1// app/api/fulfillment/create/route.ts
2import { NextResponse } from 'next/server';
3import { spocket } from '@/lib/spocket';
4
5interface ShippingAddress {
6  first_name: string;
7  last_name: string;
8  address1: string;
9  city: string;
10  province: string;
11  zip: string;
12  country: string;
13  phone: string;
14}
15
16export async function POST(request: Request) {
17  try {
18    const {
19      productId,
20      variantId,
21      quantity,
22      shippingAddress,
23    }: {
24      productId: string;
25      variantId: string;
26      quantity: number;
27      shippingAddress: ShippingAddress;
28    } = await request.json();
29
30    if (!productId || !variantId || !quantity || !shippingAddress) {
31      return NextResponse.json(
32        { error: 'productId, variantId, quantity, and shippingAddress are required' },
33        { status: 400 }
34      );
35    }
36
37    const order = await spocket.createOrder(
38      productId,
39      variantId,
40      quantity,
41      shippingAddress as unknown as Record<string, string>
42    );
43
44    return NextResponse.json({
45      success: true,
46      spocketOrderId: order.id,
47      status: order.status,
48    }, { status: 201 });
49  } catch (error: unknown) {
50    const e = error as { message: string };
51    return NextResponse.json({ error: e.message }, { status: 500 });
52  }
53}

Deploy your Bolt application to Netlify for a stable public URL, then configure Spocket webhooks for real-time order status notifications. In Bolt's WebContainer, your app can call Spocket's API outbound (product search, order creation, status polling) but Spocket cannot send webhook events to the WebContainer since it has no public address. This is a fundamental limitation of Bolt's browser-based runtime. Deploy via Bolt Settings → Applications → Netlify → Publish. In Netlify Dashboard → Site Settings → Environment Variables, add SPOCKET_API_KEY, SPOCKET_BASE_URL, and SPOCKET_WEBHOOK_SECRET. Trigger a redeploy. If Spocket provides webhook functionality on your plan: navigate to your Spocket settings and register the webhook URL as https://your-app.netlify.app/api/webhooks/spocket. Select the events you want to receive: order.status_updated, inventory.low_stock, order.tracking_updated. Create a POST handler at that route in your Bolt project. If Spocket does not provide webhooks on your plan: implement polling instead. Use Netlify Scheduled Functions (available via @netlify/functions) to run a background job every 5-15 minutes that calls GET /api/spocket/orders and syncs order status changes to your database. This achieves near-real-time updates without webhook infrastructure. For larger Spocket integrations where Shopify is the e-commerce platform: register webhooks on Shopify side (orders/create, orders/fulfilled) instead and use those as triggers to place Spocket orders. Shopify's webhook system is reliable and well-documented.

1# netlify.toml
2[build]
3  command = "npm run build"
4  publish = ".next"
5
6[build.environment]
7  NODE_VERSION = "20"
8
9[[plugins]]
10  package = "@netlify/plugin-nextjs"