Integration Options

Chargebee offers the following options to integrate the hosted portal depending on your application/website's framework and business model.

• API(recommended if you want to authenticate the user at your end)
• Drop-in script

When to use API vs. Drop-in Script

API-based Integration

Chargebee supports Single Sign-on (SSO) to access the customer portal. If you have your mechanism for authenticating your users, then you can use Chargebee's Single Sign-On (SSO) capability for providing portal access to your users for managing their billing and subscription details.

While you integrate by using an API-based integration, the workflow will be like the below:

Learn more about portal integration using Chargebee API.

Drop-in based Integration

The drop-in script is the easiest and quickest way to integrate the hosted portal into your website. No coding knowledge is required. But your requirements should satisfy the below condition

• You do not have a user authentication system at your end and you rely on Chargebee for providing it.

While you integrate by using a Drop-in script, the workflow will be like the below:

Learn more about portal integration using drop-in script.

Single Account vs Multiple Account Login

In Chargebee, a merchant can create customer accounts using the email address in two different methods:

• Single Account: An email address dedicated to one customer account.
• Multiple Account: An email address dedicated to multiple customer accounts.

Once the account/ accounts are created, it is available for the merchants to log in and make use of the Self Serve Portal. The login experience differs for these two scenarios. Let us find out how.

Single Account Login

For the scenario with just one customer account with a dedicated email address, the flow without any account selection page comes into the picture. This flow simply involves entering the email address and the received OTP consecutively to log in to the Self-Serve Portal.

Multiple Account Login

For scenarios where multiple customers are associated with one email address, the login flow includes an account selection section (displayed in the third step below) where you can select the customer account for which you want to log in to the Self-Serve Portal. This page fetches all the accounts linked to the entered email address, and you can view them as you scroll down the page.

The login flow looks like this:

1. Enter your email address and click Continue.
   
2. Enter the one-time password received on your email address.
   
3. The account selection screen appears. Scroll down, locate the relevant account and select it to access the Self-Serve Portal.
   
4. On selecting the relevant account, you will be able to view the Self-Serve Portal for the selected account.
   

Display Additional Information for the Accounts

By default, on the account selection page, the accounts are distinguished by a # number along with the Signed up on . This does not provide enough details to help the customer select the correct account to login to.

You can add more information like First Name, Last Name, Company, and more to the account tabs by using an existing label.

Follow the steps below to configure the label for your accounts:

1. In your Chargebee app, go to Settings > Configure Chargebee > Checkout & Self Serve Portal.
2. Select the Labels tab and click Add more copy/text.
   
3. Search for additional and click the + icon against the Additional Information label and then click Add.
   
4. Click the edit icon against the newly added label in the list.
   
5. In the Configuration for Additional Information box,
   • Press the space bar once, click the + button, and select the field from the list that you want to add.
   • To another field next to the previous one, press the space bar on your keyboard again, click the + button and select the field.
   • To end the current line and add a new field to the next line, write EOL and add the field that you want to add after it. Here, indicates leaving a space before and not writing it.
   • Click Apply.
     
6. Click Publish.
   

Now, restart the login flow and the changes will be visible on the account selection page.