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
  • Overview
  • Select a Service
  • Plan Picker Settings
  • Show Customer Portal for Subscribers
  • Hide Tiers
  • Disable Tiers
  • Charge plan change immediately
  • Show monthly rate on Annual plans
  • Show discount on Annual plans
  • Show all interval plan on the same page
  • Hide the interval selector
  • Interval selector alignment
  • Default Interval
  • Custom Interval
  • Pre-applied Coupon
  • How to Identify Customers
  • Enable Security Hash
  • Customer Portal Settings
  • Checkout Form Settings
  • Language Settings
  • Automatically Detect User's Browser Settings
  • Add a Custom Resource
  • Advanced Settings
  • Enable Handle Response
  • Debug Mode
  • Embed
  • Authentication Secure Setup
  • Change Tier and Plan Order
  • Popular How-to's
  • Developers

Was this helpful?

  1. Billing Pages

Plan Picker

Plan Picker Overview, Features, & How-To's

PreviousActivate Live PaymentsNextCheckout Form

Last updated 3 years ago

Was this helpful?

Overview

The Billflow Plan Picker allows you to easily show your product pricing in your app, let users checkout, see what plan they're on, and change their plan. Because it's connected directly to your Stripe account, you never have to worry about updating your website when you change your pricing.

You have the option to show subscribers the current plan they are on, or automatically show the Customer Portal.

The Plan Picker has a simple HTML/Javascript embed so it can be embedded onto any website that will accept this common embed method. It authorizes users with a security hash generated with the logged-in user's email or Stripe Customer ID. This method of authorization allows Billflow to work with any authentication provider. Make sure to check out plugins to make integration easier.

Select a Service

Select the service you wish to create a Plan Picker for.

Not seeing a service listed that you created in Stripe? Make sure you have that service in the same mode (Test or Live) that your billing page is in.

Plan Picker Settings

Following are the options available on the Plan Picker

Show Customer Portal for Subscribers

The Plan Picker will always show plans to unsubscribed users. If a customer is subscribes, you have the option to then show them the Plan Picker with their selected plan, or to show the Customer Portal. If you are looking to have a distinct plan selection page, leave this option off. If you'd like to have an all-in-one page for subscribing and viewing billing information, turn this option on. Commonly used for Freemium models.

Hide Tiers

Want to hide a certain tier that's only available to a certain group or an a certain time? Use hide tiers to select from your available tiers and users will not see it as an option.

Disable Tiers

Want to disable certain tiers to run a promotion of things to come? Use disable tiers to select from your available tiers and users will see that tier greyed and unavailable now.

Charge plan change immediately

Use this option to charge a plan change immediately instead of prorating the difference on the current billing cycle. This will set the billing cycle anchor date to the date of the plan change.

Show monthly rate on Annual plans

Turn this option on to show how much the annual plans cost as a monthly rate. Eg: A $120/yr plan would show $10/mo billed annual

Show discount on Annual plans

Turn this option on to show a discounted flag on the annual plans.

Show all interval plan on the same page

This option will show all plans in the configured service together as opposed to showing only plans in a given interval with an interval toggle.

Hide the interval selector

This option will hide the interval toggle and show only the plans in the default interval. This can be used if you want to show only monthly plans on one page, and only annual on another.

Interval selector alignment

Choose the alignment of the interval toggle, left, right, or center.

Default Interval

Select a billing interval to be the default.

Custom Interval

Only use this option if you want to change the default interval and you have a custom interval like "Every 3 months" or "Every 6 weeks". The value will just be the number in your interval.

Pre-applied Coupon

Fill this option in with a Stripe Coupon ID or Promo Code to have a coupon automatically applied to any tier chosen. Useful feature for running a promotion on a specific URL.

How to Identify Customers

You must choose how you will identify customers. You have an option to pass in a customer's email address or their Stripe Customer ID in order for Billflow to look up their information in Stripe.

Identifying with email is simpler as it requires less data to store. Identifying with Stripe Customer ID is more robust because you do not need to handle email changes and is also needed when doing a tenant based architecture where multiple account are under the same group.

Enable Security Hash

Customer Portal Settings

Checkout Form Settings

Language Settings

All Billflow billing pages have the ability to automatically detect the customer's browser language preference and translate the billing page accordingly. If the language is not supported by our page, a default language will be displayed. The default language is English US.

Automatically Detect User's Browser Settings

Turn on to automatically detect the customer's browser settings and translate the page. If not enabled, select your default language. Not seeing a language you need there? Contact us on the chat to request a translation.

Add a Custom Resource

Advanced Settings

Enable Handle Response

