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 bevertical
orhorizontal
. Default value ishorizontal
You have to set thewidth
and theheight
for the Container Element and the injected iFrame will fill the entire container i.e. the iframe'sheight
andwidth
default to 100%.