# 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="" %} ## 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. ![](https://3989701610-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEUoaSM3Rb7cfrwwBCO%2F-MJ3wc9312nGIpmtT-My%2F-MJ3xuO5F3S0rPb8e347%2Fbub1.png?alt=media\&token=a05e80d6-7b16-4893-8ced-20564bb3286f) ### Add Billflow configuration JSON Go to your Billflow dashboard and customize the pricing page to your specifications. Once fully configured, click "Embed Pricing Page", and copy the code in the "Bubble" section, and past in the configurationJSON section within Bubble ![](https://3989701610-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEUoaSM3Rb7cfrwwBCO%2F-MJ3wc9312nGIpmtT-My%2F-MJ3ySZvKigFLVrXfH-k%2FScreen%20Shot%202020-10-07%20at%205.31.08%20PM.png?alt=media\&token=69236354-eca1-48ef-b708-84b83ed0ceb9) ### 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: ![](https://3989701610-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEUoaSM3Rb7cfrwwBCO%2F-MJ3wc9312nGIpmtT-My%2F-MJ3ymXMCQpBAwoztNmx%2FScreen%20Shot%202020-10-07%20at%205.32.08%20PM.png?alt=media\&token=667d38af-d6c2-418a-bd53-31bf5ffd629f) ## Pricing page events and states ![](https://3989701610-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEUoaSM3Rb7cfrwwBCO%2F-MJ3wc9312nGIpmtT-My%2F-MJ3yr-o_vusS2Zcfboq%2Fbub4.png?alt=media\&token=619d15ca-1aef-4fe6-9baa-cad929535594) With the element, you can call workflows based on the following events, with the following states available within each: **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 ### Drag and drop 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 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: **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** - * **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