Add Stripe to Your Web App
You’ve worked hard on creating your app using Bubble and want to be rewarded for this hard work. You want to charge your customers but aren’t quite sure how. In this how-to video, you’ll see how the Stripe plugin can be used in your Bubble app so you enable your customers to pay you. And you can setup Stripe in your Bubble app for FREE! Note Stripe does take a fee for the production transactions, but you can test for free in your app’s Development environment!
For starters, you will need to create a Stripe account. Once it’s set-up, you’ll need to get the API keys from Stripe. Referring to the image below, there are two sets keys – one for testing and one for production. It’s important that you put “Bearer” with a space after it for the “Secret” key as shown in the image below(shown as “Authorization (shared headers”). Using the Stripe keys for Development is straightforward. For getting the Production keys, Stripe will need more information from you, ie bank account info. But you don’t need that information testing purposes which gives you some nice flexibility to quickly get going.
There are three basic Workflow steps needed for Stripe to work in your Bubble app. The first one is to setup your Customer’s account in Stripe. Your Customer’s email is all that’s needed (refer to image below).
Second step is to collect your Customer’s credit card information. Note that your Customer’s credit card information is not saved/stored in your app. The credit card information is used to create a token which Stripe uses for the transaction. Refer to Stripe’s documentation for more information.
The final Workflow step is to create the Stripe token. Note that the “Input Amount” is multiplied by 100. Reason being is the input value is in cents so the 100-multiplier is needed to convert to dollars. Make sure you add the 100x multiplier so you get paid the correct amount!
Those are the three high level steps to implement a one-time charge in your Bubble app using Stripe. The how-to video goes into more detail – check it out.
You’ve worked hard to create your app using Bubble. Now you can monetize all of that time and energy you’ve put into it. It’s a great feeling when you start seeing dollars show up in your Stripe dashboard.
Hi Echo Lake,
When I enter fake credit card info to the input, a Stripetoken is still created and a fake charge goes through. It should be triggering “A Stripetoken Couldn’t be Created”, but thats not what happens. A customer is created on the backend with Stripe, but no charge is created (because the CC info is fake probably). Any idea how I can actually use the “A Stripetoken Couldn’t be Created” workflow? Thanks!