Bubble.io and UPS API integration: Step-by-Step Guide 2024

Integration of Bubble.io with UPS API

Step 1: Getting UPS API Credentials

The initial step is to acquire your UPS API credentials. To get the credentials, you must have a UPS account. Follow the steps:

• Visit the UPS Developer Kit page: https://www.ups.com/upsdeveloperkit
• Select the API you want for your project, and click "Download APIs."
• After filling the registration form, you should receive an email with the API Key.

Step 2: Install API Connector plugin

The second step is installing the API connector plugin in your Bubble.io application. Follow these steps:

• Open your Bubble.io application
• Click on the plugin tab, present in the left sidebar
• A new screen will appear, type API Connector in the search box and install the plugin that is developed by Bubble

Step 3: Set Up API Connector

The third step involves setting up of the installed API connector. This process is divided into numerous small steps:

• Restart your Bubble.io application after the plugin is installed
• Click on the plugin tab, present in the left sidebar
• A new screen will appear, find API Connector and click on Add another API button

Step 4: Configuring the API

The fourth step is configuring the API you just added. Follow through these steps:

• An option for filling the API details will appear, fill the fields as follows:

  1. API name: UPS
  2. Authentication: Self-handled or OAuth2
     (Although UPS provides self-handled authentication it is recommended to use OAuth2 to implement API security best practices)
  3. Application ID (this can be found from the UPS Developer website, as indicated in step 1)

• Below that, further fill API base URL for the UPS Endpoint, followed by filling API keys, which you received from UPS in your email

Step 5: Configuring the API Calls

The fifth step is to configure the API calls. Follow these steps:

• Click on Add another Call
• An option for filling the API details will appear, fill the fields as follows:
  • Call Name: Shipping Rates and Service
  • Call Type: GET ( generally used for retrieving data)
  • Data Type: Json
  • API URL: https://ups-api-url.com (Replace with the correct URL obtained from the UPS API documentation)
  • Repeat the same process for each API call you want to configure.

Step 6: Initialize API Call

The sixth step is to initialize the API call by doing the following:

• Go back to the plugins tab
• Click on the UPS API
• Click on the Initialize Call button next to each API call

Step 7: Building and Configuring the Application

Final step to connect Bubble.io with UPS API is to use this API call in your Bubble.io application:

• Open the Bubble.io design dashboard.
• Draw a button and label it Get Shipping Rates.
• Go to the workflow tab, click on + button, select the action Plugins > UPS - Shipping Rates and Service.
• Save all changes.
• When you run the application and click this button it should now return results from the UPS API.

By now, you have successfully integrated Bubble.io with UPS API. Enjoy Shipping!