Subs Widget

Use Subs in your website has never been easier! Thanks to our React JS Package.

Installation

First, install the package:

yarn install subs-widget

or

npm install subs-widget

Usage

Now you just need to import and use our customizable button:

import { Subs } from 'subs-widget';

const handleResponse = (response : {success:boolean, message: string}) => {
   console.log("This is what happened" , response);    
}

return(
<Subs address={"0x8e468E7Cbf7E7E056A7591C796F2dd4C5C255591"} 
        appId="4" 
        chain={"polygon"}
        mode='mainnet'
        apiKey='x123123x'
        ? color='red'
        ? width={200}
        ? defaultPayment='30Days'
        ? choice={"payment", "token"}
        ? dataOnSubs={handleResponse} />
)

How it Works

Just widget without default payment

<Subs address={"0x8e468E7Cbf7E7E056A7591C796F2dd4C5C255591"} 
        appId="4" 
        chain={"polygon"} 
        mode='mainnet'
        dataOnSubs={handleResponse} 
/>

Widget with default payment

<Subs address={"0x8e468E7Cbf7E7E056A7591C796F2dd4C5C255591"} 
        appId="4" 
        chain={"polygon"}
        mode='mainnet'
        apiKey='x123123x'
        defaultPayment='30Days'
        dataOnSubs={handleResponse} 
/>

Widget with default payment and preselected token

<Subs address={"0x8e468E7Cbf7E7E056A7591C796F2dd4C5C255591"} 
        appId="4" 
        chain={"polygon"}
        mode='mainnet'
        apiKey='x123123x'
        defaultPayment='30Days'
        choice={{
              payment: "30Days",
              token: "0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359"
        }}
        dataOnSubs={handleResponse} 
/>

Options

You can choose multiple ways to present your button:

• address: Address of the owner of the App
• appId: App ID
• chain: Network of your subscription plan
• color: Customize the color of your button
• width: Width of the component
• defaultPayment: Payment name, if you want to show a particular payment
• choice: Payment name and token address, prechoose and only keep the Subscribe button
• response: Informs you if a subscription is done successfully.
• mode: Choose mainnet or testnet, depending on the blockchain you are using.
• apiKey: Api Key of the AppID. You can find your Key whan managing our App.

Get your Api Key

After creating your App go on the My Apps section on the left side of the website.

Then click on Manage of the App you want to set up

Wait a few seconds, your Api Key will appear on you screen right here.

Popup

If the Popup doesn't show up, some parts of your CSS may cause some issues.

First view of the Popup

First, you need to accept our terms and conditions by checking the check box.

Approval Step

Users will need to approve an amount of token before the subscription. We will later debit the amount with TransferFrom calls periodically.

Sign to Subscribe

When the approval is done, all you need to do is sign to trigger the subscription process.

Error Message

If the user doesn't have enough funds in their wallet, the first debit won't work, and no one will be charged for this action.

Success

Congratulations! If the transaction is a success, users will be charged from now on. It is possible to get the result thanks to dataOnSubs, the function will return the status of the operation and a message if an error happens.