Implement Billing Portal Login for your Customers

This guide will help you implement 1 of 3 Billing Portal login methods. When you're finished, your customers will be able to log in to their portal.

Website link One-click sign on


Summary - Email Invite

Chargify Feature
Billing Portal
You Need
Billing Portal enabled; a test subscription
Code
No
Difficulty
◎◎

Configure an Invite via Email Diagram

This method is the easiest to implement. Your users will simply receive an invite email, with a login link, upon signing up for your services.

1. Enable Settings
You may have some or all of these configured already.

  1. Configure automatic email invitations
    Go to Config > Settings > Billing Portal. Under "Subscriber Invitations", select "Automatic invitation emails for new subscribers". This is typically enabled by default.

  2. Configure management links
    Go to Config > Settings > Billing Portal. Under "Management Links", select "Require customers verify their email before logging in". This is typically enabled by default.
2. Configure email invite login flow
Under Config > Settings > Billing Portal > Features > Allow Password Logins, you can determine if the user will be prompted for a password.

- Enable 'Allow Password Logins' if you want the user flow to look like the Request Password image below.
- Do not enable 'Allow Password Logins' if you want the user flow to look like the 'Do not request password' image.

Request password
billing-portal-with-password.png

Do not request password
billing-portal-no-password.png
3. Configure the email template
Go to Config > Settings > Billing Portal. Under "Invitation emails", click the "Edit Template" button. Customize the email as needed. 

Need a quickstart template? Try this one. Get the code
Screen_Shot_2022-06-23_at_8.35.45_AM.png

 

4. Test
Create a subscription with an email address you have access to. Review the email and the login flow. Make adjustments to your settings as needed. 

 


Summary - Website Link

Chargify Feature
Billing Portal
You Need
Billing Portal enabled; a test subscription
Code
Basic HTML (create a link)
Difficulty
◉◉

Implement a Link from your Website Try it out Diagram

This method is best for businesses who do not have user logins to their website, but still want to link customers to the Billing Portal from their website. 

1. Determine your portal URL

This will walk you through how to determine your URL.

  1. Get your Subdomain
    When you are logged into Chargify, go into your Site Dashboard. On any page, you will see the URL. The subdomain is shown in red below.

    get-subdomain.png

  2. Structure portal link

    The URL will have this structure:
    https://www.billingportal.com/s/SUBDOMAIN

    With your subdomain, it will look like:
    https://www.billingportal.com/s/demo-9469680429/login/password

  3.  Select link type

    To link to the main login page, use:
    https://www.billingportal.com/s/SUBDOMAIN/login/password

    To link to the page, where a user can request a login link, use:
    https://www.billingportal.com/s/SUBDOMAIN/login/magic

    If you're unsure, create these real links with your subdomain, and test them out. Once you know which type you prefer, continue to the next step.

2. Add the link on your website HTML Client-side
In your website code, you'll need to add an HTML link.

 

  1. Write the HTML
    Here is an example linking to the main login page:
    <a href="https://www.billingportal.com/s/SUBDOMAIN/login/password" target="_blank">Manage Your Subscription</a>

    Here is an example linking to the request-a-login page with a prefilled email:
    <a href="https://www.billingportal.com/s/SUBDOMAIN/login/magic?email=EMAILHERE" target="_blank">Manage Your Subscription</a>
  2. Edit the call to action
    The example says "Manage Your Subscription". Change this as needed. 

  3. Deploy your code
    You're finished.

3. Test
Go to your website, click the link, and test the flow. Make adjustments as needed.

 


Summary - One click sign on

Chargify Feature
Billing Portal
You Need
Billing Portal enabled; a test subscription
Code
Yes - backend and frontend
Difficulty
◉◉◉

Implement One-click Sign On Try it out Diagram

This method is best if you have a web app, and you want your logged-in users to click a button to access their Billing Portal.

1. Review prerequisites
To implement this successfully, make sure you have each of the following:

1. Unique User IDs - A unique user ID for each user, stored in your database (common).

2. Store IDs on Customer Reference - The unique user ID is stored in Chargify as the Customer Reference.

3. Enable Portal Link Expiry - Chargify Support enables the Billing Portal Link feature - This allows you to create links that expire quickly, such as 30 seconds. Email support@chargify.com to get it enabled.

 

2. Create your frontend URL Client-side
  1. Create the frontend URL
    Here is an example of the structure. This link will point to another URL (in the next step), hosted on your servers, that will trigger a backend script. Make sure this frontend URL contains a dynamic user ID that is acceptable to be exposed client side.
    <a href="https://www.yourapp.com/path?user_id=DYNAMIC-USER-ID" target="_blank">Manage Your Subscription</a>
  2. Place the URL in your app
    Add the URL to the proper place in your app. Typically, this is inside a "My Account" section.


  3. Optional - Style the link as a button
    If you have existing button css, add it.

3. Create a backend script API Server-side
This script will query Chargify's API, get the customer's unique Billing Portal URL, and redirect the user to the Portal.

 

  1. Read Customer by Reference and parse the Customer ID   See API Endpoint
    Perform a GET, with your dynamic user ID. In the response, parse the customer ID (eg: 123456789).
  2. Read Billing Portal Link by Customer ID   See API Endpoint
    Perform a GET. In the response, parse the url. 
    //example response 
    //this url is the user's portal link { "url": "https://www.billingportal.com/manage/19804639/1517596469/bd16498719a7d3e6", ... }

  3. Redirect the user to the portal url
    In your code, redirect to the link from the API response.

FAQs

1. Can the Billing Portal be iframed, cnamed, or whitelabeled? No.

Was this article helpful?
0 out of 0 found this helpful