Billflow
  • Quick Start
  • Setup
    • First Time Setup
      • Connect & Setup Stripe
      • Invite Team Members
      • Create Your First Billing Page
      • Embed The Billing Page
      • Activate Live Payments
  • Billing Pages
    • Plan Picker
    • Checkout Form
    • Customer Portal
    • Pricing Page
    • Invoice Portal
  • How-to's
    • Setup Pricing
      • Flat-rate Subscriptions
      • Free Trial
      • Unit-based
      • Meter-based
      • Setup Fees
      • One-Time Payment
      • Payment Plans (Subscription Schedules)
      • Complex Pricing
      • Add-ons
    • Connect to SaaS
      • Using Stripe Webhooks
    • Change Style
      • Plan Picker Style Templates
      • Customer Portal Style Templates
      • Pricing Page Style Templates
      • Checkout Form Style Templates
    • Update Pricing
    • Use Coupons
    • Enable Quantity Management
    • Enterprise Sales Flow
    • Cancellations/Payment Failures
      • Set up Cancellation Feedback
      • Configure Dunning Emails
    • Automated emails
    • Internationalization
      • Support multiple currencies
      • Support multiple languages
    • Upgrade to new Billing Pages
    • Record Usage
    • VAT & Taxes
    • Indian Recurring Payments
  • No-code Integrations
    • No-code App Builders
      • Bubble
        • How to connect Stripe webhooks to Bubble
      • Webflow
      • WordPress
        • Add Widgets
        • Advanced Usage
        • Useful Plugins
      • Notion
      • Drupal
    • Rewardful
    • ChurnKey
  • Developer Docs
    • Embed Configurations
      • Plan Picker Configs
      • Checkout Form Configs
      • Customer Portal Configs
      • Pricing Page Configs
      • Invoice Portal Configs
    • Handling Events
    • Languages & Frameworks
    • Customize Elements
    • Versions & Beta Testing
  • Help
    • Managing Account & Team
      • Reset Your Password
      • Manage Team Members
    • Frequently Asked Questions
    • Changelog
Powered by GitBook
On this page
  • Description
  • Supported Pages
  • Using the pricing page element in Bubble
  • Drag and drop
  • Add Billflow configuration JSON
  • How to prompt for a password
  • Pricing page events and states
  • Using the subscription portal element in Bubble
  • Drag and drop
  • Set up Authorization HMAC
  • Subscription portal events and states

Was this helpful?

  1. No-code Integrations
  2. No-code App Builders

Bubble

Bubble Plugin Instructions

PreviousNo-code App BuildersNextHow to connect Stripe webhooks to Bubble

Last updated 4 years ago

Was this helpful?

Description

The Pricing Page element in Bubble connects Bubble to the Billflow . 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

  • user_subscribed_password - If promptPassword option is true, the password

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

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

stripe_subscription_id - The ID of the created

stripe_customer_id - The ID of the created

user_subscribed_tier - of the subscription that was created

user_subscribed_status - The as it is in Stripe

The email should be the Current User's email, the secret can be found on the (Note: Test mode secret is different from Live mode secret).

Stripe Subscription
Stripe Customer
The sb_tier
subscription status
integration page within Billflow
Pricing Embed