This guide will help you configure the Stripe plugin to process payments in your Bubble app.
The following instruction consists of two parts: Stripe Dashboard, and Plugins Tab within your Bubble editor.
You can also check the Stripe Plugin Actions section to learn about its available features.
☝
Please note that the below setup steps are recommended for default template setups.
If you change the payment logic within the template, please change the Stripe account setup accordingly.
⚠️
Please note that the Stripe dashboard design is subject to change so the provided screenshots might not correspond with the actual dashboard UI.
Still, all the below-mentioned settings are present and should be set as per the guiding document.
Stripe Dashboard
Go to stripe.com and register as a developer account.
Verify your email address and then activate your account, in order to be allowed to access your dashboard and accept live payments.
☝
Note: If you intend to use the test version first, you can postpone completing your business profile (to be able to use the live keys).
Use the default account or create a new one:
Go to Developers -> API keys to grab your 🔑 keys.
For the Publishable key, just click on it to copy. Save it somewhere as you'll need it later on.
For the Secret key, press to reveal the key token. Save it somewhere as you'll need it later on.
5. Enable the Connect feature in your Stripe Dashboard.
Get started with Connect:
Pass the Connect setup guide:
On the guide’s Funds flow tab,
if you are the owner of the platform, and sellers are registering within your app, select the first option (Sellers will collect payments directly):
if you are the direct service provider, select the second option (Buyers will purchase from you):
d. After acknowledging the liabilities, select the first option of how the sellers will be paid out (individually):
e. In the next steps, select the categories that fit your product the most:
f. On the tab “Where will sellers create their accounts” select the first option - “Onboarding hosted by Stripe”
g. On the tab “Where the sellers will manage their account”, select the first option “Express Dashboard”:
h. Then - review your setup and press the “Continue” button.
To set up everything properly, and to have a correct redirect back to Bubble platform after purchase, one more step is required.
Namely, to set the link for Stripe Auth within the Connect settings.
For that, enter the current account settings:
Select the Connect option:
Select “Onboarding Options”
Select the OAuth tab
☝
Copy the Client ID. Save it somewhere as you'll need it later on. You will use it within your app, in Stripe plugin fields (Client ID).
Copy the following URI:
javascript
https://bubble.io/poststripeauth
And add it to your Redirects URI as a Default URI, here:
And don’t forget to switch the “Enable OAuth” toggle on:
☝
Tip: With Stripe Connect you can process payments from customers, transfer money to and from connected accounts, and pay out funds to bank accounts and debit cards.
Connect is a flexible combination of features designed to support a wide range of use cases:
Crowdfunding services
E-commerce platforms
Marketplaces
☝
Tip: Stripe Checkout is the complete checkout experience. A prebuilt Stripe payments page with customisable branding. Used for making One-time Payments or Recurring Payments.
Here, you are all set up so far.
✅
Congrats! You have successfully configured the Stripe Dashboard. Now, you can configure the plugin in your Bubble app.
Plugins Tab
☝
Tip: If you are using one of our templates, the Stripe plugin has already been installed. You just need to configure it.
1. Go to the Plugins Tab within your Bubble editor, and install the Bubble's Stripe plugin.
2. Paste the obtained Client ID, Secret key and Publishable key from your Stripe Dashboard.
As well as manage the additional settings like Image and Name for your Stripe Checkout.
☝
Note: When just installing the plugin and trying to test the app on preview, please use the TestAPI Keys from your Stripe Dashboard that need to be entered in the development fields in the Plugins tab.
For testing purposes, it is possible to enter the Test API Keys for all the plugin fields (both live and development).
Then, when ready to go live with the app, please ensure to use Live API Keys for the live fields in the Plugins tab. To obtain Live API Keys, the account should be activated.
💡
Tip: Genuine card information cannot be used in test mode. Instead, use test Stripe cards credentials.
✅
Congrats! You have successfully configured the Stripe plugin. Now, you can test the payments in your Bubble app.
Stripe Plugin Actions
Charge the current user.
This action charges the current user and prompts them to enter their credit card information.
Register the user as a seller.
This action enables users to become merchants on your platform.
For example, if you want to build a marketplace where users can sell their work to someone else, then they need to be able to credit their account when a transaction occurs.
Collect the user's CC information.
This action prompts the user to enter their credit card information without actually charging the card.
Charge a user using saved CC.
This action charges a user who has already entered the credit card information. It does not have to be the current user in this case.
☝
Note: If no credit card information is available, the action will fail.
Subscribe the user to a plan.
This action subscribes a user to a plan, which was previously defined in Stripe. Then, the card will be charged on a regular basis.
💡
Tip: If the user is already on a plan, their subscription will be updated to the new plan. If the user fails to enter their credit card information, the workflow will stop running.
☝
Note: Since the app has two versions - Development and Live - you need to have both versions of your account in Stripe to have the same plans with the same IDs.
💡
Tip: To learn more about Stripe actions, click here.
