@payclave/sdk-react

React SDK for Payclave — non-custodial crypto checkout for merchants.

Wraps @payclave/sdk-js with a React hook and a checkout button component.

Published on npm as @payclave/sdk-react.

Install

npm install @payclave/sdk-react
# or
bun add @payclave/sdk-react

Peer dependencies: react@^19, react-dom@^19.

<PayclaveCheckoutButton />

import { PayclaveCheckoutButton } from "@payclave/sdk-react"

export function Checkout() {
  return (
    <PayclaveCheckoutButton
      publicKey="pk_test_..."
      amount="25.00"
      reference="order_123"
      className="btn btn-primary"
      onSuccess={(session) => console.log("redirecting to", session.checkoutUrl)}
      onError={(err) => console.error(err)}
    />
  )
}

Props

All standard <button> HTML attributes are forwarded (className, style, id, aria-*, data-*, ref, etc.). On top of that:

| Prop | Type | Notes | | ----------------- | ------------------------------------------------------------- | ---------------------------------------------------------------- | | publicKey | string | pk_test_... or pk_live_.... | | amount | string | Positive decimal, up to 18 fractional digits. | | reference | string | Your order reference. | | idempotencyKey? | string | Sent as Idempotency-Key; reuse only for retries of the same request. | | signal? | AbortSignal | Cancel the in-flight request. | | apiBaseUrl? | string | Override API base URL. | | fetcher? | (url, init) => Response | Custom fetch (testing, custom headers, etc.). | | redirect? | (url: string) => void | Custom redirect handler. Defaults to window.location.assign. | | timeoutMs? | number | Per-request timeout. | | label? | ReactNode | Idle label. Defaults to "Pay with Payclave". | | pendingLabel? | ReactNode | Label while a checkout is opening. Defaults to "Opening checkout...". | | children? | ReactNode \| ((state) => ReactNode) | Full control over button contents. Receives { pending, error }. | | onClick? | (event) => boolean \| void \| Promise<...> | Called before checkout. Return false or call preventDefault() to skip. | | onPending? | () => void | Fires when the checkout request starts. | | onSuccess? | (session: PayclaveCheckoutSession) => void | Fires after the session is created and redirect is dispatched. | | onError? | (error: PayclaveError) => void | Fires on any failure. |

The button is disabled while the request is in flight and sets aria-invalid="true" when an error is present.

usePayclaveCheckout(options)

Lower-level hook for building your own button or driving checkout from a form submit.

import { usePayclaveCheckout } from "@payclave/sdk-react"

function MyForm() {
  const redirectToCheckout = usePayclaveCheckout({
    publicKey: "pk_test_...",
    timeoutMs: 15_000,
  })

  return (
    <form
      onSubmit={async (event) => {
        event.preventDefault()
        await redirectToCheckout({ amount: "25.00", reference: "order_123" })
      }}
    >
      <button type="submit">Pay</button>
    </form>
  )
}

Accepts: publicKey, apiBaseUrl, fetcher, redirect, timeoutMs. Returns a function that takes { amount, reference, idempotencyKey?, signal? }.

Errors

The same PayclaveError from @payclave/sdk-js is re-exported. onError always receives a PayclaveError; unknown errors are wrapped with code: "NETWORK_ERROR".

Server components

<PayclaveCheckoutButton /> is a client component ("use client" is preserved in the built output). Import it from a server component or page without any extra wrapping.

License

MIT — see LICENSE.