Skip to main content

Customer Portal Link

To initialize the Recharge JavaScript SDK you will need to do it within the root of your theme (wherever the <head /> element is located). Generally this is located in a file called theme.liquid. For this example you will need to initialize your client with a Recharge storefrontAccessToken.

Example​

This example will show you how to implement a link to your customer portal.

Create a new file within the theme editor called portal-link.liquid. Then render that snippet on any page you would like. Note that this file needs to be a snippet not a section or page.

Liquid file where you want to render the customer portal link.

...
<div>{%- render 'portal-link' -%}</div>
...

portal-link.liquid

<portal-link></portal-link>

<script>
  class PortalLink extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
      this.renderLink();
    }

    async login() {
      this.session = await recharge.auth.loginShopifyAppProxy();
    }

    async fetchPortalAccess() {
      this.portalAccess = await recharge.customer.getCustomerPortalAccess(this.session);
    }

    async renderLink() {
      await this.login();
      await this.fetchPortalAccess();

      this.shadowRoot.innerHTML = `
        <style>
          a.button {
            appearance: none;
            display: inline-block;
            width: auto;
            text-decoration: none;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
            user-select: none;
            font: bold 11px Arial;
            text-decoration: none;
            background-color: #557b97;
            color: #fff;
            padding: 8px 10px;
            border: 1px solid transparent;
            border-radius: 2px;
            font-family: "Work Sans", sans-serif;
            font-style: normal;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            white-space: normal;
            font-size: 0.75em;
            line-height: 1;
          }
        </style>
        <a class="button" href="${this.portalAccess.portal_url}">Manage Subscriptions</a>
      `;
    }
  }

  customElements.define('portal-link', PortalLink);
</script>