Overview

To install the package, run npm i spark-micropayments in your project.

Usage

import Paywall, { ConnectWallet } from 'spark-micropayments'

function App() {
  return (
    <div>
      <header>
        <h1>My Site</h1>
        <ConnectWallet />
      </header>

      <p>Here is free content that is visible to everyone</p>

      <Paywall
        receiverSparkAddress="spark1pgss96dw2dqw0gwxlwudx2v863husuass6u2q3e4lfz23qs96ewfedz2w0pxam"
        amount={0.1}
        sparkscanApiKey="ss_sk_live_..."
      >
        <p>Here is some content that is only visible if you pay 0.1 USDB</p>
      </Paywall>
    </div>
  )
}

Any content within the Paywall component will only be visible if the user pays the specified amount of USDB via the Spark network. The user connects their Xverse wallet and pays using USDB stablecoin.

The Paywall component includes its own "Connect Wallet" button. The ConnectWallet component renders only when a wallet is connected, showing the truncated address and a "Disconnect" button — useful for placing a disconnect option in a navbar or header. Wallet state syncs automatically between both components with no provider wrapper needed. ConnectWallet accepts an optional className prop for styling.

Parameters

receiverSparkAddress

The Spark address that will receive USDB payments. This is the address of the content owner.

amount

The minimum amount of USDB that the user needs to pay to access the paywalled content (e.g., 0.1 = $0.10).

sparkscanApiKey

Your SparkScan API key, used to verify whether the connected wallet has already paid.