How to Integrate Lovable with ShipBob

Log in to your ShipBob Merchant App at web.shipbob.com. Navigate to Settings using the gear icon, then select the 'Integrations' section. Look for 'API' or 'Developer Access' — ShipBob provides a personal API token for merchant accounts. Click 'Generate Token' or 'Create Token' to create a new Bearer token for API access. Copy the token immediately as it may only be shown once. ShipBob's API base URL is https://api.shipbob.com and all endpoints are versioned (currently /1/ for v1 endpoints). The Bearer token provides access to all merchant data within your ShipBob account — orders, inventory, products, fulfillment centers, and receiving orders. Unlike some APIs, ShipBob does not use separate scope controls per token — the token grants full merchant account access. This is why it must be stored securely server-side in Lovable's Secrets store, never in your React frontend code or browser storage. ShipBob's API documentation is available at developer.shipbob.com for reference on all available endpoints and request formats.

In Lovable, open the Cloud tab by clicking the '+' icon next to the Preview panel and navigate to Secrets. Click 'Add Secret' and add SHIPBOB_API_TOKEN with your ShipBob Bearer token as the value. This single secret is all your Edge Function needs — ShipBob's Bearer token authentication is straightforward: every request includes an Authorization: Bearer {token} header and ShipBob validates the token against your merchant account. Unlike Basic auth APIs that require two credentials to be combined, or OAuth2 APIs that require token exchange flows, ShipBob's Bearer token is used directly. Lovable's encrypted Secrets store ensures the token is never accessible from your app's JavaScript code or visible in browser developer tools. The platform's SOC 2 Type II certification and active key-blocking infrastructure (approximately 1,200 hardcoded keys blocked daily) provide additional assurance that your ShipBob account credentials stay protected.

Use Lovable's chat to generate and deploy the ShipBob proxy Edge Function. This function accepts POST requests from your frontend with the ShipBob API endpoint path, HTTP method, and optional request body. It reads your Bearer token from Deno environment variables and forwards the request to ShipBob's API at https://api.shipbob.com with the Authorization header. The function handles both GET requests (for inventory lists, order queries, shipment status) and POST requests (for creating orders, creating receiving records). ShipBob's GET endpoints use query parameters for filtering and pagination — your frontend passes these as part of the endpoint string, and the Edge Function appends them to the ShipBob URL. For example, fetching orders for a specific date range would use endpoint '/1/order?StartDate=2026-01-01&EndDate=2026-01-31'. The proxy returns ShipBob's response to your frontend as JSON, allowing your React components to display live ShipBob data.

1import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
2
3const corsHeaders = {
4  "Access-Control-Allow-Origin": "*",
5  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
6};
7
8serve(async (req) => {
9  if (req.method === "OPTIONS") {
10    return new Response("ok", { headers: corsHeaders });
11  }
12
13  try {
14    const apiToken = Deno.env.get("SHIPBOB_API_TOKEN");
15    if (!apiToken) throw new Error("SHIPBOB_API_TOKEN not configured in Secrets");
16
17    const { endpoint, method = "GET", body } = await req.json();
18    if (!endpoint) throw new Error("'endpoint' is required");
19
20    const url = `https://api.shipbob.com${endpoint}`;
21
22    const fetchOptions: RequestInit = {
23      method,
24      headers: {
25        Authorization: `Bearer ${apiToken}`,
26        "Content-Type": "application/json",
27        Accept: "application/json",
28      },
29    };
30
31    if (body && method !== "GET") {
32      fetchOptions.body = JSON.stringify(body);
33    }
34
35    const response = await fetch(url, fetchOptions);
36    const data = await response.json();
37
38    return new Response(JSON.stringify(data), {
39      headers: { ...corsHeaders, "Content-Type": "application/json" },
40      status: response.ok ? 200 : response.status,
41    });
42  } catch (error) {
43    return new Response(
44      JSON.stringify({ error: error.message }),
45      { headers: { ...corsHeaders, "Content-Type": "application/json" }, status: 500 }
46    );
47  }
48});

The inventory dashboard is the highest-value part of a ShipBob integration for most merchants. ShipBob's inventory endpoint returns each product with its quantities broken down by status: onHand (total physical units), committedQuantity (units reserved for open orders), fulfillableQuantity (available to sell), and onHandQuantity (total in warehouse). Products also show distribution across multiple fulfillment centers if you are using distributed inventory. For the most useful inventory dashboard, set a reorder point threshold per product and highlight items that have fallen below it. You can store reorder points in your Supabase database per ShipBob product ID, then combine the live ShipBob inventory data with your reorder rules to create intelligent alerts. Lovable generates the full component including the data fetching, table display, sorting, and conditional highlighting from a single chat prompt.

ShipBob order tracking shows the progression of each order from receipt through picking, packing, and carrier handoff. The ShipBob orders endpoint returns each order with a status field (Processing, Completed, Cancelled, Exception), shipments array, and line items. When an order status is Completed, it includes the shipments array with carrier name, tracking number, and a trackingUrl you can display directly or link to. For orders in Processing status, the shipment array is empty or contains preliminary data. Build the order tracker with two views: an operations view for your team showing all orders and their current ShipBob processing stage, and optionally a customer-facing order status page (accessible via order token or email lookup) that shows simplified status and tracking. For high-volume merchants with thousands of daily orders, RapidDev's team can help optimize the order status page with caching and real-time webhook-driven updates rather than polling the ShipBob API per page load.