🕛Subscription Widget

Widget to create a new subscription for customer with selected plan

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.

Create a session token in your backend

• By direct API call: "/integration/subscriptions/create-customer-token" (see: Subscriptions)

• Or by Node SDK: https://github.com/smarty-pay/smartypay-node-sdk

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

const api = new SmartyPayAPI({
  secretKey: 'YOUR_SECRET_KEY',
  publicKey: 'YOUR_API_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});Ca

Open the widget in your Frontend

• Use our Client SDK: https://github.com/smarty-pay/smartypay-client-sdk

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
      })
});