Cicleo React Module

This module is to integrate Cicleo into your website This contain Payment Button and Manage Account Button

Installation

npm i @cicleo/react-module

Usage of the Payment Button

First import this on the top of your file who will use the Payment Button

import  "@cicleo/react-module/dist/index.css";
import { PaymentButton } from  "@cicleo/react-module";

Then integrate it as simply

<PaymentButton
	config={{56:  5}}
	subscriptionId={1} //Subscription id is the id of the subscription (see on dapp)
	signer={signer as ethers.providers.JsonRpcSigner}
/>

Per exemple this configuration will config the button to use the #5 Subscription Manager on the BSC network

To use multiples chains just put Network ID and the related Subscription Manager ID

 <PaymentButton
	config={{56:  5, 43114: 6}}//Will use subscription manager 5 on BSC and subscription manager 6 on Avalanche
	subscriptionId={1} //Subscription id is the id of the subscription (see on dapp)
	signer={signer as ethers.providers.JsonRpcSigner}
/>

If you use wagmi you can simply use that for signer object

import { useSigner, useNetwork } from  "wagmi";
let { data: signer } = useSigner();

And there you go !

Usage of the Dynamic Subscription Button

First import this on the top of your file who will use the Dynamic Payment Button

import  "@cicleo/react-module/dist/index.css";
import { DynamicPaymentButton } from  "@cicleo/react-module";

Then integrate it as simply

<DynamicPaymentButton
	config={{56:  5}}
	subscriptionName="Package name" //Name of the subscription
    subscriptionPrice="1000000000000000000" //Price in wei into the subscription manager token
	signer={signer as ethers.providers.JsonRpcSigner}
/>

Usage of the Manage your Account Button

First import this on the top of your file who will use the Payment Button

import  "@cicleo/react-module/dist/index.css";
import { AccountBlock } from  "@cicleo/react-module";

Then integrate it as simply

<AccountBlock
	config={{56:  5}}
	signer={signer as ethers.providers.JsonRpcSigner}
/>

Per exemple this configuration will config the button to use the #5 Subscription Manager on the BSC network

To use multiples chains just put Network ID and the related Subscription Manager ID

 <AccountBlock
	config={{56:  5, 43114: 6}}//Will use subscription manager 5 on BSC and subscription manager 6 on Avalanche
	signer={signer as ethers.providers.JsonRpcSigner}
/>

If you use wagmi you can simply use that for signer object

import { useSigner, useNetwork } from  "wagmi";
let { data: signer } = useSigner();

And there you go !

Find my Subscription Manager ID ?

First go on https://cicleo.io/subscription/manage and click on your Subscription Manager, then you'll find it on the URL of the page