How to integrate

The first thing to figure out when integrating Stripe is what integration method you will use. There are 3 key methods that are worth considering:

Stripe Plugin by Bubble (v2)

This is the easiest and best integration method in most situations, as long as you don't need to go outside of the parameters of the plugin (see examples of those below). That's because it's one that's already deeply integrated with Bubble, which means it's the easiest.

When using Bubble's Stripe plugin make sure to install the Stripe Mobile Fix plugin as well, in order to prevent an issue on mobile that causes a floating blue button to show up. When you do this, make sure that that the logo/checkout image URL doesn't have any spaces within it, otherwise it won't show up.

Stripe Plugin by Bubble (v3)

When you've installed the Stripe plugin by Bubble, you can choose to use the V3 (SCA-compliant) version of the plugin. This should only be used when the client needs to be SCA-compliant, which essentially means that they are located in the EU or it's a Connect platform where the connected platforms are in the EU (more info here).

Manual Integration Using API Connector

Sometimes it's better to set up a more custom implementation. There are several types of specific situations when that's required:

  • When the Stripe ID shouldn't be stored on the User but instead should be stored on an Organization, etc.

  • When we want to be able to manually update the User's Stripe ID, such as when using Stripe Express (which isn't supported by the Bubble Plugin)

  • When we want to be able to make more complex API calls than what's allowed in Bubble. For example, for creating a payment for non-logged in user to third party user

Note that it's possible to combine the API connector with the Bubble Plugin. For example, you might do most of the actions with the Bubble Plugin and then add several API calls using the API Connector, to supplement the plugin functionality. However, in the situations described above it's better to do a fully manual integration.

Stripe Connect Options

When building marketplaces (one using paying another user), one of the decisions that we need to make is whether to use Stripe Connect Standard or Stripe Connect Express. You can see the full comparison here but here are a few considerations:

  • Standard is a bit easier for us to set up than Express, since we can use the Bubble Plugin most of the time.

  • Express has a simpler onboarding experience than Standard

  • Standard doesn't have any additional fees besides the basic Stripe ones but Express does.

  • Express allows for modifying the payout schedule for the user receiving funds while Standard does not.

Manual implementations

To do a manual integration, you can copy the API Connector from here and add more calls as needed per Stripe's Reference. Also add in the Stripe Credit Card Form Popup plugin, in order to collect credit card info. Some common flows are described below.

Standard payment flow

  • Run the Create customer call and save the returned ID on the User

  • Open the credit card popup from the plugin and use an event to save the Token returned onto the Stripe Customer using the Add payment source API call

  • Do the Charge user call, using the Customer ID above

Stripe Express

Stripe has several different ways that you can implement Stripe Connect, which are listed out here, one of which is Express.

An example of the Express set up is shown here (editor | live) and here are some notes:

  1. Add the Stripe Credit Card Form Popup plugin to your application and copy in the API Connector calls

  2. Create new fields to capture the Customer ID and Seller ID on the User object

  3. Create a new page (called stripe_authorize in the example above) that will serve as the redirect page for Stripe after the account is connected. On that page add in a workflow that will retrieve the account ID based on the code received and save it to the user

  4. Add that URL to the list of redirect URLs in Stripe Connect settings

  5. When the user registers to receive payments, have them go to the Stripe Oauth URL to set up a new Stripe Connect account (shown in the example above). For this to work in test mode you must use the test values on this page (including DOB, first line of address, last 4 of ID, phone number, bank account number).

  6. To collect credit card info use the credit card form popup. Then have an event that uses the token returned by the popup to attach it to the user.

Manual Payouts

Stripe supports manual payouts to Connect accounts, which can act similar to an Escrow account.

The manual payout can only be used with a live key.

To use those, just do the following:

  1. After the Express account is first created, just make an API call to set the payout type to "manual" (more info here). This will ensure that when a charge is made, it will be sent to the recipient's Stripe account but won't be withdrawn into their bank account for 90 days.

  2. When the payment is ready to be withdrawn (such as when the transaction is finalized), just run a call to create a payout with the amount that the user should be paid out, at which point the amount will be transferred from their Stripe account to their bank account.

Using Apple/Google Pay

‚ÄčPlease see this application for an example of how to set this up.

You can configure Stripe to use Apple/Google Pay using Stripe's Payment Request API. To do so you'll need to install this plugin. You can use this documentation by the plugin creator or follow the steps below:

  1. Install the plugin linked above

  2. Install the Stripe Plugin by Bubble (optional, only if you need to also be able to charge credit cards without Apple/Google Pay)

  3. Install the Stripe Plugin by AirDev (you'll need to ask us to authorize it) or another Stripe plugin (like Stripe.js) that allows you to use a card token to create a charge

  4. Put the application on a live domain name

  5. Activate the Apple Pay set up in Stripe, under Settings. You'll need to download the file that Stripe provides you and upload it in Bubble under Settings > SEO/Metatags > Hosting files in root directory. When you upload the file, the name you should give it is .well-known/apple-developer-merchantid-domain-association

  6. Add an Air Pay Request element to a page and dynamically set its amount to be the amount you want to charge

  7. Create a new event when the card token is created using the element in step 6. Then, within that event have a "Charge a user" action that accepts a card token. Finish the workflow by running a "Complete payment" action.

Plaid & ACH Payments

Stripe ACH payments can currently only be done from user-to-app (i.e., collecting fees). For a more flexible option (bank-to-bank), try Dwolla + Plaid.

In order to collect ACH payments, we have to connect a user's bank account to Stripe. That can be done in 2 ways:

  1. Manually adding account with deposit verification -> this involves adding the account number & routing number to Stripe, which will then make small deposits, which the user has to verify.

  2. Automatically adding account using Plaid -> this involves a flow where the user enters their bank credentials and the account is automatically added.

Please reference this example for the Plaid implementation (editor | preview). Here's the high-level flow of how to set it up:

  1. Make sure that your Plaid account is connected to your Stripe account - you can do that in the Plaid Settings.

  2. Run the Plaid Link code in order to start the flow. You can see more about this code here.

  3. When the flow is finished, you have to run the following sequence of API calls:

    1. Plaid - Exchange public token for private token

    2. Plaid - Create Stripe bank token from private token

    3. Stripe - Add payment source using bank token

After the above is done the bank account should be connected and ready to use. If it's the only/default payment method for the customer it will automatically be used with every charge. Alternatively, you can now specify its as the source field when creating a charge.