Logo

Smarty Docs

Subscription Widget

The subscription widget allows merchants to stay in the low-code ground, and embed ready-to-use UI component into their web stores that allow customers to create new subscriptions.

To start using the widget you first need to create some subscription plans, and create a token to initialize the widget.

Session token on Backend

import {SmartyPayAPI} from 'smartypay-node-sdk';

const api = new SmartyPayAPI({
  publicKey: 'YOUR_API_KEY',
  secretKey: 'YOUR_SECRET_KEY'
});

// Specify your target plan id
const activePlans = await api.getActivePlans();
const targetPlanId = activePlans[0].id

// Make a new access token for the widget in frontend
const customerId = 'your_customer_id';
const sessionToken = await api.subscriptions.createCustomerToken({customerId});

Widget on Frontend

import {SmartyPaySubscriptions} from 'smartypay-client-sdk';

const frontApi = new SmartyPaySubscriptions();

// specify your controller to open the widget:
// <div id='widget-parent'></div>
// <button id='open-widget-button'>Open widget</button>
const buttonElement = document.getElementById('open-widget-button');

// show widget on button's click
buttonElement.addEventListener('click', ()=> {
    
    frontApi.newSubscriptionWidget({
        sessionId: sessionToken,  // sessionToken from backend
        planId: targetPlanId,     // targetPlanId from backend
        target: 'widget-parent'   // id for parent element in html page
      })
});