Use Stripe in your Bubble app

How to Charge Customers Using Stripe Payments in Your Bubble App

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.

Stripe in your Bubble web app
Adding Stripe plugin to your Bubble app

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).

Adding Your Customer to Stripe
Adding Your Customer to Stripe

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.

Stripe Token
Capture your Customer’s Credit Card 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!

Stripetoken created
The Second Part to Creating a Stripe Token

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.

Submit the form below and I’ll give you FREE ACCESS to this and many other designs in Bubble.

1 thought on “How to Charge Customers Using Stripe Payments in Your Bubble App”

  1. 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!

Leave a Reply