We've included some guidance here to demonstrate how to manage additional features of the Canvas template.

Setting your password policy

Setting your password policy in the admin portal will automatically update the password check UI throughout Canvas

The Canvas template includes a built-in password check UI during the signup flow and anywhere the user is required to reset their password. By default the password policy is set to require 5 total characters and at least 1 number.

You can manage the requirements for your password policy directly from the Admin portal of your application. From the left menu click on Settings > Password policy.

There are four policies that can be set:

  • Password minimum length - This sets the total characters that are required for the password to be valid.

  • Require numbers (optional) - If checked you must set the total numbers required in the input to the right.

  • Require special characters (optional) - If checked you must set the total special characters required in the input to the right. Characters that qualify as special characters for this rule are "(", ")", "!", "@", "#", "$", "%", "^", "&", and "*".

  • Require uppercase letters (optional) - If checked you must set the total special characters required in the input to the right.

This is a Canvas feature and it does not utilize Bubble's built-in password policy feature. To use in conjunction with Bubble's built-in password policy, in the Bubble editor go Settings > General and set your password policy there as well.

Cookie Permissions & Consent Banner

We consider it a best practice to ask users for consent to save cookies before storing data on their device and have built this functionality directly into Canvas. To set this up properly, let's start in the Bubble editor.

Once you have the editor open, from the left menu navigate to Settings > General > Privacy & Security. Here we need to check the box that says 'Do not set cookies on new visitors by default'

Check 'Do not set cookies on new visitors by default'

Next log in to the admin portal, click on Settings > Cookies and toggle the 'Require users to agree to the storing of cookies in their browsers when they visit your website' to ON.

Element name: cookies_permission Purpose: Get the user's consent to store cookies on their device

The Cookie Consent Banner is built as a reusable floating group and by default is placed on the index page of your Canvas template and anchored to the bottom.

To add the consent banner to another page, drag it from the list of Reusable elements onto the design canvas of the page you would like to place it and make sure it is positioned at the bottom edge of the page.

Canvas cookie consent banner

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.