Pricing Page
Pricing Page Overview, Features, & How-To's
Last updated
Pricing Page Overview, Features, & How-To's
Last updated
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.
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.
Following are the options available on the Pricing Page
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.
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.
Select a billing interval to be the default.
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
Turn this option on to show a discounted flag on the annual plans.
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.
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.
Choose the alignment of the interval toggle, left, right, or center.
Select a billing interval to be the default.
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.
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.
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.
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.
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.
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.
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.
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.
Turn on to enable debug mode for extra console logging.
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.
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
The pricing page has many more powerful features that can be unlocked with some simple coding. Check out the developer docs to learn more.
