Bubble.io and 3dcart (now Shift4Shop) integration: Step-by-Step Guide 2024

Integration of Bubble.io with Shift4Shop

Step 1: Create an account on Bubble.io

To start with, go to the website of Bubble.io. On the top right corner of the webpage, you will find an option named 'Sign Up', click on it. A new page will appear where you can sign up using your Google account or your email. If you already have an account, just simply click on the 'Log in' option which is located on the topmost right corner of the webpage of Bubble.io.

Step 2: Create an account on Shift4Shop

Now, visit the Shift4Shop website. Click on the 'Sign Up' or 'Start for Free' button on the top right corner of the page. Follow the prompts to create your Shift4Shop account. If you already have an account, simply click the 'Login' option and enter your credentials.

Step 3: Start a new project on Bubble.io

Once you have logged into your Bubble.io account, click on the 'New App' option, it is located on the left sidebar. Fill in the necessary information such as the app name, application type, template, etc.

Step 4: Obtain API credentials from Shift4Shop

In a new web browser tab, navigate to your Shift4Shop Online Store Manager,go to the 'Modules' section. Within the 'Modules' area search for 'REST API' and click on the 'Settings' button for it. Then create a new public key, save this public key as you will later need to place it within Bubble's API connector.

Step 5: Navigate to your Bubble.io app settings

Switch back to the Bubble.io browser tab and navigate to the settings of the app you just created. You can get there by clicking on the 'Settings' option located on the left sidebar.

Step 6: Add the Shift4Shop API

In the 'Settings' page, on the left sidebar, click 'APIs'. There, you will find an option to add a new API. Click on it and enter the following details:

• API Provider Name: Shift4Shop
• Shared Headers:
  • 'secureUrl' ${secureUrl}
  • 'public_key' ${public_key}
• Shared Parameters:
  • 'format' json

Here replace ${secureUrl} with your Shift4Shop store URL and ${public_key} with the public key you obtained from Shift4Shop in Step 4.

Step 7: Setup API methods

Now that you have added the base settings for the Shift4Shop API, you can setup the various API methods you plan on using.

For example, to setup the method to retrieve all of the products, do the following:

• Under the 'API Endpoints' section, click on the button to add a new endpoint.
• Fill in the details for this method:
  • Endpoint Name: 'Get All Products'
  • Base URL: ${secureUrl}/api/v1/products.json
  • Replace ${secureUrl} with your actual Shift4Shop store URL.
  • Method: GET
  • Parameters: None needed for this endpoint

For more endpoint methods check the Shift4Shop API documentation.

Step 8: Initialize API calls

Once you have added an API method, click on the 'Initialize call' button to make a request to the API and automatically pre-fill the response structure. If everything goes correctly, you should see a successful response from the Shift4Shop API.

Step 9: Use the API in your app

You can now use the Shift4Shop API in your Bubble.io app. This can be done from within workflow actions or from the data sources of visual elements in your app editor. Remember to take full advantage of dynamic data processing functions provided by Bubble.io to manipulate the API response data as per your needs.

And that’s it, you've successfully integrated Bubble.io with Shift4Shop (3dcart). The same steps can be repeated to add more API methods as needed.