How to Integrate Lovable with FedEx API

Navigate to developer.fedex.com and sign in or create a free developer account. Once logged in, go to My Projects → Create Project. Give the project a name (e.g., 'Lovable App') and select the APIs you need access to — at minimum, select Rate Quotes, Ship, and Track. After creating the project, FedEx generates a Client ID and Client Secret visible on the project detail page. For sandbox testing, FedEx provides a test environment at apis-sandbox.fedex.com. The sandbox uses the same OAuth2 flow as production but with test credentials that don't generate real shipments or charges. Your developer portal project gives you both sandbox and production credential sets — start with sandbox credentials during development. The test account number for sandbox use is shown in the FedEx developer documentation; use this as the shipper account number in rate and shipment requests during testing. Note that FedEx's new REST API is versioned — the current base paths are /rate/v1/rates/quotes for rates, /ship/v1/shipments for shipment creation, and /track/v1/trackingnumbers for tracking. The authentication endpoint is /oauth/token. Copy your Client ID and Client Secret from the project page before moving to the next step.

In your Lovable project, click the '+' icon next to the Preview panel to open the Cloud tab. Click Secrets in the left sidebar. Click Add Secret and create the following secrets: Add FEDEX_CLIENT_ID with your FedEx Client ID as the value. Add FEDEX_CLIENT_SECRET with your Client Secret. Add FEDEX_ACCOUNT_NUMBER with your FedEx account number (or the sandbox test account number). Add FEDEX_ENV with value 'sandbox' for development (change to 'production' when going live). FedEx's OAuth2 client credentials flow generates short-lived access tokens (typically valid for 60 minutes). Your Edge Function will exchange the Client ID and Secret for a bearer token each time it's called, or cache the token with its TTL to avoid unnecessary token requests. The client secret in particular must never appear in frontend code — it grants the ability to authenticate as your FedEx account and generate real shipping labels. Lovable's Cloud Secrets panel stores all values encrypted and immutable from the browser — only Edge Functions via Deno.env.get() can read them. Lovable's security system actively prevents approximately 1,200 hardcoded API keys daily from reaching production code.

Create the Edge Function that handles FedEx OAuth2 authentication and proxies API calls. Type the following prompt into Lovable's chat. Lovable will generate the TypeScript at supabase/functions/fedex-proxy/index.ts and deploy it to Cloud. The Edge Function first calls the FedEx OAuth2 token endpoint with the Client ID and Secret to obtain a bearer token, then uses that token to call the Rate, Ship, or Track APIs based on the 'action' query parameter. The token exchange uses the 'client_credentials' grant type and a 'client_id:client_secret' Basic Auth header as required by FedEx's auth spec. For rate requests, the FedEx Rate API expects a JSON body with requestedShipment containing shipper and recipient addresses, rateRequestType ('LIST' for published rates, 'ACCOUNT' for account rates), and requested package details. The Edge Function maps simpler frontend-friendly parameters to this structure. CORS headers are included on all responses.

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
8async function getFedExToken(clientId: string, clientSecret: string, baseUrl: string): Promise<string> {
9  const response = await fetch(`${baseUrl}/oauth/token`, {
10    method: 'POST',
11    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
12    body: new URLSearchParams({
13      grant_type: 'client_credentials',
14      client_id: clientId,
15      client_secret: clientSecret,
16    }),
17  })
18  const data = await response.json()
19  if (!response.ok) throw new Error(`FedEx auth error: ${JSON.stringify(data)}`)
20  return data.access_token
21}
22
23serve(async (req) => {
24  if (req.method === 'OPTIONS') {
25    return new Response('ok', { headers: corsHeaders })
26  }
27
28  try {
29    const clientId = Deno.env.get('FEDEX_CLIENT_ID')
30    const clientSecret = Deno.env.get('FEDEX_CLIENT_SECRET')
31    const accountNumber = Deno.env.get('FEDEX_ACCOUNT_NUMBER')
32    const env = Deno.env.get('FEDEX_ENV') || 'sandbox'
33    const baseUrl = env === 'production'
34      ? 'https://apis.fedex.com'
35      : 'https://apis-sandbox.fedex.com'
36
37    if (!clientId || !clientSecret || !accountNumber) {
38      return new Response(
39        JSON.stringify({ error: 'FedEx credentials not configured in Cloud Secrets' }),
40        { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
41      )
42    }
43
44    const accessToken = await getFedExToken(clientId, clientSecret, baseUrl)
45    const url = new URL(req.url)
46    const action = url.searchParams.get('action')
47
48    const fedexHeaders = {
49      'Authorization': `Bearer ${accessToken}`,
50      'Content-Type': 'application/json',
51      'X-locale': 'en_US',
52    }
53
54    let endpoint: string
55    const bodyText = await req.text()
56    const bodyJson = bodyText ? JSON.parse(bodyText) : {}
57
58    if (action === 'rates') {
59      // Inject account number into the rate request
60      if (bodyJson.accountNumber) bodyJson.accountNumber = { value: accountNumber }
61      endpoint = `${baseUrl}/rate/v1/rates/quotes`
62    } else if (action === 'ship') {
63      endpoint = `${baseUrl}/ship/v1/shipments`
64    } else if (action === 'track') {
65      endpoint = `${baseUrl}/track/v1/trackingnumbers`
66    } else {
67      return new Response(
68        JSON.stringify({ error: 'Invalid action. Use: rates, ship, or track' }),
69        { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
70      )
71    }
72
73    const fedexRes = await fetch(endpoint, {
74      method: 'POST',
75      headers: fedexHeaders,
76      body: JSON.stringify(bodyJson),
77    })
78
79    const data = await fedexRes.json()
80    return new Response(JSON.stringify(data), {
81      status: fedexRes.status,
82      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
83    })
84  } catch (error) {
85    return new Response(
86      JSON.stringify({ error: error.message }),
87      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
88    )
89  }
90})

With the Edge Function deployed, ask Lovable to build the rate calculator UI. The FedEx Rate API request body requires a specific JSON structure: a requestedShipment object containing shipper and recipient addresses (with postalCode, countryCode, stateOrProvinceCode, city), pickupType ('DROPOFF_AT_FEDEX_LOCATION' or 'USE_SCHEDULED_PICKUP'), serviceType (leave empty to get all available services), rateRequestType array (['ACCOUNT', 'LIST']), and requestedPackageLineItems array with weight and dimensions. The Rate API response includes an output.rateReplyDetails array where each item represents an available FedEx service (Priority Overnight, 2Day, Express Saver, Ground, etc.) with ratedShipmentDetails containing the totalNetCharge and currency, plus commit.dateDetail.dayFormat for the delivery date. Test the integration in sandbox mode using FedEx's published test addresses and tracking numbers from the developer documentation. Once sandbox testing confirms rates and tracking work correctly, update Cloud Secrets with production credentials by changing FEDEX_ENV to 'production' and updating FEDEX_CLIENT_ID and FEDEX_CLIENT_SECRET to your production values. For complex shipping scenarios like hazardous materials, alcohol, or medical devices — which require special FedEx approvals and additional API fields — RapidDev's team can help configure the correct commodity and special handling codes.