This guide will help you configure the Billing Portal. When you're finished, you will have a working customer portal.
Summary
- Feature
- Billing Portal
- You Need
- Know what actions your customers can take to self-manage their subscriptions
- Code
- No
- Difficulty
- ◉◎◎◎◎
Configure The Billing Portal
These steps will walk you through the the configuration.
1. Set the basics
Go to Config > Settings > Billing Portal.
-
Check 'Enabled for this site'
This will open the additional settings underneath.
- Subscriber Invitations
Set 'Automatic' if you want emails to send. Set 'Manual' for no automatic emails. If 'Automatic', see step 1.10 below. -
Optional - Portal Link Expiration Time
Use this setting if your user login flow uses the one click login method from your app. Otherwise, skip this step. This value only shows if you have asked support@maxio.com to enable it.
-
Features Help
Checkmark the features you need.
-
Sort Products for Plan Changes Help
This determines how your products are ordered, when a user selects a product change.
This is only available for Subscriptions through Advanced Billing.
-
Product Change Strategy Help
Select prorated, instant, or delayed. The setting applies to both upgrades and downgrades.
This is only available for Subscriptions through Advanced Billing.
This setting does not apply to upgrades only. -
Management Links
Skip for now. This will be handle in the next step called 'Set login settings'.
-
Set Merchant Name
This value appears in the top left of the Portal. If you upload a logo, the logo will replace the merchant name in the top left corner.
-
Set Merchant Info
This value displays on the left side of the Portal and on the main login page of the Portal (if using the email login method).
-
Set Invitation Email
This only applies if you have selected 'Automatic' in step 1.2 above. For pre-made templates, see the Resource section on this page.
-
Set Logo
Recommended.
-
Save
2. Set login settings
In step 1.7, you intentionally skipped the Management Links setting. Now, we can configure it based on which method you are using.
Single Sign On Logins
Set to 'Bypass email verification for logins'.
Email Based Logins
Set to 'Require customers verify their email before logging in'. The email will be the email address the customer uses when signing up initially, and the password will be one they set when logging into the Portal for the first time.
Quick Testing
Regardless of the sign in method you'll use, enable quick testing by selecting 'Bypass email verification for logins'. This will make the Test step go much faster. Then, once you're done testing, return to this setting and modify it to the real value you need.
Single Sign On Logins
Set to 'Bypass email verification for logins'.
Email Based Logins
Set to 'Require customers verify their email before logging in'. The email will be the email address the customer uses when signing up initially, and the password will be one they set when logging into the Portal for the first time.
Quick Testing
RecommendedRegardless of the sign in method you'll use, enable quick testing by selecting 'Bypass email verification for logins'. This will make the Test step go much faster. Then, once you're done testing, return to this setting and modify it to the real value you need.
3. Test
In this step, you will create a test subscription, get the Billing Portal link, and begin testing. Then, you can modify settings as needed.
-
Create a Test Subscription
Create one that mirrors what your real customer would do.
- Get the Billing Portal URL
For testing, go to Billing > Subscriptions, and at the top of the page you'll see the subscription you created. Click it. Scroll to the bottom, and you will see 'View Billing Portal Management Link'.
Copy/paste the link, load it in your browser, and begin testing.
Optional - Add CSS
For developers beta
CSS allows you to modify the design of the Portal. This feature must be enabled by support@maxio.com. After enabled, turn on the setting by checking the box "Custom CSS".
As an example, a common need is to hide a certain aspect of the Portal. If there is a Div ID, you can easily hide it.
As an example, a common need is to hide a certain aspect of the Portal. If there is a Div ID, you can easily hide it.
/* Hide a section */
#div_id {
display: none;
}