Stripe Plugin
Stripe is one of the most popular tools for processing payments on behalf of your application. They take care of all the logistics and legalities involved in charging and paying out your customers, providing a number of endpoints which your Bubble app can access. The types of things Stripe can do are:
- Charging users (usually via credit card, Apple/Google Pay)
- Paying out funds to users' bank accounts
- Signing users up to subscriptions
- Discounts and coupons
See the Canvas module Stripe Credit Card Purchase Popup for one example of charging customers with Stripe.
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:
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.
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).
1. Install the plugin
2. Open your Stripe account (or create one if you haven't already)
3. Open the Developers section
4. Click API keys 
5. Copy the Publishable and Secret keys and paste them into the corresponding fields in the plugin page
6. You'll also want to copy across the test development keys, which will be used anytime you access the Stripe API from the test version of your app. To see those, simply toggle on View test data 
If you're using Stripe connect, you'll also need to paste in the Client IDs and setup redirect URI settings, which can be found under Settings > Connect settings. See Bubble's Stripe plugin documentation for more info.
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
(username = username | password = password)
Use the Charge the current user or Charge a user using saved CC actions to trigger a Stripe-hosted flow for charging a payment to a user's credit card. The latter option charges a credit card saved to the user via the Collect the user's CC information action.
This is how the UX looks with v2 of the plugin
When setting up the Charge action, you have the option to Authorize the charge only.
This can be used when you want to complete the checkout flow for a user, but only want their card to actually be deducted the payment amount at a later time (for example, if a property owner needs to confirm a booking).
When it comes time to capture the charge, use the Capture an authorized charge action.
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
- Express allows for modifying the payout schedule for the user receiving funds while Standard does not.
(username = username | password = password)
You'll also need to paste in the Client ID, which can be found under Settings > Connect settings. See Bubble's Stripe plugin documentation for more info.
2. Add your redirect URI
Still under your Connect settings, you can add a redirect URI. Stripe needs this to know how to navigate users who finish their Connect account setup.
At time of writing, this redirect URI should be https://bubble.io/poststripeauth (or https://d##.bubble.is/poststripeauth for Dedicated environments) - check Bubble's Stripe plugin documentation for the most up to date link).
3. Setup your 'Register as a seller' logic
There's an action in the Stripe plugin called Register the user as a seller. Users will need to do this to be eligible to receive payouts.
Usually you'll want to tie this to a button click.
Triggering the action will launch a Stripe hosted form where the user can enter their details, including the bank account where their payouts will land. See GIF below (note this shows the test version, which allows you to skip the form. In the live version the user will be required to fill out a multistep form):
Once the user has registered with Stripe, the same Register the user as a seller action can be used to update their bank account.
You can determine whether or not they are already registered by accessing the current user's Stripe Seller account. Check if this is empty or not and configure the button text to reflect whether or not they are already registered.
4. Set up the payment actions
Wherever you set up an action to charge a user using the Stripe plugin, you'll have the option to tick The payee of this transaction is another user. Doing this will ensure that the payment amount (minus any app fee you set) will be routed to the sellers connected bank account.
The app fee takes a dollar amount which will be deducted from the payment amount before payout to the connected user. If your app fee is a percentage, simply multiple the payment cost by that percentage.
The app fee will be retained in your (or your client's) Stripe account before being paid out periodically to the bank account on file. I
Last modified 1yr ago