Implementing the MySubscriptions Widget

The MySubscriptions Widget is already implemented in our pre-built e-commerce platform integrations. The widget may also be implemented on any website by qualified web developer.

Current version - MySubscriptions Widget

Steps To Implement

  1. Authenticate with Subscribe Pro API - Server Side

  2. Create a Page on Your Website with JavaScript Tags for the Widget

Authenticate with Subscribe Pro - Server-Side

The first step is to authenticate with the Subscribe Pro API and fetch access token. This must be executed server-side, since it will require the use of the secure credentials client_id and client_secret.

NOTE: client_id and client_secret credentials must never be exposed in the publically accesible client-side code of the website.

Authenticating and requesting an access token is a relatively straightforward process. Simply call the /oauth/v2/token API endpoint on the Subscribe Pro REST API.

Use the client_credentials grant type and pass the widget scope and pass customer_email or customer_id fields to get an access token which is scoped to an individual customer.

An Example With Curl

A curl request such as the following:

curl https://api.subscribepro.com/oauth/v2/token \
  --user <client_id>:<client_secret> \
  -d 'grant_type=client_credentials&scope=widget&customer_id=999'

Will produce a JSON response similar to:

{
 "access_token": "KLCJKDLJKLJFDLKJDLKJDLKJDLKJDLKJ",
 "expires_in": 3600,
 "token_type": "bearer",
 "scope": "widget",
 "customer_id": "989889898",
 "customer_email": "[email protected]",
 "spreedly_environment_key": "ABDUJHFKJHDSKJHJKDSHJKDKDLJKJDJDLKJDLKDJLKJD"
}

Create a Page on Your Website with JavaScript Tags for the Widget

Insert the Subscribe Pro JavaScript tags onto a new page your website, to be titled My Subscriptions. The page is typically located in the My Account area of the website.

The My Subscriptions widget is designed to be used with or without a left navigation menu on desktop.

See Placing the MySubscriptions Widget on the Page for details about how to place the My Subscriptions widget on the the page.

Template Variables

These values should be determined server-side and plugged into the HTML template below to render a page for the client.

apiAccessTokenAccess token returned by /oauth/v2/token
environmentKeyComes in response with access token - This is the spreedly_environment_key field
customerIdSubscribe Pro unique customer ID

Page Template

<html>
  <body>
    <div>
      <h1>Site Header</h1>
    </div>

    <div class="content">
      <!-- MySubscriptions Widget div goes in main body of page -->
      <div id="sp-my-subscriptions"></div>
    </div>

    <!-- Load the Subscribe Pro widget script -->
    <script
      type="text/javascript"
      src="https://hosted.subscribepro.com/my-subscriptions/widget-my-subscriptions-1.2.5.js"
    ></script>

    <!-- Pass configuration and init the Subscribe Pro widget -->
    <script type="text/javascript">
      // Setup config for Subscribe Pro
      var widgetConfig = {
          apiBaseUrl: 'https://api.subscribepro.com',
          apiAccessToken: '{{apiAccessToken}}',
          environmentKey: '{{spreedlyEnvironmentKey}}',
          customerId: '{{customerId}}',
          theme: 'my-custom-theme-name',
          ...
      };
      // Call widget init()
      window.MySubscriptions.init(widgetConfig);
    </script>
  </body>
</html>