Template Setup Guides

Connecting Stripe Payment using Stripe Plugin


This is a setup guide which will follow step by step instruction connecting Stripe to Bubble application, by getting the API Keys and ClientID

Initial Setup

Bubble Settings

  1. Install the Stripe Plugin inside your Bubble Application

2. After installation you'll be able to fill the Stripe's plugin settings the fields with API keys found in your Stripe Dashboard and manage additional settings like Image and Name for your Stripe Checkout

3. Fill in the API keys and Client ID fields for Sandbox/development and Live found in Stripe Dashboard under Developers tab and then, API keys.

Note: Ensure to use a live API keys when your application goes live.

To obtain live API Keys the account should be activated.

4. You're all set with the Stripe payments settings.

5. Now you can access plugin actions

Stripe dashboard

  1. Access and register as developer account.

  2. You will be allowed to access your dashboard and accept live payments once you have successfully verified your email address and activated your account, under the Activate your account tab.

3. Once you've set and activated account, go to Developers tab and then API Keys to get your keys for app. For Secret key, press to reveal the key token, the Publishable key simply copy it.

4. For Client ID, you'll need to enable Connect feature in your Stripe Dashboard. Go to Connect tab complete the steps to register your platform and press Continue.

Note: In order to register the platform the account should be activated.

For sandbox mode there is no need to activate the account.

5. After that, go to Settings tab, then scroll down to access Connect Settings.

6. Once accessed Connect Settings see the Integration menu below to see the Client ID which is required alongside API Keys in plugin setup.

7. Next step is to add ( URI to both live and development Redirects under the Connect Settings, Integration menu as default URIs.

Note: 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

Note: STRIPE CHECKOUT, the complete checkout experience. A prebuilt Stripe payments page, with customizable branding. Used for making One-time Payments or Recurring Payments.

Stripe Plugin Actions

Charge the current user - This action charges the current user and prompts them to enter their credit card information.

Register 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 user using saved CC - This action charges a user who has already entered their credit card information. It does not have to be the current user in this case. 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. 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. Important: 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.

More about Stripe actions -