> For the complete documentation index, see [llms.txt](https://docs.billflow.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.billflow.io/no-code-integrations/no-code-app-builders/bubble.md).

# Bubble

## Description

The Pricing Page element in Bubble connects Bubble to the Billflow [Pricing Embed](https://www.servicebot.io/pricing-portal). You can use all the functionality of Billflow along with some useful Bubble events to perfect your billing system within a Bubble application. 

{% embed url="<https://www.youtube.com/watch?v=GbaixVS6E4I>" %}

## Supported Pages

* Plan Picker
* Checkout Form
* Customer Portal
* Pricing Page
* Invoice Portal

## Using the pricing page element in Bubble

### Drag and drop

After installing the Billflow plugin for Bubble, drag the "Pricing Page" element from the Visual Elements Section, resize the element to your liking.

![](/files/-MJ3xuO5F3S0rPb8e347)

### Add Billflow configuration JSON

Go to your Billflow dashboard and customize the pricing page to your specifications.&#x20;

Once fully configured, click "Embed Pricing Page", and copy the code in the "Bubble" section, and past in the configurationJSON section within Bubble

![](/files/-MJ3ySZvKigFLVrXfH-k)

### How to prompt for a password

To prompt for a password if you want users onboarded using Billflow, make sure to have this option enabled:

![](/files/-MJ3ymXMCQpBAwoztNmx)

## Pricing page events and states

![](/files/-MJ3yr-o_vusS2Zcfboq)

With the element, you can call workflows based on the following events, with the following states available within each:&#x20;

**User Subscribed** - Triggered when a user subscribes using the Pricing Embed\
**User Subscribed States:**

* **user\_subscribed\_email -** The email entered on the form
* **stripe\_subscription\_id -** The ID of the [Stripe Subscription](https://stripe.com/docs/api/subscriptions/object) created
* **stripe\_customer\_id -** The ID of the [Stripe Customer](https://stripe.com/docs/api/customers/object) created
* **user\_subscribed\_password -** If promptPassword option is true, the password
* **user\_subscribed\_tier -** [**The sb\_tier**](https://docs.servicebot.io/subscription-portal/setup-your-stripe-account#metadata) **of the subscription that was created**
* **user\_subscribed\_status -** The [subscription status](https://stripe.com/docs/api/subscriptions/object#subscription_object-status) as it is in Stripe

## Using the subscription portal element in Bubble <a href="#using-the-subscription-portal-element-in-bubble" id="using-the-subscription-portal-element-in-bubble"></a>

### Drag and drop <a href="#drag-and-drop" id="drag-and-drop"></a>

After installing the Billflow plugin for Bubble, drag the "Subscription Portal" element from the Visual Elements Section, resize the element to your liking.

![](https://gblobscdn.gitbook.com/assets%2F-LkAdq4qKmsg1iQv3yZn%2F-M2dm4uuUhczPg2c_eXK%2F-M2tXJe1s3qKmzIcItxt%2FScreen%20Shot%202020-03-20%20at%2012.31.19%20PM.png?alt=media\&token=69b74005-63c5-4e7e-ba68-d77a5c829838)

### Set up Authorization HMAC <a href="#set-up-authorization-hmac" id="set-up-authorization-hmac"></a>

There is a field in the Subscription Portal element called "Authentication HMAC" this represents a secure code that must be generated in order for Billflow to authenticate users to access their subscription information.

In order to generate this, please select: **Insert Dynamic Data -> Get Data from an External API ->** Billflow **API - Generate HMAC's hmac**

The email should be the Current User's email, the secret can be found on the [integration page within Billflow](https://dashboard.billflow.io/integrations) (Note: Test mode secret is different from Live mode secret).

![](https://gblobscdn.gitbook.com/assets%2F-LkAdq4qKmsg1iQv3yZn%2F-M2dm4uuUhczPg2c_eXK%2F-M2tXdsyfKunq1y15yzS%2Fimage.png?alt=media\&token=59bf0b28-09c2-49ce-9920-7139b8c93a10)

## Subscription portal events and states

With this element, you can call workflows based on the following events, with the following states available within each:&#x20;

**Cancel Subscription Event** - Triggered when a user subscribes using the Pricing Embed

**Cancel Subscription States -**

* **current\_status -** The current status of the Stripe subscription

**Resubscribe Event** - Triggered when a user resubscribes

**Resubscribe States** -&#x20;

* **current\_subscription\_id** - The current ID of the Stripe subscription (resubscribe creates a new subscription if the subscription was completely canceled)
* **current\_status** - The status of the Stripe subscription

**Change Tier Event** - Triggered when a user changes their plan/tier

**Change Tier States -**

* **current\_tier** - The current tier that the user switched to