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'
/>

Subs with just appId and chain

Widget with default payment.

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

Subs with default payment

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'
/>

Subs with payment and token choice

You can choose multiple ways to present your button.

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

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 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.

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 massage

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.

Success

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.