chargebee js

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.

Tutorials

For a step-by-step integration, see the self-serve portal tutorials.

Prerequisites

Before creating the Portal object, ensure you have:

Create the Portal object

To create a Portal object instance, use the createChargebeePortal() method:

const chargebeePortal = chargebee.createChargebeePortal();

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);

Parameters

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({
  loaded: function() {
    console.log("Portal loaded.");
  },
  close: function() {
    console.log("Portal closed.");
  }
});

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.

Live demo

Each section opens as its own card. Try them against the demo site below.

  • View / edit subscription details -
  • Manage payment methods -
  • Billing history -
  • Manage addresses -
  • Manage account information -

Syntax

chargebeePortal.openSection(options, callbacks)

Parameters

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.');
  },
  close: () => {
    console.log('Account details section closed.');
  }
});