How to Integrate Lovable with Spocket

Log in to your Spocket account at app.spocket.co. Spocket API access requires a paid subscription — the Starter plan and above include API access. Navigate to your account settings by clicking your profile icon in the top right, then select 'Account Settings.' Look for the 'Integrations' or 'API' section, where Spocket provides your API key or bearer token. Spocket uses OAuth2 for its partner API — you may need to apply for API access through Spocket's developer program at developers.spocket.co if your account does not already show API credentials. The developer program provides a client ID and client secret for generating access tokens. For accounts that have direct API key access, you will see a single API token that you can use directly as a Bearer token in requests. Copy your API credentials carefully — you will use them in the next step. Note that Spocket's API base URL is https://app.spocket.co/api/v1 and all endpoints require your Bearer token in the Authorization header. Spocket periodically updates its API — check the documentation at developers.spocket.co for the most current endpoint structure and any rate limits that apply to your plan.

In Lovable, open the Cloud tab by clicking the '+' icon next to the Preview panel and navigate to the Secrets section. Click 'Add Secret' and create your Spocket credential secret. If Spocket provided a direct API token, add SPOCKET_API_TOKEN with the token value. If Spocket provided OAuth2 client credentials, add SPOCKET_CLIENT_ID and SPOCKET_CLIENT_SECRET separately. Using a separate secret for each credential value makes it easier to rotate them individually if needed. Your Edge Function will read these values using Deno.env.get() at runtime — they are never embedded in your app's JavaScript bundle or visible in browser developer tools. Lovable's security infrastructure encrypts these secrets at rest and blocks approximately 1,200 hardcoded API keys per day from appearing in generated code. For a dropshipping business, protecting your Spocket credentials is important because access to your account could allow someone to place orders billed to your account.

Use Lovable's chat to generate the Spocket proxy Edge Function. This function accepts POST requests from your frontend containing the Spocket API endpoint path, the HTTP method, and an optional request body. It reads your Spocket credentials from Deno environment variables, constructs the full Spocket API URL, and forwards the request with the Authorization header. The function returns the Spocket API response to your frontend as JSON. This proxy pattern solves two problems simultaneously: it keeps your API credentials server-side where they cannot be extracted from browser memory, and it eliminates CORS errors since Spocket's API does not include CORS headers for browser requests. Your frontend only ever makes requests to your own Supabase Edge Function URL — Spocket's domain is never directly accessed from the browser.

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("SPOCKET_API_TOKEN");
15    if (!apiToken) throw new Error("SPOCKET_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://app.spocket.co${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    let data;
37    const contentType = response.headers.get("content-type") || "";
38    if (contentType.includes("application/json")) {
39      data = await response.json();
40    } else {
41      data = { message: await response.text() };
42    }
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, prompt Lovable to create the product discovery interface that lets you browse Spocket's supplier catalog and import products to your store. Spocket's products endpoint returns key data for each product including the supplier location (US, Canada, EU countries), the supplier's price (your cost), the suggested retail price, processing time in days, and inventory levels. Filtering products by ship_from_us=true or ship_from_eu=true lets you specifically target fast-shipping suppliers. The import flow involves saving the Spocket product ID and your desired retail price to a Supabase table — this becomes your product catalog for the storefront. When displaying products on your customer-facing storefront, you fetch from Supabase (your imported products table) rather than from Spocket directly, which is faster and avoids unnecessary Spocket API calls on every page load.

The final piece of the dropshipping workflow is automated order submission. When a customer pays for an order on your storefront, your app needs to submit that order to Spocket so the supplier can fulfill it. This is typically triggered by a Stripe webhook (when payment is captured) or a Supabase database trigger (when an order's payment_status changes to 'paid'). The order submission to Spocket requires the Spocket product ID, the customer's shipping address in the format Spocket expects, and the quantity. Spocket responds with a Spocket order ID and an estimated ship date. Save the Spocket order ID in your orders table so you can check fulfillment status later. For customer order tracking, poll the Spocket order status endpoint periodically and display the status in your customer-facing order detail page. RapidDev's team can help configure the complete webhook-to-fulfillment pipeline for more complex multi-supplier order routing scenarios.