Bubble

Bubble Plugin Instructions

Description

The Pricing Page element in Bubble connects Bubble to the Billflow Pricing Embed. You can use all the functionality of Billflow along with some useful Bubble events to perfect your billing system within a Bubble application.

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.

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

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:

Pricing page events and states

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 created

• stripe_customer_id - The ID of the Stripe Customer created

• user_subscribed_password - If promptPassword option is true, the password

• user_subscribed_tier - The sb_tier of the subscription that was created

• user_subscribed_status - The subscription 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.

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 (Note: Test mode secret is different from Live mode secret).

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