Skip to main content
The UnitPayProvider wraps your application and provides the UnitPay client to every hook and component. It manages the TanStack Query cache and the portal-session token lifecycle (automatic refresh).

​
Usage

Mint a portal token on your server, then pass it — along with the customerId — to the provider: 
// app/providers.tsx
import { UnitPayProvider } from '@unitpay/react';

export function Providers({
  children,
  customerId,
  portalToken,
}: {
  children: React.ReactNode;
  customerId: string;
  portalToken: string;
}) {
  return (
    <UnitPayProvider
      config={{
        apiBaseUrl: 'https://api.useunitpay.com/v1',
        customerId,
        portalToken,
        onSessionExpired: () => {
          window.location.href = '/login';
        },
      }}
    >
      {children}
    </UnitPayProvider>
  );
}
The portalToken is a short-lived JWT minted server-side with @unitpay/node (unitpay.portalSessions.create({ customerId })). The SDK refreshes it automatically — you do nothing after the initial mint. onSessionExpired fires only when refresh fails for good.

​
Props

​
config
UnitPayConfig
required
Configuration object (see below).
​
queryClient
QueryClient
Your own TanStack Query client. The provider creates a default one if omitted.

​
config (UnitPayConfig)

​
customerId
string
The customer this provider acts for. Required for customer-scoped hooks.
​
portalToken
string
Portal-session JWT minted server-side by your backend. Refreshed automatically by the SDK.
​
apiBaseUrl
string
UnitPay API base URL. Defaults to https://api.useunitpay.com/v1.
​
proxyBaseUrl
string
Route calls through a same-origin proxy (see the Next.js adapter). Takes precedence over apiBaseUrl.
​
productId
string
Pin a product for multi-product orgs. Hooks like usePricing() prefer this; single-product orgs can omit it (the SDK auto-resolves the only product).
​
fetch
typeof fetch
Custom fetch implementation (SSR, instrumentation).
​
onSessionExpired
() => void
Fires once when token refresh fails terminally (revoked, expired beyond max TTL, customer archived). Flip your UI to a “session expired” screen.