Lovable and FedEx API integration: Step-by-Step Guide 2025

 

Setting Up FedEx API Integration in Your Lovable Project

 

• Create a new TypeScript file to house our FedEx integration code. For example, add a file named FedExService.ts in your project directory (e.g. in a src/services folder). This file will hold the code for connecting to and using the FedEx API.

 

Creating the FedEx Service Code

 

• Open the newly created FedExService.ts file and add the following code. This code defines a couple of interfaces to structure the data and a class, FedExService, which contains a method to get shipping rates from the FedEx API. Be sure to update the API endpoint and payload structure according to the latest FedEx API documentation.

export interface FedExCredentials {
  apiKey: string;
  apiSecret: string;
  accountNumber: string;
  meterNumber: string;
}

export interface PackageDetails {
  weight: number;
  dimensions: {
    length: number;
    width: number;
    height: number;
  };
}

export interface ShippingRate {
  serviceType: string;
  rate: number;
  currency: string;
}

export class FedExService {
  private credentials: FedExCredentials;
  // Update the FedEx API endpoint URL as per documentation.
  private endpoint: string = 'https://api.fedex.com/rate/v1/rates/quotes';

  constructor(credentials: FedExCredentials) {
    this.credentials = credentials;
  }

  public async getShippingRate(packageDetails: PackageDetails): Promise<ShippingRate> {
    const headers = {
      'Content-Type': 'application/json',
      'X-API-KEY': this.credentials.apiKey,
      // Add any additional headers required by FedEx API.
    };

    const payload = {
      accountNumber: this.credentials.accountNumber,
      meterNumber: this.credentials.meterNumber,
      requestedShipment: {
        packageDetails: packageDetails
        // Include additional shipment details as required by the API.
      }
    };

    const response = await fetch(this.endpoint, {
      method: 'POST',
      headers: headers,
      body: JSON.stringify(payload)
    });

    if (!response.ok) {
      throw new Error('Error fetching FedEx shipping rate');
    }

    const data = await response.json();
    // Process response data to fit the ShippingRate interface. Adjust mappings per actual response.
    return {
      serviceType: data.rateReplyDetails[0].serviceType,
      rate: data.rateReplyDetails[0].totalNetCharge,
      currency: data.rateReplyDetails[0].currency
    };
  }
}

 

Incorporating the FedEx Service into Your Main Code

 

• Open your main application file (e.g. app.ts in the src folder) and import the FedExService class along with the necessary interfaces. Insert the following snippet into app.ts where you want to make a FedEx API call.

import { FedExService, FedExCredentials, PackageDetails } from './services/FedExService';

// Replace the placeholder values with your actual FedEx credentials.
const fedExCredentials: FedExCredentials = {
  apiKey: 'YOURFEDEXAPI_KEY',
  apiSecret: 'YOURFEDEXAPI_SECRET',
  accountNumber: 'YOURFEDEXACCOUNT_NUMBER',
  meterNumber: 'YOURFEDEXMETER_NUMBER'
};

const fedExService = new FedExService(fedExCredentials);

// Define the package details you want to get a shipping rate for.
const packageDetails: PackageDetails = {
  weight: 5.0, // weight in appropriate unit (e.g. pounds or kilograms)
  dimensions: {
    length: 10,
    width: 5,
    height: 4
  }
};

(async () => {
  try {
    const shippingRate = await fedExService.getShippingRate(packageDetails);
    console.log('Shipping Rate:', shippingRate);
    // Add further processing or integration with your Lovable project as needed.
  } catch (error) {
    console.error('Error fetching shipping rate:', error);
  }
})();

 

Handling Dependencies Without a Terminal

 

• Since Lovable projects do not provide a terminal for installing dependencies, ensure that you use APIs or browser functionalities that are built-in. The above code uses the standard fetch API, which is built into modern browsers. If you need any polyfills (for example, if the target environment lacks the fetch API), add a script tag in your HTML to include it.

<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.0.0/fetch.min.js"></script>

 

Final Integration Step

 

• After adding the above code snippets, save all the changes in your Lovable project. The FedExService.ts now exposes a method getShippingRate, which you can utilize anywhere in your project to request shipping rate quotes from FedEx.
• Ensure you have updated all placeholders (like your FedEx credentials and API endpoint) according to your FedEx account details and the latest API documentation.