# Portal Object
# Overview
The Portal object provides access to Chargebee's customer self-service portal functionality. This object enables you to open the complete customer portal or specific sections, allowing customers to manage their subscriptions, billing information, and account details.
# Prerequisites
Before creating the Portal object, ensure you have:
- Enabled and configured (opens new window) the portal in Chargebee Billing.
- Initialized Chargebee.js in your application.
- Set up a portal session using
setPortalSession().
# Create the Portal object
To create a Portal object instance, use the createChargebeePortal() method:
const chargebeePortal = chargebee.createChargebeePortal();
1
# open(options?, forwardOptions?)
Opens the customer self-service portal or one of its sections in a modal or new window.
# Syntax
chargebeePortal.open(options, forwardOptions);
1
# Parameters
DETAILS
options
Object Hide propertiesforwardOptions
Object Hide properties# Return value
This function does not return a value.
# Example
const chargebee = Chargebee.getInstance();
// Set up portal session (required before creating portal).
chargebee.setPortalSession(() => {
// Return a promise that resolves to portal session data.
return new Promise(function(resolve, reject) {
// Example portal session response from your server.
const portalSessionResponse = {
"id": "portal_XpbGElGQgEHspHB",
"token": "<portal-session-token>",
"access_url": "https://yourapp.chargebeeportal.com/portal/access/<portal-session-token>",
"status": "created",
"created_at": 1515494835,
"expires_at": 1515498435,
"object": "portal_session",
"customer_id": "XpbGEt7QgEHsnL7O"
};
resolve(portalSessionResponse);
});
});
// Create and open the portal.
const chargebeePortal = chargebee.createChargebeePortal();
chargebeePortal.open({
// Optional: Customize portal behavior
closeOnEscape: true,
showCloseButton: true
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# openSection(options, callbacks?)
Opens a specific section of the customer portal instead of the complete portal.
# Available section types
You can open the following section types as separate cards:
SUBSCRIPTION_DETAILS- View and manage subscription information.ACCOUNT_DETAILS- Update customer account information.ADDRESS- Manage billing and shipping addresses.PAYMENT_SOURCES- Add, update, or remove payment methods.BILLING_HISTORY- View past invoices and payment history.
# Syntax
chargebeePortal.openSection(options, callbacks)
1
# Parameters
DETAILS
options
Object Hide propertiescallbacks
Object Hide properties# Return value
This function does not return a value.
# Example
const chargebee = Chargebee.getInstance();
// Set up portal session (required before creating portal).
chargebee.setPortalSession(() => {
// Return a promise that resolves to portal session data.
return new Promise(function(resolve, reject) {
// Example portal session response from your server.
const portalSessionResponse = {
"id": "portal_XpbGElGQgEHspHB",
"token": "<portal-session-token>",
"access_url": "https://yourapp.chargebeeportal.com/portal/access/<portal-session-token>",
"status": "created",
"created_at": 1515494835,
"expires_at": 1515498435,
"object": "portal_session",
"customer_id": "XpbGEt7QgEHsnL7O"
};
resolve(portalSessionResponse);
});
});
// Create and open the portal.
const chargebeePortal = chargebee.createChargebeePortal();
// Open a specific section
chargebeePortal.openSection({
sectionType: Chargebee.getPortalSections().ACCOUNT_DETAILS
}, {
loaded: () => {
console.log('Account details section loaded.');
},
closed: () => {
console.log('Account details section closed.');
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
