How to Integrate Lovable with Shippo

Log in to your Shippo account at goshippo.com. In the left navigation, click API under the Settings section. You'll see two types of tokens: a Test token (starting with 'shippo_test_...') and a Live token (starting with 'shippo_live_...'). The test token lets you create shipments and get rates without purchasing real labels or spending money — use this during development. The live token processes real label purchases charged to your Shippo account balance. Copy your Test token for now — you'll use it for all development and testing. The Shippo API is version-controlled; the current version is v1 and the base URL is https://api.goshippo.com/. Shippo's test mode returns real rate data (actual carrier prices) but label purchases with the test token create test labels that cannot be used for actual shipping. Shippo's API follows RESTful conventions with JSON request and response bodies. Authentication is via HTTP Basic Auth where the API token is the username and the password is an empty string. The Edge Function in this guide handles this authentication automatically using the token from Cloud Secrets. Once you have your test token, you're ready to configure Cloud Secrets.

Navigate to your Lovable project and click the '+' icon next to the Preview panel at the top of the screen to open the Cloud tab. Click Secrets in the left-hand navigation of the Cloud tab. Click Add Secret to add a new encrypted environment variable. Set the name to SHIPPO_API_TOKEN and paste your Shippo test token (shippo_test_...) as the value. Click Save. The token is now encrypted and stored — it will only be accessible from your Edge Functions via Deno.env.get('SHIPPO_API_TOKEN'). When you're ready to go live with real label purchases, you'll update this secret value to your live token (shippo_live_...). There's no code change required — only the secret value changes. This is why storing the token as a secret rather than hardcoding it in the Edge Function is so important: switching from test to production is a single secret update rather than a code deployment. Never paste your Shippo API token into Lovable's chat prompt. Free-tier Lovable accounts have publicly visible chat history, and tokens pasted in chat are recoverable from Git commit history. Lovable blocks approximately 1,200 hardcoded API keys daily — always use Cloud → Secrets for any token that authenticates an external service.

Now create the Edge Function that proxies Shippo API calls. Type the prompt below into Lovable's chat interface. Lovable will generate the TypeScript code at supabase/functions/shippo-proxy/index.ts and deploy it to your Cloud project. The Edge Function uses HTTP Basic Auth with the Shippo API token as the username and an empty string as the password. It accepts an 'action' query parameter to route between different Shippo operations: 'rates' creates a Shippo Shipment object and returns available rates, 'label' purchases a label for a specific rate object, and 'track' retrieves tracking information for a given carrier and tracking number. For rate requests, the Edge Function creates a Shippo Shipment — combining the sender address, recipient address, and parcel (weight + dimensions) — in a single POST. Shippo processes the shipment synchronously and returns all available rates immediately. For label generation, a separate POST to /transactions purchases the selected rate and returns the label URL and tracking number. All responses include CORS headers for browser compatibility.

1import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
2
3const SHIPPO_BASE = 'https://api.goshippo.com'
4
5const corsHeaders = {
6  'Access-Control-Allow-Origin': '*',
7  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
8}
9
10serve(async (req) => {
11  if (req.method === 'OPTIONS') {
12    return new Response('ok', { headers: corsHeaders })
13  }
14
15  try {
16    const apiToken = Deno.env.get('SHIPPO_API_TOKEN')
17
18    if (!apiToken) {
19      return new Response(
20        JSON.stringify({ error: 'SHIPPO_API_TOKEN not configured in Cloud Secrets' }),
21        { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
22      )
23    }
24
25    // Shippo uses HTTP Basic Auth: token as username, empty password
26    const authHeader = 'Basic ' + btoa(`${apiToken}:`)
27    const url = new URL(req.url)
28    const action = url.searchParams.get('action')
29
30    const shippoHeaders = {
31      'Authorization': authHeader,
32      'Content-Type': 'application/json',
33      'Accept': 'application/json',
34    }
35
36    if (action === 'rates') {
37      const body = await req.text()
38      // Create shipment with async=false to get rates synchronously
39      const shipmentBody = JSON.parse(body)
40      shipmentBody.async = false
41
42      const shipmentRes = await fetch(`${SHIPPO_BASE}/shipments/`, {
43        method: 'POST',
44        headers: shippoHeaders,
45        body: JSON.stringify(shipmentBody),
46      })
47
48      const shipmentData = await shipmentRes.json()
49
50      return new Response(JSON.stringify(shipmentData), {
51        status: shipmentRes.status,
52        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
53      })
54    } else if (action === 'label') {
55      const body = await req.text()
56      const labelRes = await fetch(`${SHIPPO_BASE}/transactions/`, {
57        method: 'POST',
58        headers: shippoHeaders,
59        body,
60      })
61      const labelData = await labelRes.json()
62      return new Response(JSON.stringify(labelData), {
63        status: labelRes.status,
64        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
65      })
66    } else if (action === 'track') {
67      const carrier = url.searchParams.get('carrier')
68      const trackingNumber = url.searchParams.get('trackingNumber')
69      const trackRes = await fetch(`${SHIPPO_BASE}/tracks/${carrier}/${trackingNumber}`, {
70        headers: shippoHeaders,
71      })
72      const trackData = await trackRes.json()
73      return new Response(JSON.stringify(trackData), {
74        status: trackRes.status,
75        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
76      })
77    } else {
78      return new Response(
79        JSON.stringify({ error: 'Invalid action. Use: rates, label, or track' }),
80        { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
81      )
82    }
83  } catch (error) {
84    return new Response(
85      JSON.stringify({ error: error.message }),
86      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
87    )
88  }
89})

With the Edge Function deployed, ask Lovable to build the shipping rate comparison component. This component collects sender address, recipient address, and parcel details from the user (or pre-fills them from order data), calls the Edge Function to get Shippo rates, and displays the carrier options in a comparison layout. Shippo's Shipment API requires address objects with name, street1, city, state, zip, country (ISO 2-letter code), and phone. Parcel objects require length, width, height (in inches for US carriers), weight (in ounces for USPS, pounds for UPS/FedEx — Shippo handles conversion), distance_unit ('in'), and mass_unit ('oz' or 'lb'). Lovable will generate TypeScript interfaces for these and build a properly typed form. Rate results include the carrier name (e.g., 'USPS'), service level name ('Priority Mail'), price as a string ('8.40'), currency ('USD'), estimated transit days, and an object_id used to purchase the label. The label generation step uses this object_id to POST to /transactions, which returns a label_url PDF link. For more complex configurations involving international customs, return label workflows, or high-volume batch label printing, RapidDev's team can help design the right Edge Function architecture for your specific fulfillment workflow.