# @cicleo/react-module

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

Latest version **1.4.1** (published 2023-05-30) · ISC license · 0 weekly downloads

## Install

```sh
npm install @cicleo/react-module
pnpm add @cicleo/react-module
yarn add @cicleo/react-module
bun add @cicleo/react-module
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.1 |
| Published | 2023-05-30 |
| First published | 2023-02-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 13 |
| Unpacked size | 3.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | mercurialis |

## Links

- npm: https://www.npmjs.com/package/@cicleo/react-module
- Repository: https://github.com/cicleopayment/react-module
- Homepage: https://github.com/cicleopayment/react-module#readme
- Issues: https://github.com/cicleopayment/react-module/issues
- npm.io page: https://npm.io/package/@cicleo/react-module

## Dependencies (13)

- [util](https://npm.io/package/util.md) ^0.12.5
- [wagmi](https://npm.io/package/wagmi.md) ^1.0.8
- [assert](https://npm.io/package/assert.md) ^2.0.0
- [buffer](https://npm.io/package/buffer.md) ^6.0.3
- [daisyui](https://npm.io/package/daisyui.md) ^2.51.3
- [process](https://npm.io/package/process.md) ^0.11.10
- [@wagmi/core](https://npm.io/package/@wagmi/core.md) ^0.10.10
- [remark-slug](https://npm.io/package/remark-slug.md) ^6.1.0
- [browserify-zlib](https://npm.io/package/browserify-zlib.md) ^0.2.0
- [stream-browserify](https://npm.io/package/stream-browserify.md) ^3.0.0
- [rollup-plugin-json](https://npm.io/package/rollup-plugin-json.md) ^4.0.0
- [@storybook/core-server](https://npm.io/package/@storybook/core-server.md) ^7.0.7
- [rollup-plugin-node-resolve](https://npm.io/package/rollup-plugin-node-resolve.md) ^5.2.0

## Recent versions

- 1.4.1 (latest) — 2023-05-30
- 1.4.0 — 2023-05-30
- 1.3.8 — 2023-05-12
- 1.3.7 — 2023-05-02
- 1.3.6 — 2023-04-24
- 1.3.5 — 2023-04-24
- 1.3.4 — 2023-04-24
- 1.3.3 — 2023-04-24
- 1.3.2 — 2023-04-23
- 1.3.1 — 2023-04-23
- 1.3.0 — 2023-04-19
- 1.2.15 — 2023-04-15
- 1.2.14 — 2023-04-15
- 1.2.13 — 2023-04-12
- 1.2.12 — 2023-03-20
- … 63 more at https://npm.io/package/@cicleo/react-module/versions

## README

# 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

![enter image description here](https://cdn.discordapp.com/attachments/970759610476666910/1087367222793609296/CleanShot_2023-03-20_at_14.28.152x.png)

---
_Source: https://npm.io/package/@cicleo/react-module · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._