Pricing Page

Pricing Page Overview, Features, & How-To's

Overview

The Billflow Pricing Page allows you to easily show your product pricing on your marketing site and let users checkout. Because it's connected directly to your Stripe account, you never have to worry about updating your website when you change your pricing.

You can chose to redirect users after they select a plan to your own signup process, or you can let users automatically go to the Billflow Checkout Form to enter payment information and then show them a custom message or redirect them to another step.

The Pricing Page has a simple HTML/Javascript embed so it can be embedded onto any website that will accept this common embed method.

Steps to create a Pricing Page

Select a Service

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, real along here.

Select the service you wish to create a Pricing Page 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.

Pricing Page Settings

Following are the options available on the Pricing Page

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 leads 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 leads will see that tier greyed and unavailable now.

Default Interval

Select a billing interval to be the default.

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.

Which checkout do you want to use?

Choose to show the default Billflow Checkout Form after Plan selection, or redirect to another URL. Redirect can go to an app for registration or to a different page for other checkout process.

Checkout Form Settings

When a user selects a plan on the Pricing Page, 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 Checkout Form.

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

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 here.

Advanced Settings

Enable Handle Response

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 here.

Debug Mode

Turn on to enable debug mode for extra console logging.

Embed

Embedding the Pricing Page is a one-step process. Just copy and paste the provided HTML snippet.

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

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

pagePricing Page Style TemplatespageUpdate Pricing

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.

pageEmbed Configurations