LogoLogo
  • ๐ŸŒŠSuperfluid
  • Protocol Overview
    • ๐Ÿ’กWhat is Superfluid?
    • ๐Ÿ“„In-Depth Overview
      • Super Tokens
      • Super Agreements
        • ๐ŸšฐMoney Streaming (CFA)
        • โœณ๏ธDistributions (IDA)
        • ๐ŸŒŠStreaming Distributions
      • Super Apps
      • Superfluid Host
    • ๐Ÿง Use Cases
      • Recurring Payments
      • DeFi
      • Social & Community
      • Gaming
    • ๐Ÿ“”Glossary of Terms
  • Developers
    • ๐ŸƒQuickstart
    • ๐Ÿช™Super Tokens
      • Super Tokens - Solidity
      • Super Tokens - SDK Core
      • Super Tokens - Frontend Examples
      • Types of Super Tokens
      • Deploy a Super Token
        • Deploying a Wrapper Super Token
        • Deploying a Self Governed Super Token
        • Deploying a Pure Super Token
      • In-Depth
        • Tracking Super Token Balances
        • ERC777 in Super Tokens
      • Test Super Token Faucet
    • ๐ŸŒŠMoney Streaming (CFA)
      • Solidity
        • Read Methods
          • getFlowInfo
          • getFlowRate
          • getNetFlowRate
        • Write Methods
          • createFlow
          • updateFlow
          • deleteFlow
          • With User Data
          • With Context
      • SDK Core
        • Read Methods
          • getFlow
          • getNetFlow
          • getAccountFlowInfo
        • Write Methods
          • createFlow
          • updateFlow
          • deleteFlow
      • Access Control List (ACL)
        • Solidity
          • createFlowFrom
          • updateFlowFrom
          • deleteFlowFrom
          • setFlowPermissions
          • setMaxFlowPermissions
          • revokeFlowPermissions
          • increaseFlowRateAllowanceWithPermissions
          • decreaseFlowRateAllowanceWithPermissions
          • getFlowPermissions
        • SDK Core
          • createFlowByOperator
          • updateFlowByOperator
          • deleteFlowByOperator
          • updateFlowOperatorPermissions
          • revokeFlowOperatorPermissions
          • increaseFlowRateAllowanceWithPermissions
          • getFlowOperatorData
      • Frontend Examples
      • More...
        • Flow Rate Time Frames
        • Building Batched Streams in Safe
        • Flow NFTs
    • โœณ๏ธDistributions (IDA)
      • IDA - Solidity
      • IDA - SDK Core
      • IDA - Frontend Examples
    • ๐Ÿค–Super Apps
      • Super Apps in Depth
      • Super App Callbacks
        • Calling Agreements In Super Apps
      • User Data
        • NFT Billboard Example
      • SuperAppBaseFlow
      • Super App Examples
      • Super App Deployment Guide
    • ๐ŸงบBatch Calls
      • Batch Calls - SDK Core
      • Batch Calls - Frontend Examples
    • โš™๏ธAutomations
      • Auto-Wrap
        • Dev Guide
      • Stream Scheduler
        • Dev Guide
      • Vesting Scheduler
        • Dev Guide
      • Stream Accounting API
        • Dev Guide
      • Automation Subgraphs
        • Stream Scheduler Subgraph
        • Vesting Scheduler Subgraph
        • Auto Wrap Subgraph
    • ๐Ÿ—๏ธIntegration Guides
      • For Your Integration: The Basics
        • Supporting Super Tokens
        • Supporting Money Streams
        • Supporting Instant Distributions
      • Gating with Superfluid Subscriptions & Guild.xyz
      • Displaying Token Balances
      • Useful Queries for Your Integration
        • Instant Distribution Events
        • Money Streaming Events
        • Super Token Events
        • Other Helpful Queries
      • Constructing Links to The Superfluid Dashboard
    • ๐Ÿ”Superfluid Subscriptions
      • Superfluid Checkout Widget
      • Implementing Subscriptions in your App
    • SDK Core General
      • Initialization
      • Functionality
      • Getting Data
      • Resolver
      • Reference Docs
    • Solidity General
      • Calling Super Agreements
      • Libraries
      • Resolver
    • Testing Guide
      • Hardhat Testing
      • Foundry Testing
      • In-Depth
        • Hardhat Mainnet Fork Testing
        • Super App Testing on Mainnet Forks
    • Subgraph
    • Reference
      • Deploying The Framework
      • EVM Contracts
      • SDK Redux
      • Superfluid Console
      • Superfluid Protocol Addresses
    • Contract Addresses
  • Sentinels
    • ๐Ÿฅ…Liquidations & TOGA
    • ๐Ÿค–Running a Sentinel
    • ๐Ÿ—บ๏ธSolvency Dashboard
  • Resources
    • ๐ŸŒŠSuperfluid Wave Pool
    • ๐Ÿ“œSuperfluid on Ethereum Mainnet
    • ๐Ÿ’ฐBounty Program
    • ๐Ÿ›ก๏ธSecurity & Bug Bounties
    • ๐Ÿ’กProject Ideas
    • ๐Ÿ—ณ๏ธToken Dashboard Submission
    • ๐ŸŽฅVideos
    • Superfluid Deployment Guide
    • Learn about Ethereum
    • Code of Conduct
