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
  • Customer Portal Settings
  • How to Identify Customers
  • Enable Change Plan
  • Allow Resubscribe
  • Allow Plan Change for Canceled Subscriptions
  • Enable Coupon
  • Enable Security Hash
  • Enable coupon for resubscribe
  • Show pricing for logged in users
  • Use Dropdown menu for subscription actions
  • Enable update card
  • Show all customer invoices
  • Enable quantity management
  • Enable cancellation
  • Cancellation Reason
  • Cancel Immediately
  • Confirmation message when user requests cancellation
  • Language Settings
  • Automatically Detect User's Browser Settings
  • Add a Custom Resource
  • Advanced Settings
  • Enable Handle Response
  • Debug Mode
  • Authentication Settings
  • Integrate with existing authentication
  • Billflow email auth
  • Embed
  • Authentication Secure Setup
  • Popular How-to's
  • Developers

Was this helpful?

  1. Billing Pages

Customer Portal

Customer Portal Overview, Features, & How-To's

PreviousCheckout FormNextPricing Page

Last updated 3 years ago

Was this helpful?

Overview

The Billflow Customer Portal gives your customers a page to self-manage their subscriptions. It works with any subscriptions created in Stripe whether that be from Billflow, a custom Stripe integration, or another 3rd party app.

You can configure the actions a user can perform in the portal, as well as enable options to increase up-sells and reduce churn.

The Customer Portal 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.

Customer Portal Settings

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 Change Plan

Allow Resubscribe

Turn on to allow customers who have cancelled their subscription to resubscribe. Stripe does not allow a subscription in 'canceled' state to become 'active' again so this creates a new subscription based on the same Product.

Allow Plan Change for Canceled Subscriptions

Turn on to allow customers with a canceled subscription to change their plan and resubscribe. Both Change Plan and Resubscribe need to be enabled to allow for this feature.

Enable Coupon

Enable Security Hash

Enable coupon for resubscribe

Turn on to allow customers to enter a coupon code when they resubscribe to a cancelled subscription. This is a great way to gain back previously canceled customers.

Show pricing for logged in users

This will show the plan picker for logged in users who have a subscription. In most scenarios, if using this option you should create a Plan Picker instead. Useful if you only need to show plans for existing customers.

Use Dropdown menu for subscription actions

Turn on to have the subscription actions be in a dropdown instead of buttons.

Enable update card

Show all customer invoices

Turn on to show all customer invoices including one-time invoices. By default, the invoices section will only show invoices related to the subscription the customer is viewing. If you do enterprise deals or one-off invoicing for services, enable this so customers can view all their invoices.

Enable quantity management

Enable cancellation

Turn on to allow customer to self-service canceling their subscription. Self-service reduces customer support load, but disabling can create more feedback for customer success teams.

Cancellation Reason

Turn on to ask customers why they are leaving. This will prompt the customer to give a reason for their cancelation so you can improve your service. The reason will be added as metadata on the cancelled Stripe subscription.

Cancel Immediately

Turn on for the subscription to cancel immediately. By default, the subscription will cancel at the end of the billing period.

Confirmation message when user requests cancellation

Customize the message the user sees when they confirm their cancellation.

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.

Authentication Settings

There are two ways to get users authenticated with the customer portal to securely view their billing information.

Integrate with existing authentication

Billflow email auth

The second method is to use Billflow's Email Authentication option. This option allows you to add the customer portal to any website and simplifies the installation. If a customer goes to the page on your site with the customer portal, they will first see an option to enter in the email to get an access link. Submitting will send them an email which will take them back to the same page with a token, allowing them to view their billing information.

Set your company name that the email sender should be shown as. Set your redirect URL to the URL where you have embedded the customer portal. A token will automatically be added to that URL when emails are sent.

Embed

Embedding the Customer Portal 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.

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.

Turn on to allow customers to change their plan. This will allow them to upgrade or downgrade between available tiers and change their billing interval. You must have a Service configured to use this feature, if you have not created a Service, you can read how to .

Turn on to allow customers to enter a coupon from the customer portal. This feature is great for running promotions and retention campaigns. The coupon codes are configured in the Stripe Dashboard, to learn how read .

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 .

Turn on to allow customers to update their payment information. This is a great way to reduce churn as a big amount of churn simply comes from expired or canceled credit cards. For more information on handling dunning, read .

Turn on to allow customers to change the quantity of their subscription. This feature requires an additional metadata tag and unit label on the Stripe Product. Read to learn about using this feature.

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 .

The first method is to integrate with your existing authentication system if you have one for your app or website. This will be the preferred choice for SaaS applications. For more details on that, jump to the section.

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 !

here
here
here
here
here
samples
Get Your Secret Key
here
integration samples
Customer Portal Style Templates
Enable Quantity Management
Connect to SaaS
Embed Configurations
Secure Setup
Secure Setup
here