@strimz/sdk-react

The React SDK gives you read-only client hooks and a few components for embedded checkout. It uses publishable keys (pk_test_… and pk_live_…), which are safe to ship in a browser bundle.

Install

pnpm add @strimz/sdk-react

Provider

Wrap your app once:

'use client'
import { StrimzProvider } from '@strimz/sdk-react'
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <StrimzProvider config={{ baseUrl: 'https://api.strimz.finance' }}>{children}</StrimzProvider>
  )
}

StrimzProvider doesn't take an API key. The components issue requests through your own backend (server-side Strimz client) for any write operations. Read-only paths can use a publishable key:

<StrimzProvider config={{ baseUrl: 'https://api.strimz.finance', publishableKey: 'pk_live_xxx' }}>

<StrimzPayButton />

Drop-in checkout button for an existing session:

'use client'
import { StrimzPayButton } from '@strimz/sdk-react'
 
export function Checkout({ session }: { session: { id: string } }) {
  return (
    <StrimzPayButton
      sessionId={session.id}
      onSuccess={(tx) => router.push(`/thanks?tx=${tx.txHash}`)}
      onError={(err) => toast.error(err.message)}
    />
  )
}

Internally the button uses Reown AppKit to connect a wallet. It then prompts the customer for two typed-data signatures. The first is an EIP-3009 ReceiveWithAuthorization that authorises USDC (or EURC) to move. The second is a Strimz PayIntent that binds the payment to this specific merchant, amount, and session. The button resolves once the on-chain transaction confirms.

The PayIntent signature is what stops an intercepted EIP-3009 auth from being replayed to a different merchant. Same story on subscriptions: the wallet prompts once for the EIP-2612 permit and once for a SubscriptionIntent that pins the plan.

<StrimzCheckoutEmbed />

For a full embedded checkout (no redirect):

<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

import { usePaymentSession, useSubscription, useTransaction } from '@strimz/sdk-react'
 
function PaymentStatus({ sessionId }: { sessionId: string }) {
  const { data, isLoading, error } = usePaymentSession(sessionId)
  if (isLoading) return <Spinner />
  if (error) return <ErrorBanner error={error} />
  return <p>Status: {data.status}</p>
}

Hooks use TanStack Query under the hood. Bring your own QueryClient, or wrap with <QueryClientProvider> if you don't already have one.

Source

github.com/StrimzLab/strimz/tree/main/packages/sdk-react