SDK · @clasp/react

Add a Fiber wallet in a few lines.

A different app — Acme Checkout — integrates Clasp with a provider, a button, and one hook. Everything on this page is driven by @clasp/react talking to the same policy engine.

Integration@clasp/react

import {
  ClaspProvider,
  ConnectFiberWalletButton,
  useClaspSession,
} from "@clasp/react";

<ClaspProvider config={{
  serverUrl, origin, app: { name: "Acme Checkout" },
  permissions: ["payments:request"], asset: "CKB",
  maxSinglePayment: "100000000",
  maxSessionSpend: "300000000",
}}>
  <Checkout />
</ClaspProvider>

// inside <Checkout/>:
const { pay, capabilities } = useClaspSession();

<ConnectFiberWalletButton />
const r = await pay({ invoice, amount: "100000000" });
if (r.ok && r.receipt.verified) unlock();

Live sessionDisconnected

Connect on the left — the hook exposes the session, its capabilities, and pay().