@strimz/sdk-react

React components and hooks for the Strimz hosted checkout. Drop-in <StrimzPayButton/>, embeddable iframe, typed hooks, and a context provider for the Strimz API.

A small surface of React building blocks for Strimz: a context provider, a drop-in payment button, an embedded checkout, and a few typed hooks. Works with React 18 or 19, Next.js App Router ('use client'), Remix, and Vite. No Tailwind, no shadcn, no CSS imports required.

Table of contents

• Install
• Quick start
• Components
• Hooks
• Security
• SSR and React Server Components
• Bundle
• Links
• License

Install

pnpm add @strimz/sdk-react
# npm install @strimz/sdk-react
# yarn add @strimz/sdk-react

@strimz/sdk and react@^18 || ^19 are peer dependencies.

Quick start

'use client'
import { StrimzProvider, StrimzPayButton } from '@strimz/sdk-react'

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <StrimzProvider publishableKey={process.env.NEXT_PUBLIC_STRIMZ_PUBLISHABLE_KEY!}>
      {children}
    </StrimzProvider>
  )
}

export function PayPage({ sessionId }: { sessionId: string }) {
  return (
    <StrimzPayButton
      sessionId={sessionId}
      onSuccess={(txHash) => console.log('paid:', txHash)}
      onCancel={() => console.log('cancelled')}
    />
  )
}

Your backend creates the session with @strimz/sdk and passes its id to the React component.

Components

<StrimzProvider />

Wraps any tree that uses Strimz components or hooks. Exposes a memoised StrimzBrowserClient and the hosted-checkout origin to its descendants.

| Prop | Default | Notes | | ---------------- | ---------------------------- | ----------------------------------- | | publishableKey | required | pk_test_… or pk_live_… | | apiBaseUrl | https://api.strimz.finance | Override for staging | | checkoutOrigin | https://strimz.finance | Origin used to filter postMessage |

<StrimzPayButton />

Drop-in checkout button for an existing session.

| Prop | Default | Notes | | -------------------- | ----------------- | ---------------------------------------------------------------- | | sessionId | required | Returned by strimz.paymentSessions.create(...) on your backend | | mode | popup | popup or redirect | | theme | auto | auto, light, or dark | | size | md | sm, md, or lg | | label | Pay with Strimz | Override the button content | | onSuccess(txHash?) | none | Fires on strimz:checkout:success postMessage | | onCancel() | none | Fires on strimz:checkout:cancel or popup close | | onError(error) | none | Fires on strimz:checkout:error |

Internally the button uses Reown AppKit to connect a wallet, asks the customer for a single EIP-3009 signature, and resolves once the on-chain transaction confirms.

<StrimzCheckoutEmbed />

Iframe-embedded checkout for merchants who want the flow inside their page rather than in a popup.

<StrimzCheckoutEmbed
  sessionId={session.id}
  className="rounded-xl border"
  onSuccess={(tx) => router.push(`/thanks?tx=${tx.txHash}`)}
/>

Renders the same UI as the hosted page, but inline. Useful for cart-style flows where you don't want to lose the buyer's context.

Hooks

• useStrimzClient(). Returns the singleton StrimzBrowserClient.
• useStrimzSession(sessionId, { pollIntervalMs }). Polls a session until it reaches a terminal state. Backed by TanStack Query.
• useStrimzCheckout({ mode, onSuccess, onCancel, onError }). Imperative checkout opener for custom UI.

import { useStrimzSession } from '@strimz/sdk-react'

function PaymentStatus({ sessionId }: { sessionId: string }) {
  const { data, isLoading, error } = useStrimzSession(sessionId)
  if (isLoading) return <Spinner />
  if (error) return <ErrorBanner error={error} />
  return <p>Status: {data.status}</p>
}

Bring your own QueryClient, or wrap with <QueryClientProvider> if you don't already have one.

Security

• postMessage from the iframe or popup is filtered by checkoutOrigin. A page on a different origin cannot spoof a success event.
• <StrimzProvider /> rejects secret keys (sk_*) at construction time, so a misconfigured environment fails loudly.

SSR and React Server Components

Every export is marked 'use client'. Import from a Client Component in Next.js App Router. Server Components should only ever see the session id; never instantiate StrimzBrowserClient on the server.

Bundle

Distributed as ESM + CJS. React is external, so the published bundle is small (around 6 KB gzipped before tree-shaking). Inline styles in <StrimzPayButton /> keep the dependency surface at zero. No Tailwind, no shadcn, no CSS imports required.

Links

• Documentation
• SDK reference
• Repository
• Changelog
• Issues

License

MIT © Strimz