Stripe Manual Integration

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 below it's better to do a fully manual integration.
How to's
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.

Stripe Plugin

Next - Resources

Date/Time Operations

Last modified 7mo ago

Copy link

Outline

Manual Integration Using API Connector

How to's

Standard payment flow

Stripe Express

Manual Payouts

Using Apple/Google Pay

Plaid & ACH Payments