Debug Mode

Turn on to enable debug mode for extra console logging.

Embed

Embedding the Plan Picker is a two-step process. For the client side installation just copy and paste the provided HTML snippet. The next step is secure setup.

Authentication Secure Setup

The customer portal must be behind some kind of user authentication in order to safely show customers their billing information. Billflow authenticates users with an HMAC hash generated for the logged-in user, this allow is to work with any authentication system. If you are using a No-code platform, make sure to check out our plugins as they handle this step for you. If you are integrating into a custom application, continue on.

Your code to generate an HMAC for your app must be placed in the back-end of your application. Grab the snippet from the dashboard to add to your server. You may generate the HMAC with the user's email OR the user's Stripe Customer ID (customer_id).

The HMAC generated will be passed to the client-side snippet to a property called 'hash'.

Don't see your server-side language listed? Let us know and we'll get a code snippet for you!

const crypto = require("crypto");
const email_hash = crypto.createHmac(
    "sha256",
    "YOUR_SECRET_KEY" // SECRET KEY (KEEP SAFE!)
).update(req.user.email).digest("hex") // PASS THIS TO FRONT-END
email_hash = OpenSSL::HMAC.hexdigest(
    'sha256', # HASH FUNCTION
    'YOUR_SECRET_KEY', # SECRET KEY (KEEP SAFE!)
    current_user.email # REPLACE WITH USER'S EMAIL ADDRESS
) # PASS THIS TO FRONT-END
import hmac
import hashlib

email_hash = hmac.new(
    'YOUR_SECRET_KEY', # SECRET KEY (KEEP SAFE!)
    request.user.email, # REPLACE WITH USER'S EMAIL ADDRESS
    digestmod=hashlib.sha256 # HASH FUNCTION
).hexdigest() # PASS THIS TO FRONT-END
$email_hash = hash_hmac(
    'sha256', // HASH FUNCTION
    $user->email, // REPLACE WITH USER'S EMAIL ADDRESS
    'YOUR_SECRET_KEY' // SECRET KEY (KEEP SAFE!)
); // PASS THIS TO FRONT-END

Generate an HMAC with SHA256 whenever a user logs into your app. Most web frameworks will have a method or library to help you do this. You'll need your app’s secret key and the email or user_id of the currently logged-in user.

Keep your secret key safe! Never commit it directly a public repository, client-side code, or anywhere a third party can find it.

Change Tier and Plan Order

You can modify the order that tiers appear from their default ordering by price. Metadata tags are used in Stripe to do this, add these to your Stripe Product.

Metadata Key

Description

Example Values

sb_pricing_tier_order

Add this metadata property to a Stripe Product. The lowest value tier appears left-most on your Pricing page.

1

sb_pricing_plan_order

Add this metadata property to a Stripe Plan. The lowest value plan appears higher on a tier with multiple pricing plans.

5

Popular How-to's

Developers

The pricing page has many more powerful features that can be unlocked with some simple coding. Check out the developer docs to learn more.

A Service is a collection of Stripe Products & Prices that make up the tiers & intervals of a service offering. If you have not created a service already, you will have the option to create a 'demo' service. To learn how to create your own service and specific pricing model, .

Turn on to enable security on your page in test mode. This option is required in live mode. In order for the customer portal to securely display customer billing information, a hash must be passed to the billing page options. This hash must be generated on the server with the logged in user's email or Stripe customer ID, whichever you are using to identify users. This step is covered in more detail in the .

If you enabled "Show Customer Portal for Subscribers" you will see Customer Portal Settings. To learn about the options available to it or about embedding a separate Customer Portal page, check out the .

When a user selects a plan before they have subscribed, it will automatically go to the correct Checkout Form for that tier. To learn more about the options available on it or about embedding a separate Checkout Form, check out the .

Turn this option on to pass in your own translations. This can be used to host your own language files, but can also be used to change the text of specific sections to your desired text. To learn more about this option, read along .

Turn on to enable the handleResponse function. The function is used to handle events with custom code when events happen on the billing page like button clicks and actions performed. To learn more about events available and sample code snippets, read along .

If you have a frontend framework, check out the of embedding with those.

Secret Key

Seeing 403s? You can verify your HMAC is being generated properly by creating one . Use "SHA256", pass in the customer's email or customer ID, and use your Billflow secret key as the secret. Compare that with what you're generating server-side and what's being passed to the client-side.

Don't forget to check out our !

real along here
here
samples
Get Your Secret Key
here
integration samples
Plan Picker Style Templates
Embed Configurations
Secure Setup
Checkout Form
Customer Portal
here