Skip to main content

Quick Start

This guide adds a working pay button to a React application in a few minutes.

Install​

npm install @sweem/sdk

Add the button​

The simplest integration is the drop in button. It bundles its own wallet and query providers, so it works on any page with no extra setup.

import { SweemPayButton } from "@sweem/sdk";

export function Checkout() {
  return (
    <SweemPayButton
      apiKey="pk_live_your_key"
      amount={100}
      token="USDC"
      onSuccess={({ digest, recipient }) => {
        console.log("paid", digest, "to", recipient);
      }}
    />
  );
}

When the payer completes the transfer, onSuccess fires with the transaction digest and the recipient address. Use the digest to confirm settlement on chain or to reconcile against your own records.

Flexible amount​

Omit the amount to let the payer enter one at checkout. This is useful for donations, top ups, and open invoices.

<SweemPayButton apiKey="pk_live_your_key" token="USDC" onSuccess={handleSuccess} />

Using the modal directly​

If your app already uses the Sui dapp kit, render the modal directly and reuse your existing wallet context. This avoids loading a second wallet provider.

import { PayModal } from "@sweem/sdk";

<PayModal open={open} onClose={close} apiKey="pk_live_your_key" amount={50} />;

Custom trigger​

For full control over the UI, use the render prop to wire the checkout flow to your own button or menu item instead of the default button.

<SweemPayButton
  apiKey="pk_live_your_key"
  amount={100}
  render={(open) => <button onClick={open}>Checkout</button>}
/>;

Local testing without a key​

To try the flow before configuring a key, pass recipient (and optionally merchant) to bypass the backend lookup.

<SweemPayButton apiKey="pk_test" amount={1} recipient="0xYOUR_RECEIVING_ADDRESS" merchant="Acme" />;