@toucantrickle/toucantrickle-widgets NPM

Overview

The repo contains the ToucanTrickle Protocol buttons/widgets that can be integrated into your website. This includes a checkout button that can be used to provide simple signup experience as well as a top-up button that can be added to your app/website to allow users to ensure they maintain a healthy toucanTrickle balance.

Installation

To install the stable version:

npm install --save @toucantrickle/toucantrickle-widgets

or using yarn:

yarn add @toucantrickle/toucantrickle-widgets

Usage

Add this import to starting point of your project such as: index.js or index.ts files

import '@toucantrickle/toucantrickle-widgets';

Or add this script tag at the starting of the project

<script>https://cdn.jsdelivr.net/npm/@toucantrickle/toucantrickle-widgets@1.0.0/dist/index.js</script>

Create a <toucantrickle-checkout-button/> element with required attributes mentioned below.

<toucantrickle-checkout-button
  class="toucantrickle-checkout-button"
  environment="production"
  chains="polygon,avalanche"
  provider="0x...."
  plan="123456"
  onClose="close"
  onSuccess="success"
  label="Checkout with Crypto"
></toucantrickle-checkout-button>

Attributes:

name	Required	Description
class		CSS classes to add.
environment		Environment. Possible values: `testnet` or `production`. Defaults to `production`.
chains		List of chains a subscription can be created on. Ensure the same plans exist on all chains. Defaults to `polygon`.
provider	✔	Your provider wallet address.
plan	✔	Your ToucanTrickle plan id.
label		Message to put on the button.
ref		Include a custom value associated with the ToucanTrickle subscription data.
size		Button size. Possible values:`regular`, `large` or `small`. Defaults to `regular`.
theme		Widget theme. Possible values: `dark` or `light`. Defaults to `dark`.
redirect		Redirect to URL upon successful subscribe. Does not call `onSuccess` handler, if supplied.
onClose		Callback for `close` event.
onSuccess		Callback for `successSubscription` event.

Events:

name	Description
close	Fires after widget closes
successSubscription	Fires when user subscribes to plan

Multi Chain:

The ToucanTrickle protocol has been deployed on a number of EVM chains, and additional chains will be supported in the future. For the checkout widget to support multiple chains, the provider must have deployed the exact same set of plans/discounts on each chain in which they support. Once that is done, the widget needs to be told which chains to support via the chains attribute. The value is a comma separate list of the following chains:

Production Environment:

polygon
avalanche
fantom
celo
aurora
moonbeam
gnosis

Testnet Environment:

mumbai
fuji
celo_alfajores

Styling:

toucantrickle-checkout-button uses Shadow CSS ::part spec. It has button inside defined as button part

<style>
  .toucantrickle-checkout-button::part(button) {
    background-color: aqua;
    width: 100%; /* Those styles apply to button in shadow root */
  }
</style>
<toucantrickle-checkout-button
  class="toucantrickle-checkout-button"
  label="Pay with Crypto"
/>

See more about ::part() on https://developer.mozilla.org/en-US/docs/Web/CSS/::part

@lit/react @rollup/plugin-node-resolve @types/trusted-types clsx lit qs react rollup-plugin-terser style-object-to-css-string util

@everything-registry/sub-chunk-928

1.0.1

4 months ago

1.0.0

5 months ago