Embedding Customer Portal

You can Embed our customer portal inside your website or web application easily through embedding an iframe that is rendered on a per customer basis.

If you decide to embed the customer portal, the authentication of the users will be your application/website's responsibility, where you act as the authentication authority that confirms the user's identity.

Customer Portal Options

Customer Portal enables your customers to:

View or cancel active subscriptions
Manage add-ons
Upgrade or downgrade plans
View payment history
Manage payment methods
Manage profile and billing information

Implementation

First, you need to get a Server Token.

The server token should not be leaked to the front-end as it gives full access to your SubsBase account

Second, get a Customer Token.

The token is returned in the "value" field, token could be used for embedding the customer portal

Once you obtain the customer token, you can insert the token in the following iframe:

<html>
    <div style="width: 1200px;height 920px">
        <iframe 
        src="{customerPortalURL}?token={customerToken}&tabsLayout={[horizontal|vertical]}&[show|hide]={[paymenthistory,paymentmethods,subscriptions,info]}">
        </iframe>
    </div>
</html>

Where
- customerPortalURL is your customer portal URL which is provided by SubsBase.
- customerToken is the customer token obtained in the second step.
- show/hide Optional you can choose either to show or hide certain pages in the embedded customer portal. Can be one or more of the following 'subscriptions','paymentmethods','paymenthistory','info'. If more than one tab is passed then tab names have to be passed in a comma separated list without spaces. All pages are on by default.
  Example: &hide=paymenthistory,subscriptions
- tabsLayout Optional determines the orientation of the navigation tabs. Can be vertical or horizontal. Default value is horizontal
You have to set the width and the height for the Container Element and the injected iFrame will fill the entire container i.e. the iframe's height and width default to 100%.