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

or

npm install subs-react

Usage

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

import { Subs } from 'subs-react';

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

return(
<Subs address={"0x135B48F76870C2e0d5440dE8F5E7b7A6a7d52720"} 
        appId="40" 
        chain={"mumbai"} 
        color='red'
        width={200}
        defaultPayment='Premium'
        choice={["payment", "token"]}
        dataOnSubs={handleResponse} />
)

How it Works

Just widget without default payment

<Subs address={"0x135B48F76870C2e0d5440dE8F5E7b7A6a7d52720"} 
        appId="40" 
        chain={"mumbai"} 
        dataOnSubs={handleResponse} 
/>

Widget with default payment

<Subs address={"0x135B48F76870C2e0d5440dE8F5E7b7A6a7d52720"} 
        appId="40" 
        chain={"mumbai"} 
        defaultPayment='Premium'
        dataOnSubs={handleResponse} 
/>

Widget with default payment and preselected token

<Subs address={"0x135B48F76870C2e0d5440dE8F5E7b7A6a7d52720"} 
        appId="40" 
        chain={"mumbai"} 
        defaultPayment='Premium'
        choice={{
              payment: "Premium",
              token: "0x8e468E7Cbf7E7E056A7591C796F2dd4C5C255591"
        }}
        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.

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.