Set up Payment info on Account page

Canvas comes with built in UI on the Account page for displaying the saved credit card details for your users as well as a history of transactions they have initiated.

Before setting up payments, from your Bubble editor navigate to Plugins > Add Plugins and search for Stripe. Install the plugin that was made by Bubble.

The Bubble stripe plugin adds additional fields to your user data type that can now be accessed.

In the credit card display we use a group called 'Group credit card brand name' to manage many of the conditions for this view.

Credit card view in Editor

Payment Workflows/Logic

After you have connected the existing UI, you will still need to set up the logic for the payment process. This includes:

1. Saving payment information (credit/debit cards)

2. Running the appropriate workflows from Stripe (or your payment provider)

3. Recording any other relevant information in your app

   1. Responses from the workflows in step 2

   2. Last 4 digits of card (for identification)

You will need to set most of this up on your own.

One option that is available through Canvas is a Purchase Popup that contains the necessary UI and workflows to save or delete users' credit card info via Stripe. The visual part of this popup can be used for other payment providers, but the workflows are specific to Stripe.