Quickstart

This guide will walk you through setting up the PayStreamer SDK in your React application.

1. Installation

Install the PayStreamer SDK alongside its peer dependencies (@mysten/dapp-kit-react, @mysten/sui, and @tanstack/react-query). Pin the peer versions below — this is the exact combination the SDK is tested against; an unpinned npm install can silently resolve newer, unverified versions of @mysten/sui or @mysten/dapp-kit-react.

npm install @paystreamer/sdk @mysten/dapp-kit-react@2.1.10 @mysten/sui@2.23.1 @tanstack/react-query

Compatibility matrix: @mysten/sui@2.23.1, @mysten/dapp-kit-react@2.1.10, @mysten/dapp-kit-core@1.6.8, @tanstack/react-query@^5.90.16, React 18 or 19, Node 20+. Sui CLI 1.75.x for local development. See the SDK README (opens in a new tab) for the current matrix.

2. Setup the Provider

PayStreamer sits on top of dApp Kit (opens in a new tab)'s createDAppKit/DAppKitProvider, which manages the wallet connection and the Sui client. Wrap that with PayStreamerProvider, which carries the PayStreamer-specific contract addresses for whichever network you target — getConfig() looks these up for you so you don't have to hardcode package IDs.

⚠️

This example targets testnet — build and test your integration there before ever pointing at mainnet.

import React from "react";
import { createDAppKit, DAppKitProvider } from "@mysten/dapp-kit-react";
import { SuiGrpcClient } from "@mysten/sui/grpc";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { PayStreamerProvider, getConfig, CLOCK_OBJECT_ID } from "@paystreamer/sdk";
 
const queryClient = new QueryClient();
const sdkConfig = getConfig("testnet");
 
const dAppKit = createDAppKit({
  networks: ["testnet"],
  defaultNetwork: "testnet",
  createClient: (network) =>
    new SuiGrpcClient({
      network,
      baseUrl: `https://fullnode.${network}.sui.io:443`,
    }),
});
 
export default function App({ children }) {
  return (
    <QueryClientProvider client={queryClient}>
      <DAppKitProvider dAppKit={dAppKit}>
        <PayStreamerProvider
          config={{
            network: "testnet",
            packageId: sdkConfig.PACKAGE_ID,
            registryId: sdkConfig.COIN_TYPE_REGISTRY_ID,
            clockId: CLOCK_OBJECT_ID,
            pusdPackageId: sdkConfig.PUSD_PACKAGE_ID,
            pusdType: sdkConfig.PUSD_TYPE_ARG,
            pusdTreasuryCapId: sdkConfig.PUSD_TREASURY_CAP_ID,
            pusdTreasuryCapInitVersion: sdkConfig.PUSD_TREASURY_CAP_INIT_VERSION,
          }}
        >
          {children}
        </PayStreamerProvider>
      </DAppKitProvider>
    </QueryClientProvider>
  );
}

Want a connect button with zero extra wiring during development? Register createPersistentBurnerWalletInitializer() (see the example app (opens in a new tab)) via createDAppKit's walletInitializers option. It stores a keypair in localStorage — convenient for testnet demos, but never enable it in production.

3. Drop in a Component

With the provider configured, you can import drop-in UI components or use headless hooks. Here is how to easily render a subscription modal.

⚠️

The example below subscribes to an existing platformId — it doesn't create one. If you don't have a platform registered yet, do that first: Register Your Platform & Create Tiers.

import { useState } from "react";
import { SetupSubscriptionModal } from "@paystreamer/sdk/ui";
 
export function SubscribeSection() {
  const [isOpen, setIsOpen] = useState(false);
 
  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Subscribe Now</button>
      
      <SetupSubscriptionModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        platformId="0xYOUR_PLATFORM_ID"
        tierIndex={0}
        // tierAmount and tierFrequencyMs are automatically fetched from the contract!
        onSuccess={(digest) => console.log("Subscribed!", digest)}
      />
    </div>
  );
}

Not a Developer? If you are an end-user simply looking to manage your PayStreamer subscriptions, you do not need to build a custom dApp! Head over to the PayStreamer Portal to manage your account natively.

Overview Register Your Platform