Popup customer portal

This guide covers the customer portal integration from a developers point of view. It assumes that you have already setup your Products in Bunny and enabled them to be visible for self service.

This integration involves adding a Bunny hosted javascript SDK to your application and calling methods on the SDK to popup the subscription management and payment options.

Overview

There are 2 steps in this integration.

From your applications backend, generate an token via the Bunny API. This token will be required in step 2 to authenticate access to the portal.
Add the bunny.js script to your application then use a link on your page to popup the portal.

1. Setup API credentials

We recommend setting up a new API client specifically for customer portal access. You can learn how to setup an API client here.

The API client will need to have the security:read and security:write scopes enabled.

Use the API client to generate a new access token with the security scopes.

Request a portal token

Make a request from your backend to obtain the portal security token using the portalSessionCreate graphql request.

Attributes

{
  "tenantCode": "superdesk-123",
  "expiry": 123 // optional - default 24 hours
}

Mutation

mutation portalSessionCreate ($tenantCode: String!, $expiry: Int!) {
  portalSessionCreate (tenantCode: $tenantCode, expiry: $expiry) {
      errors
      token
  }
}

res = await bunny.createPortalSession("superdesk-123");

res = BunnyApp::PortalSession.create(
    tenant_code: 'superdesk-123'
)

On success the response will contain a token attribute. You need to extract this token and use it in the next step.

{
    "data": {
        "portalSessionCreate": {
            "errors": null,
            "token": "eyJhbGciOiJIUzUxMiJ9.eyJleHAiOjE2ODE4MzY4NDUsImlzcyI6Imh0dHBzOi8vYnVubnkuYnVubnkuY29tIiwiYXVkIjoicG9ydGFsIiwiaWF0IjoxNjgxNzUwNDQ1LCJzdWJkb21haW4iOiJidW5ueSIsInVpZCI6NDA1LCJ1aWRfdHlwZSI6IlRlbmFudCIsInJlYWNoX2lkIjo1NDAsInJlYWNoX3R5cGUiOiJBY2NvdW50Iiwic2NvcGUiOiJwcm9kdWN0OnJlYWQgYmlsbGluZzpyZWFkIHN0YW5kYXJkOndyaXRlIHN0YW5kYXJkOnJlYWQiLCJvYmplY3RfaWQiOjQwNSwib2JqZWN0X3R5cGUiOiJUZW5hbnQifQ.78epnLpeJBs2UX1SrjxYdkKkEL_x4iy_AlAo6LuxQQkA7O5jvgEA00X3Zh9Z-MdLoBhGtSrK3Kv-Gb2lOAb3tQ"
        }
    }
}

2. Include the bunny.js script

https://cdn.bunny.com/v1/bunny.js

Include the Bunny script in the <head> section of your application using the subdomain of your Bunny account.

<script 
  type="text/javascript"  
  src="https://cdn.bunny.com/v1/bunny.js">
</script>

Now initialize the script by passing the portal token from step 1 into the Bunny SDK.

<script type="text/javascript">
    const token = "<%= bunny_portal_token %>";
    const bunny = new Bunny("subdomain", token);
</script>

Finally add a button or a link to your site for upgrading or managing a subscription with a click handler that we will use to popup the portal.

<button onclick="onUpgradeClick()">Upgrade now</button>

<script type="text/javascript">
    function onUpgradeClick() {
        bunny.popup();
    }
</script>

Controlling the display

You can popup different screens by setting a page argument in the popup method.

// subscriptions - The default view
bunny.popup({
    page: "subscriptions"
});

// transactions - Shows the transactions & payments made by the customer
bunny.popup({
    page: "transactions"
});

// payment-method - Shows the current store payment method by the customer
bunny.popup({
    page: "payment-method"
});

PreviousPortal overview NextStandalone customer portal

Last updated 2 months ago

Was this helpful?