Subs Widget

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

First things first, install the package

yarn install subs-widget

or

npm install subs-widget

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='testnet'
        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='testnet'
        dataOnSubs={handleResponse}
        apiKey='x123123x'
/>

Widget with default payment.

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

Widget with default payment and token choice.

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

You can choose multiple ways to present your button.

string

string

string

string

string

string

number

string

Object

 function

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 users need to select the period you want to subscribe and fill your email. We will notify your users after each debit and notify them if a debit fails.

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

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

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

Congratulation ! If the transaction is a success, users will be charge 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.