Payment Widgets

In this guide, we will discuss ready-to-use payment widgets or hosted pages, which should be utilized for various purposes such as confirming a payment by the buyer, creating a new subscription or recurring payment, and managing existing subscriptions.

These UIs also support embedding on the Merchant's application side to eliminate the need for the buyer to navigate to an external resource.

One-time Payment

Use this hosted payment page after you have created the payment through the API and received its unique identifier, in order to confirm the deduction of funds from the buyer's web3 wallet.

To use it, redirect the buyer to the following URL.

https://checkout.smartypay.io/[payment-id]?param=value

Examples:
https://checkout.smartypay.io/3f4pZP9dwUGDUbtVRXrjDh
https://checkout.smartypay.io/XYRtJaGXPKFTtHv5464CUf

The following query parameters are supported:

New Subscription

Use this widget to allow payers to create a new instance of subscription (or a recurring payment).

To use this widget, you will need the following information:

1. A one-time token identifying the payer.
2. The unique identifier of the plan.

After you get these two pieces of information, use SMARTy Pay Client SDK to initialize the widget.

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

const subscriptions = 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', () => {

    subscriptions.newSubscriptionWidget({
        sessionId: sessionToken,  // sessionToken from backend
        planId: targetPlanId,     // targetPlanId from backend
        target: 'widget-parent'   // id for parent element in html page
      })
});

Subscription Management

Use this widget to provider payers the way to manage their existing subscriptions.

To use this widget, you will only need a unique identifier of the payer (like in the previous section).

https://subscriptions.smartypay.io/?session=[customer-token]

Examples:
https://subscriptions.smartypay.io/?session=Lt3DE3yex52ooLVrsG3ZwYoYqFFUgJokSo4wgJ9SE5QGmoww
https://subscriptions.smartypay.io/?session=EKKGTypT4DiABbH57d7Wacc1ojaEzNjpVXD1JIX65RdQ2U00