Integrating External APIs into your Bubble App

The Bubble App framework provides you with myriad tools to design and develop your app, all without making use of code or overly technical programming knowledge. Your app can be extremely powerful with the use of these tools and can provide a lot of functionality to its users fitting their needs.

But what if your user wanted to share content from your app on their social media accounts? Or what if your user wanted to make electronic payments on your app?

On its own, your app can’t communicate with external web services and applications. This is where APIs come in. APIs provide an interface for applications to communicate with each other in a consistent and concise way, and this tutorial will provide you with Bubble app API assistance.

Note that using another app’s API is different from creating an API for your own app. The first allows you to access their data and make requests, while the other allows you to create an interface for other apps to request data or send HTTP requests to your app. Bubblehelper has another tutorial for you to check out if you want.

Plugins

Bubble allows you to make use of third-party APIs through its Plugins system. Plugins also allow you to add authentication services such as OAuth (Open Authorization) or even add custom elements created by other developers. This article; however, will mainly focus on and provide examples for utilizing third-party APIs through plugins.

First off, you’ll need to install the plugins you need. In case you don’t already know, you can do this from the plugins tab in the sidebar of your Bubble development environment. At the top right of the menu, you can find the ‘Add Plugins’ button that allows you to search for and install new plugins.

When picking out your plugins, take note of the fact that some plugins require a subscription to be able to use them. If you’re on a free trial plan, be aware that subscribing for a plugin also modifies your current subscription plan. You’ll then be charged for that plugin and for a month of the paid plan immediately, so consider waiting for your free trial to end before adding a paid plugin if you need it.

Once you’ve installed a plugin, you’ll see it in the Plugins tab. If the plugin is based on or from an external service, you might also need to enter an API key and/or secret to allow the service to identify your app. In this case, simply click on the plugin you want to configure, and enter the key in the tab that pops up.

The same configuration menu also allows you to uninstall your plugin, for when you no longer require its services. In most plugins, you’ll also find a form through which you can submit a review for the plugin. Bubble’s users are encouraged to make use of the form as the ratings system keeps the plugins marketplace alive and well.

Now that you know how to install plugins, let’s give you a quick sampling of the API integration Bubble app plugins, some of which were even built by the developers of Bubble.

Twitter

The Twitter plugin by Bubble is used by a staggering 9,994 apps and allows users to log in to their Twitter accounts from your app and check their latest tweets. To make use of it, you’ll need a Twitter account to access their developer portal here, as well as to agree with their terms of use for developers, in order to get an API key and secret for your app. You’ll also need to provide Twitter with a URL for your app’s terms of service and privacy policy pages, along with a callback page or where you want your users to be redirected on logging in.

Once you’ve complied with Twitter’s requirements, you can start setting up your app to allow your users to access Twitter. This is as simple as adding a workflow with the “signup/login with social network” step and adding it to an element like a login button. When your users clicks on the button or otherwise activates the login workflow, they’ll be redirected to a Twitter portal where they can log in before being redirected back to the designated callback URL.

Along with all this, the plugin also provides a “Twitter” data type that encapsulates your user’s Twitter profile information. Using this, you can conveniently add your user’s Twitter data to your database in a workflow.

Stripe

The Stripe plugin by Bubble is trusted by over a hundred thousand apps to process user payments, including transactions with the app, delayed charges, subscriptions, and even inter-user payment. The plugin requires live and development keys from your Stripe developer dashboard. It should be noted that Stripe itself provides two modes for its API use – test and live, the former keeps payments from being processed while you’re just testing your app.

Using the API allows you to charge the current user by asking for their credit card information where you can define the amount to be charged, the currency to be charged, who will receive the payment in the case of a marketplace, and an amount to be charged as an app fee, among others. The plugin also allows you to capture the customer’s credit card information in the same workflow, to be stored in your app’s database.

These are only a few of the actions that the Stripe plugin facilitates. Virtually all your in-app transaction processing and record keeping needs are handled by the plugin.

Plugins and third-party APIs allow your app to expand its reach and to become more deeply integrated into entire ecosystems of applications and web services. Through this, your app can become a more valuable part of your users’ everyday lives.

If you need more technical maintenance services, or assistance, or want to see more bubble FAQs answered, please feel more than free to avail of Bubblehelpers’ services and blogs.