Integrating Superfluid Checkout Widget in your App

A Simple Integration Guide for React

This is a simple guide on integrating Superfluid Checkout Widget in your app using a React component and wagmi (opens in a new tab).

Step 1: Install the Necessary Packages

npm install --save @superfluid-finance/widget wagmi @superfluid-finance/tokenlist

Step 2: Import the Widget and Dependencies

import { WagmiConfig } from "wagmi";
import SuperfluidWidget from '@superfluid-finance/widget';

Step 3: Generate a Widget JSON

Craft your Widget JSON following our step-by-step guide here. This JSON dictates most of your widget's properties.

Step 4: Implement the Widget in Your Component

In this example, we name our JSON file data:

export function MyComponent() {
  return (
    <WagmiConfig config={wagmiConfig}>
      <SuperfluidWidget {...data} tokenList={superTokenList} type="dialog" walletManager={walletManager}>
        {({ openModal }) => (<button onClick={() => openModal()}>Open Superfluid Widget</button>)}
      </SuperfluidWidget>
    </WagmiConfig>
  );
}

💡

You can create your own custom Token List if you the Super Tokens you want to use are not listed in the Superfluid Token List package. Learn more about how to do that in the next section.

Building the Widget Create your Token List