How to Integrate Lovable with ShipStation

Log in to your ShipStation account at app.shipstation.com. Click the gear icon in the top right to open Settings. In the left sidebar, navigate to Account → API Settings. If you do not see API Settings, your account level may not include API access — check your plan or contact ShipStation support. On the API Settings page, click 'Generate New API Keys.' ShipStation creates two values: an API Key and an API Secret. Both are displayed only once — copy them to a secure location immediately. ShipStation uses HTTP Basic authentication, which means your API key and secret are combined into a base64-encoded string formatted as key:secret and sent as the Authorization: Basic header on every request. This is done by your Edge Function server-side, not by your React frontend. The API endpoint base URL is https://ssapi.shipstation.com — all endpoints are relative to this base. ShipStation's API rate limit is 40 requests per 30 seconds per API key — for high-volume operations, you may need to implement request queuing in your Edge Function.

In Lovable, open the Cloud tab by clicking the '+' icon next to the Preview panel, then navigate to the Secrets section. Click 'Add Secret' and create two secrets. Add SHIPSTATION_API_KEY with your ShipStation API Key as the value. Add SHIPSTATION_API_SECRET with your API Secret as the value. Your Edge Function will combine these using btoa(key + ':' + secret) to generate the base64-encoded Basic auth credential at request time — this calculation happens server-side so neither the individual values nor the combined encoded credential ever appears in browser code. Lovable encrypts both secrets at rest and exposes them only to Edge Functions through Deno.env.get(). The platform's active security monitoring blocks approximately 1,200 hardcoded keys per day, providing an additional safety layer beyond the secrets storage itself.

Use Lovable's chat to generate and deploy the ShipStation proxy Edge Function. This function accepts POST requests from your frontend containing the ShipStation endpoint path, the HTTP method, and an optional request body. It reads your API Key and Secret from Deno environment variables, computes the base64-encoded Basic auth header using btoa(), and forwards the request to ShipStation's API at https://ssapi.shipstation.com. The function handles both GET requests (for order lists, shipment lists, carrier lists) and POST requests (for creating shipments, updating orders). ShipStation uses query parameters for GET requests — your frontend passes these as part of the endpoint string (e.g., /orders?orderStatus=awaiting_shipment). The Edge Function appends them to the ShipStation URL unchanged.

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 apiKey = Deno.env.get("SHIPSTATION_API_KEY");
15    const apiSecret = Deno.env.get("SHIPSTATION_API_SECRET");
16
17    if (!apiKey || !apiSecret) {
18      throw new Error("ShipStation credentials not configured in Secrets");
19    }
20
21    const credentials = btoa(`${apiKey}:${apiSecret}`);
22    const { endpoint, method = "GET", body } = await req.json();
23
24    if (!endpoint) throw new Error("'endpoint' is required");
25
26    const url = `https://ssapi.shipstation.com${endpoint}`;
27
28    const fetchOptions: RequestInit = {
29      method,
30      headers: {
31        Authorization: `Basic ${credentials}`,
32        "Content-Type": "application/json",
33        Accept: "application/json",
34      },
35    };
36
37    if (body && method !== "GET") {
38      fetchOptions.body = JSON.stringify(body);
39    }
40
41    const response = await fetch(url, fetchOptions);
42    const data = await response.json();
43
44    return new Response(JSON.stringify(data), {
45      headers: { ...corsHeaders, "Content-Type": "application/json" },
46      status: response.ok ? 200 : response.status,
47    });
48  } catch (error) {
49    return new Response(
50      JSON.stringify({ error: error.message }),
51      { headers: { ...corsHeaders, "Content-Type": "application/json" }, status: 500 }
52    );
53  }
54});

With the proxy deployed, build the order management dashboard that is the core of your ShipStation integration. ShipStation's orders endpoint returns normalized order data regardless of which sales channel the order came from — each order object includes the store name, order number, customer info, shipping address, line items, and order status. The status field uses ShipStation's standardized codes: awaiting_payment, awaiting_shipment, shipped, cancelled, on_hold. For most shipping operations, you filter to awaiting_shipment to show only orders ready to process. ShipStation also provides an order tags system and custom fields for organizing orders — these appear in the API response and can be used for filtering in your dashboard. The orders endpoint supports numerous filter parameters including storeId (to filter by sales channel), orderStatus, customerEmail, orderNumber, and date ranges — expose the most useful ones as filter controls in your Lovable interface.

The shipping label workflow in ShipStation's API involves two steps: first get rate quotes from available carriers, then create the label with the chosen carrier and service. The getrates endpoint accepts a structured request with the from address (your warehouse), the to address (from the order), the package weight and dimensions, and returns an array of available services across all your configured carriers with rates, estimated delivery days, and service names. After the customer (or you) selects a rate, call the createlabelfororder endpoint with the orderId, carrierCode, serviceCode, and package details — ShipStation creates the label, marks the order as shipped, and returns a label download URL. Store the label URL and tracking number in your Supabase database so you can access them later. For teams with a consistent shipping profile (same carrier, same service, same box sizes every day), RapidDev's team can help configure default rule automation that pre-fills carrier selections based on order weight ranges.