How to Integrate Retool with UPS API

Navigate to developer.ups.com and sign in with your UPS account credentials. Click 'Add Apps' or navigate to 'My Apps' and create a new application. Give the app a name like 'Retool Integration'. Select the API products you need: Tracking, Rating, and Shipping are the most common for operations dashboards. The application creation generates a Client ID and Client Secret. Copy both values — the Client Secret will only be shown once or can be regenerated if lost, but treat it as a permanent secret. In your Retool configuration variables (Settings → Configuration Variables), create three entries: UPS_CLIENT_ID with your client ID, UPS_CLIENT_SECRET with the client secret (mark as secret), and UPS_ACCOUNT_NUMBER with your UPS account number (needed for rating and shipping queries with your account's negotiated rates). Note that UPS's developer environment and production environment use the same credentials but different base URLs.

Create a REST API Resource in Retool for the UPS API. Set the Base URL to 'https://onlinetools.ups.com' (production) or 'https://wwwcie.ups.com' (testing). Under Authentication, select 'Custom Auth'. Configure the token endpoint call: POST to 'https://onlinetools.ups.com/security/v1/oauth/token' with Content-Type 'application/x-www-form-urlencoded' and body containing grant_type=client_credentials, client_id={{ retoolContext.configVars.UPS_CLIENT_ID }}, and client_secret={{ retoolContext.configVars.UPS_CLIENT_SECRET }}. Store the returned access_token in a variable. Set the Authorization header for all resource requests to 'Bearer {{ ups_access_token }}'. Also add a default 'Content-Type' header with value 'application/json' and a 'transId' header with a unique transaction ID (can use a timestamp: {{ Date.now().toString() }}) and 'transactionSrc' header with a descriptive value like 'retool-ops-dashboard'. The transaction headers are optional but recommended for UPS's logging.

1// UPS OAuth token request configuration:
2// POST https://onlinetools.ups.com/security/v1/oauth/token
3// Content-Type: application/x-www-form-urlencoded
4// Body:
5// grant_type=client_credentials
6// client_id={{ retoolContext.configVars.UPS_CLIENT_ID }}
7// client_secret={{ retoolContext.configVars.UPS_CLIENT_SECRET }}
8
9// Store: access_token from response
10// Token expires in: response.expires_in seconds (typically 14400 = 4 hours)
11
12// Resource headers:
13// Authorization: Bearer {{ ups_access_token }}
14// Content-Type: application/json
15// transId: {{ Date.now().toString() }}
16// transactionSrc: retool-ops-dashboard

Create a query for tracking packages. Use GET method with path '/api/track/v1/details/{{ trackingInput.value }}'. The path parameter is the UPS tracking number. Add a query parameter 'locale' set to 'en_US' and 'returnSignature' set to 'false'. The response contains a 'trackResponse' object with a 'shipment' array. Each shipment has 'currentStatus' (the latest status), 'deliveryDate', and 'activity' array with full scan history. Add a transformer to extract the current status, last activity, and estimated delivery. Bind a TextInput component for the tracking number input and a Button to trigger the query. Display the tracking result in a well-formatted Container component showing the current status, delivery estimate, and activity timeline.

1// GET /api/track/v1/details/{{ trackingInput.value }}
2// Query parameters: locale=en_US, returnSignature=false
3
4// Transformer: extract tracking summary
5const shipment = data?.trackResponse?.shipment?.[0];
6if (!shipment) return { error: 'No tracking data found' };
7
8const activities = shipment.activity || [];
9const latestActivity = activities[0] || {};
10
11return {
12  tracking_number: shipment.trackingNumber,
13  status: shipment.currentStatus?.description || 'Unknown',
14  status_code: shipment.currentStatus?.code || '',
15  estimated_delivery: shipment.deliveryDate?.[0]?.date || 'Not available',
16  last_location: latestActivity.location?.address
17    ? `${latestActivity.location.address.city}, ${latestActivity.location.address.stateProvince}`
18    : 'Unknown',
19  last_activity: latestActivity.description || '',
20  last_updated: latestActivity.date
21    ? `${latestActivity.date} ${latestActivity.time || ''}`
22    : 'Unknown',
23  activity_history: activities.slice(0, 10).map(a => ({
24    date: `${a.date} ${a.time || ''}`.trim(),
25    description: a.description || '',
26    location: a.location?.address
27      ? `${a.location.address.city || ''}, ${a.location.address.stateProvince || ''}`.trim()
28      : ''
29  }))
30};

Create a POST query using the UPS Rating API to calculate shipping rates. Use path '/api/rating/v2403/Rate' and set the method to POST. The request body is a JSON object with a RateRequest wrapper containing shipper information (your UPS account number), ship-from and ship-to addresses, and package details (weight, dimensions, packaging type). The response returns rates for the requested service type, or use service code '03' (UPS Ground) and '01' (Next Day Air) for comparison. Add form components to your Retool app for origin/destination zip codes, weight, and dimensions. Wire the form submit button to run the rating query and display results in a Table component showing service type, rate, and transit days.

1// POST /api/rating/v2403/Rate
2// Request body:
3{
4  "RateRequest": {
5    "Request": {
6      "RequestOption": "Shop"
7    },
8    "Shipment": {
9      "Shipper": {
10        "ShipperNumber": "{{ retoolContext.configVars.UPS_ACCOUNT_NUMBER }}",
11        "Address": {
12          "PostalCode": "{{ originZip.value }}",
13          "CountryCode": "US"
14        }
15      },
16      "ShipTo": {
17        "Address": {
18          "PostalCode": "{{ destZip.value }}",
19          "CountryCode": "US",
20          "ResidentialAddressIndicator": ""
21        }
22      },
23      "ShipFrom": {
24        "Address": {
25          "PostalCode": "{{ originZip.value }}",
26          "CountryCode": "US"
27        }
28      },
29      "Service": { "Code": "03" },
30      "Package": {
31        "PackagingType": { "Code": "02" },
32        "PackageWeight": {
33          "UnitOfMeasurement": { "Code": "LBS" },
34          "Weight": "{{ weight.value }}"
35        }
36      }
37    }
38  }
39}

For order fulfillment dashboards, you need to track multiple shipments simultaneously rather than one at a time. Create a query that reads tracking numbers from your orders database (using a separate PostgreSQL or REST API resource), then uses a Retool Workflow to batch query UPS tracking status for each shipment and store results back into a tracking_status table. Alternatively, for smaller volumes (under 20 active shipments), use Retool's query chaining: a JavaScript query loops through tracking numbers, calling the UPS tracking query for each, and aggregates results into an array. Display the results in a Table with conditional row highlighting — green for delivered, yellow for in transit, red for exception. For complex fulfillment automation connecting UPS with your order management system and notification workflows, RapidDev's team can architect the complete solution.

1// JavaScript query: batch track multiple shipments
2// Reads tracking numbers from database query 'getOrders.data'
3const orders = getOrders.data || [];
4const trackingNumbers = orders
5  .filter(o => o.tracking_number && o.tracking_number.trim())
6  .map(o => o.tracking_number.trim());
7
8// Return array for display while workflow fetches live data
9// (Use Retool Workflows for actual batch UPS API calls)
10return trackingNumbers.map(tn => ({
11  tracking_number: tn,
12  status: 'Pending refresh',
13  last_updated: new Date().toLocaleDateString()
14}));