How to Integrate Lovable with UPS API

Navigate to developer.ups.com and sign in with your UPS.com account, or create a new one if you do not have one. Once logged in, click 'My Apps' in the top navigation, then click the 'Add Apps' button. Give your application a name that reflects your project (for example, 'MyStore Shipping'). Under 'Products,' select the APIs you need: 'Rating' for shipping rate calculations, 'Tracking' for package status, and 'Shipping' if you plan to generate labels. Accept the terms and click 'Save.' UPS will generate a Client ID and a Client Secret for your application — copy both values immediately and store them somewhere temporary like a password manager. You will also see a 'Redirect URI' field; for server-to-server OAuth2 client credentials flow you can enter any placeholder URL such as https://example.com since redirects are not used in this flow. Note that UPS has separate sandbox and production environments — for development, use the sandbox base URL (https://wwwcie.ups.com) and for production use (https://onlinetools.ups.com). Sandbox credentials are separate from production credentials, so you will need to register two applications or toggle environments in your UPS developer portal.

In Lovable, click the '+' icon next to the Preview panel to open the Cloud tab. Navigate to the 'Secrets' section. Click 'Add Secret' and create three secrets. First, add UPS_CLIENT_ID and paste your UPS application's Client ID as the value. Second, add UPS_CLIENT_SECRET and paste your Client Secret. Third, add UPS_BASE_URL and set the value to https://wwwcie.ups.com for sandbox testing, or https://onlinetools.ups.com when you are ready for production. Using a separate secret for the base URL makes switching between sandbox and production easy without touching your Edge Function code. Secrets in Lovable are encrypted at rest, never visible in your project's source code, and only accessible from Edge Functions through Deno.env.get(). Lovable's security system actively blocks approximately 1,200 hardcoded API keys per day — storing credentials in Secrets is the only safe approach. Never paste your Client ID or Client Secret in the Lovable chat interface, since on the free tier chat history is visible to others.

Open the Lovable chat and describe the Edge Function you need. Lovable will generate the TypeScript code, deploy it to your Cloud project, and make it callable from your frontend. The Edge Function handles UPS OAuth2 token exchange automatically — it fetches a fresh token before each API call using the client credentials grant type, caches it in memory for its 14400-second validity period, and forwards your request with the correct Authorization header. The function accepts a POST request with a JSON body containing the UPS endpoint path and the request payload, then returns the UPS response to your frontend. This proxy pattern eliminates CORS issues entirely, since your React frontend calls your own Supabase domain rather than ups.com directly.

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
8let cachedToken: { value: string; expiresAt: number } | null = null;
9
10async function getAccessToken(
11  baseUrl: string,
12  clientId: string,
13  clientSecret: string
14): Promise<string> {
15  const now = Date.now();
16  if (cachedToken && cachedToken.expiresAt > now + 60000) {
17    return cachedToken.value;
18  }
19
20  const credentials = btoa(`${clientId}:${clientSecret}`);
21  const response = await fetch(`${baseUrl}/security/v1/oauth/token`, {
22    method: "POST",
23    headers: {
24      "Content-Type": "application/x-www-form-urlencoded",
25      Authorization: `Basic ${credentials}`,
26    },
27    body: "grant_type=client_credentials",
28  });
29
30  if (!response.ok) {
31    const error = await response.text();
32    throw new Error(`UPS OAuth error: ${response.status} ${error}`);
33  }
34
35  const data = await response.json();
36  cachedToken = {
37    value: data.access_token,
38    expiresAt: now + data.expires_in * 1000,
39  };
40  return cachedToken.value;
41}
42
43serve(async (req) => {
44  if (req.method === "OPTIONS") {
45    return new Response("ok", { headers: corsHeaders });
46  }
47
48  try {
49    const clientId = Deno.env.get("UPS_CLIENT_ID");
50    const clientSecret = Deno.env.get("UPS_CLIENT_SECRET");
51    const baseUrl = Deno.env.get("UPS_BASE_URL") ?? "https://wwwcie.ups.com";
52
53    if (!clientId || !clientSecret) {
54      throw new Error("UPS credentials not configured in Secrets");
55    }
56
57    const { endpoint, payload } = await req.json();
58    if (!endpoint) throw new Error("'endpoint' is required in request body");
59
60    const token = await getAccessToken(baseUrl, clientId, clientSecret);
61
62    const upsResponse = await fetch(`${baseUrl}${endpoint}`, {
63      method: "POST",
64      headers: {
65        "Content-Type": "application/json",
66        Authorization: `Bearer ${token}`,
67        transId: crypto.randomUUID(),
68        transactionSrc: "lovable-app",
69      },
70      body: JSON.stringify(payload),
71    });
72
73    const data = await upsResponse.json();
74
75    return new Response(JSON.stringify(data), {
76      headers: { ...corsHeaders, "Content-Type": "application/json" },
77      status: upsResponse.ok ? 200 : upsResponse.status,
78    });
79  } catch (error) {
80    return new Response(
81      JSON.stringify({ error: error.message }),
82      { headers: { ...corsHeaders, "Content-Type": "application/json" }, status: 500 }
83    );
84  }
85});

With the Edge Function deployed, prompt Lovable to build a React component that collects shipment details from the user and displays live UPS rates. The UPS Rating API accepts a structured JSON payload that specifies the shipper address, ship-to address, and package details, then returns an array of available shipping services with rates. Your component sends this payload to your ups-proxy Edge Function with the endpoint path /api/rating/v2409/rate. Lovable generates the form fields, API call logic, loading state, and results display. You can then customize the appearance using Lovable's Visual Editing mode without consuming AI credits. The component should handle the case where no rates are returned (for example, when an address is invalid or service is not available for that route), showing a friendly error message rather than a blank screen.

The UPS Tracking API lets your customers look up the status of any UPS shipment by tracking number. You call the same ups-proxy Edge Function but with the tracking endpoint and a GET-style payload. The response contains an array of activity events — each with a timestamp, location, and status description — that you can display as a timeline. A common pattern is to store tracking numbers in your Supabase database when an order ships, then surface a tracking status widget on the customer's order detail page that calls the Edge Function automatically when the page loads, so customers see current status without manually entering a tracking number. For a seller dashboard, you can batch-query multiple tracking numbers and show a table of all active shipments with their latest status. Be aware that the UPS Tracking API uses a GET endpoint with a query parameter rather than a POST endpoint — your Edge Function will need a small adjustment to handle GET forwarding for tracking requests, or you can encode the tracking number in the POST payload and have your function handle both cases.

With sandbox testing complete, verify all three UPS API flows work correctly before switching to production. For rate queries, test with both domestic and international addresses to confirm rate cards render properly. For tracking, use UPS's documented sandbox tracking numbers (available in the UPS developer portal under Testing Resources) to simulate different delivery statuses — in-transit, delivered, and exception states. Once you are satisfied with the integration, return to your UPS developer portal and create a new Production application under My Apps. Copy the production Client ID and Client Secret, then update your Lovable Cloud → Secrets: change UPS_CLIENT_ID and UPS_CLIENT_SECRET to the production values, and update UPS_BASE_URL from https://wwwcie.ups.com to https://onlinetools.ups.com. No code changes are needed — the Edge Function reads credentials from environment variables at runtime, so the switch takes effect immediately. For complex production configurations including UPS account number integration for negotiated rates or high-volume label generation, RapidDev's team can help configure the full shipment creation workflow with your UPS account settings.