Bubble.io and QuickBooks integration: Step-by-Step Guide 2024

Step 1: Create a Developer Account in QuickBooks.

To get started, create a new developer account with QuickBooks if you don't already have one. Visit the QuickBooks Developer site at https://developer.intuit.com/app/developer/homepage and click on the "sign up" button. Provide the necessary details such as your name, email address, and create a strong password. After completing the sign-up process, confirm your email to activate the account.

Step 2: Create a new QuickBooks App.

After your account is activated, log into your account and create a new app. To do that, navigate to the "dashboard" and click on the "+ Create an App" button. Choose the type that is more suitable for your application, either "QuickBooks Online and Payments" or the "QuickBooks Desktop". Name your app and click on "Create App".

Step 3: Capture your App's Keys.

In the app's settings, under the 'Development' section, look for the "Keys & OAuth" tab. Take note of the Client ID and Client Secret as you will need them later. These keys are very sensitive, hence, never share them with anyone.

Step 4: Setup a Redirect URI.

An important aspect of the OAuth 2.0 grant flow is the redirection URI. This URI must match exactly (including trailing slashes) with the redirection eye that you will later set up in your Bubble.io application.
Under the "Keys & OAuth" tab, you'll also find the "Redirection URIs". Click "Add URI" then input your Bubble.io app's redirect link. If you're developing in a test environment, your Redirect URI would likely be: https://yourappname.bubbleapps.io/api/1.1/oauth_redirect

Step 5: Create an account on Bubble.io.

Open a new tab and go to Bubble.io website (https://bubble.io/). Sign-up for a new account if you don't have one yet. After sign-up, confirm your email, and log in to your Bubble account.

Step 6: Create a New Project on Bubble.io.

Once you're logged in to your Bubble.io account, create a new project. You can start from scratch or choose from the available templates. Remember the name you choose for your app will form part of your Redirect URI.

Step 7: Implement the API Connector in Bubble.io.

On your Bubble.io dashboard, go to the Plugins tab, and click "+Add plugins". Search for "API Connector" and install it. The API Connector allows you to integrate with the QuickBooks API.

Step 8: Set up Authentication for your QuickBook's APP in API Connector.

Open the API Connector you just installed, click the "+Add another API" button. Give it a name (for example, "QuickBooks").
Then, select the "Authentication Type" dropdown and choose "OAuth2 User-Agent Flow".
Copy the Client ID and Client Secret from your QuickBooks app and paste them into the corresponding fields in Bubble.io.
For the Token endpoint and Authorization endpoint, you can find these URL's on the Keys & OAuth tab in your QuickBooks app.
Set the "scope" as per your requirements like 'com.intuit.quickbooks.accounting'.
Finally, set your "Redirect URI" to match exactly with the one you set in your QuickBooks app.

Step 9: Initialize the call.

Now it's time to initialize the call to get data from QuickBooks. Provide all necessary information like API base URL, API key details you've got from QuickBooks.

Step 10: Test the API Call.

After you're done setting up the API call, you can test it out by hitting the "Initialize API" button. If you have set up everything correctly, you will get a successful response.

Step 11: Building Workflow in Bubble.io

You can now use your QuickBooks API in your app. Go to your Bubble.io editor, and start building workflows that include data from QuickBooks.
Remember, before making calls to your QuickBook app, you will be required to get the users to authenticate the application. This is best done at the sign-up / sign-in stages of your app.

Note: During the process, you may change from "development keys" to "production keys". When you make that switch, ensure to make the necessary changes in your Bubble.io app settings as well.

For debug and logging, Bubble.io provides a helpful logger, which can be accessed in the Bubble editor under Logs > Server Logs.

That sums up all the steps needed to integrate Bubble.io with QuickBooks. Remember, APIs can at times be tricky to connect, especially for beginners. But with trial and error, this process will become much easier and you'll eventually be able to integrate other powerful APIs in your Bubble.io applications.