Powered by GitBook
On this page
  • What is the Superfluid Checkout Widget?
  • Building Your Own Custom Checkout Widget
  • Checkout Widget Examples

Was this helpful?

  1. Developers
  2. Superfluid Subscriptions

Superfluid Checkout Widget

Using the Superfluid Checkout Widget for Web3-Native Subscriptions

PreviousSuperfluid SubscriptionsNextImplementing Subscriptions in your App

Last updated 1 year ago

Was this helpful?

NOTE: the checkout widget is in open alpha and is subject to change. We are iterating quickly and are open to feedback!

What is the Superfluid Checkout Widget?

The Superfluid Checkout Widget demonstrates a clean pattern for subscription UX in web3 using Superfluid, including all the core web3 interactions needed. Here are some highlights:

  • It is minimally-opinionated and uses the most up to date web3 front end tooling

  • It supports all Superfluid tokens and networks by default

  • It automatically becomes a 1-click checkout if a payer already holds Super Tokens

  • It can be styled as a widget, a full page view, or a modal itself

  • Fonts, shapes, colors are all customizable

The widget is meant to be imported into existing Wagmi front ends using a React or Vue component. You can import the widget library, include JSON that defines your widgetโ€™s behavior in the props of the subscription checkout component, and your widget will behave as expected. You can create your own custom JSON with our :

Building Your Own Custom Checkout Widget

Note: if you're looking to get started quickly, check out the which will work with Web3Modal or RainbowKit.

To implement your checkout widget, you'll need to install the widget library, wagmi, and the Superfluid token list from your favorite package manager:

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

#yarn
yarn add @superfluid-finance/widget wagmi @superfluid-finance/tokenlist

You can then import the widget into the component you'd like to render it in

import { WagmiConfig } from "wagmi";
import SuperfluidWidget from '@superfluid-finance/widget';
User Data in the Widget JSON
  1. On the top right of the Checkout Builder page, you'll find a JSON Editor. Open it to view your Widget JSON.

  2. In for each Payment Option, you can insert a userData field

  "paymentDetails": {
    "paymentOptions": [
      {
        "receiverAddress": "0x...",
        "chainId": 5,
        "superToken": {
          "address": "0x..."
        },
        "flowRate": {
          "amountEther": "1",
          "period": "month"
        },
        "userData": ( your user data goes here )     <-- !!
      }
    ]
  }

Once you have your JSON, you add the file to your project, import it, and use the javascript spread operator to pass it as props to your widget component. See {...data} here:

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


export function MyComponent() {

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

You'll also need a few more props:tokenList, type, and walletManager.

tokenList={superTokenList}

The type prop allows us to specify what kind of widget we want to create. We have a few supported types:

  • drawer

  • dialog

  • full-screen

Finally, the walletManager prop is necessary to ensure that the widget works properly with wallet connection libraries such as RainbowKit, Web3Modal, & more. It is recommended that you use the useMemo hook from react to set the walletManager variable & associated prop:

  const walletManager = useMemo(
    () => ({
      open,
      isOpen,
    }),
    [open, isOpen]
  );

Checkout Widget Examples

RainbowKit Example:

Web3Modal Example:

IPFS Hosted + Full Page Example:

Reference Documentation

Before you include the widget in your file, you'll need to generate a Widget JSON that you'll pass as a prop to the widget component. This Widget JSON specifies most of your widget's properties, and you can use our hosted, no code widget builder to visually see what your widget will look like. You can find the widget builder .

Having users provide with their streams can enhance on-chain traceability, help with record keeping, and be useful for Super Apps. Here's how you can set default user data for streams created through your Superfluid Widget

Customize the Superfluid Widget to your liking on the .

userData must be provided as a bytestring - this is most conveniently generated using viem's function.

The tokenList allows the widget to support all listed Super Tokens. You should have the Superfluid token list already installed it if you used the ! You'll just need to include it as a prop like this:

All examples can be found in

๐Ÿ”
here
Checkout Builder page
toHex
this repo.
no code widget builder
examples below
above npm or yarn commands
LogoSuperfluid Checkout Builder | Web3 Subscriptions Toolkit
Logowidget/examples/widget-vite-react-rainbowkit at master ยท superfluid-finance/widgetGitHub
Logowidget/examples/widget-vite-react-web3modal at master ยท superfluid-finance/widgetGitHub
user data
Logowidget/apps/hosted-widget at master ยท superfluid-finance/widgetGitHub
@superfluid-finance/widget
The widget builder in action.