# Subs Widget Subs on your website has never been easier ! Thanks to our [**React JS Package**](https://www.npmjs.com/package/subs-widget). 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. ```tsx import { Subs } from 'subs-widget'; const handleResponse = (response : {success:boolean, message: string}) => { console.log("This is what happened" , response); } return( ) ``` ### How it works Just widget without default payment. ```jsx ```

Subs with just appId and chain

Widget with default payment. ```tsx ```

Subs with default payment

Widget with default payment and token choice. ```jsx ```

Subs with payment and token choice

\ You can choose multiple ways to present your button.
TypesDescriptionDescription
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.