Skip to content

Subscription-now Advanced Implementation Guide

In this document, you will find guiding information on how to make an advanced implementation with Subscription-now.

The keywords we are going to address to are as follows:

3rd party integration hook integration asynchronous implementation

The Purpose of this Guide

We created this guide to give Subscription-now users the requirements and must-haves in an hypothetical advanced implementation scenario.

3rd Party Integrations and Subscription-now

Subscription-now, by nature, allows developers to use it without being have to login their customers.

But when a 3rd party and/or hooks integration is involved or developers want to let customers manage their subscriptions, the customer must be logged in to Subscription-now. This will make the Subscription-now the anchor point of the flow and let SN to handle the integrations to 3rd parties with the required data.

To better understand this, let's talk about a hypothetical scenario.

Scenario

In our hands, we have a project that has the following traits:

spa/ssr user database another 3rd party API as user storage

The app logs in their customers using Amazon Cognito, but it also connects to a 3rd party API that they synchronize their users with.

Let's see what requirements we have that are relevant to Subscription-now.

Requirements

  1. Customers should be able to purchase subscription(s)
  2. Customers should be able to manage their subscription(s)
  3. Subscription-now will handle the interaction between payment provider and 3rd party (such as activation or upgrade of a user when a certain item is subscribed; deactivation or downgrade of a user when a certain type of subscription has ended) with a custom hook

As the requirements seem simple enough, the implementation of such functionality can be tricky with medium to large scale SPA projects which involve a certain amount of asynchronity.

Things to Consider

  1. Since we require the self-service functionality for customers so that they can manage their subscriptions, we must make sure the customers are already logged into Subscription-now before being able to interact with any interface Subscription-now is involved. Including interactions with interfaces:
    • Cart: If the actual customer has not yet logged into SN, any purchase will be made by a "new customer"
    • Self-service: If the customer has not yet logged into SN, the self-service will not show any data
    • Gift code redemption: If the actual customer has not yet logged into SN, any redeemed product will belong to a "new customer"

The "new customer" might raise undesired outcomes such as double entities on any party.

  1. Since Subscription-now will interact with the 3rd party API when a change happens to a customer's contract, SN will have to have an identifier to use it within the hook. Let's say this identifier is the ID of the customer on the 3rd party API. Then we should have this ID at the ready before going ahead and calling the login method of SN.js API $sn.api.customer.login() .
  2. Since we don't want to let the customers interact with SN interfaces before the actual login to both the website and SN is complete, we should disable any button that would trigger interactions with cart UI, self-service UI or gift code redemption UI. Since Subscription-now lets you sell subscriptions without requiring any login by default, the undesired outcomes we listed above might take place.

A Sample Flow

Click to view in full size

Advanced Integration Flow

Wrapping Up

  • In the example scenario above, the web application has two places that connects its customers to. First Cognito, then the 3rd party API. We must ensure the customer is properly interacted with these and have obtained the identifier to use when triggering the Subscription-now login action.
  • You should not let the customer interact with SN.js before SN login is completed. This includes showing the cart, adding an item to the cart, showing the self-service UI or showing the gift code redemption UI. To achieve this, you can in example disable access to the buttons that would trigger these events.