@crypax/react

React hooks and components for integrating Crypax payments.

Installation

$ npm install @crypax/react @crypax/node

Setup

Wrap your app with CrypaxProvider. All hooks and components must be used inside the provider.

App.tsx

import { CrypaxProvider } from '@crypax/react';

function App() {
  return (
    <CrypaxProvider
      publishableKey="pk_live_..."
      options={{
        theme: 'dark',   // 'light' | 'dark' | 'auto'
        locale: 'ko',    // 'en' | 'ko'
        mode: 'wallet',  // 'wallet' | 'qr'
        chainId: 41956,
      }}
    >
      <YourApp />
    </CrypaxProvider>
  );
}

Prop	Type	Description
`publishableKey`	string	Your publishable key (pk_live_). Required.
`options.theme?`	"light" \| "dark" \| "auto"	UI theme: 'light' \| 'dark' \| 'auto'
`options.locale?`	"en" \| "ko"	UI language: 'en' \| 'ko'
`options.mode?`	"wallet" \| "qr"	Payment mode: 'wallet' \| 'qr'
`options.chainId?`	number	Default chain ID for payments

Components

`CheckoutButton`

One-click payment button. Internally calls confirmPayment and manages loading/error state.

Checkout.tsx

import { CrypaxProvider, CheckoutButton } from '@crypax/react';

export default function App() {
  return (
    <CrypaxProvider publishableKey="pk_live_...">
      <CheckoutButton
        clientSecret={clientSecret}
        onSuccess={(result) => console.log('Paid!', result.txHash)}
        onCancel={() => console.log('Cancelled')}
        onError={(err) => console.error(err)}
      >
        Pay Now
      </CheckoutButton>
    </CrypaxProvider>
  );
}

Prop	Type	Description
`clientSecret`	string	Client secret from your server (cs_live_...)
`onSuccess?`	(result: PaymentResult) => void	Called with PaymentResult on success
`onCancel?`	() => void	Called when the user cancels the modal
`onError?`	(err: Error) => void	Called with Error on failure

`PaymentElement`

Embeddable payment UI that renders inline. Useful when you need full control over layout.

PaymentForm.tsx

import { PaymentElement } from '@crypax/react';

function PaymentForm({ clientSecret }: { clientSecret: string }) {
  return (
    <PaymentElement
      clientSecret={clientSecret}
      onSuccess={(result) => console.log('txHash:', result.txHash)}
      onError={(err) => console.error(err)}
    />
  );
}

`PaymentStatusBadge`

Real-time payment status badge. Polls the payment status and updates automatically.

import { PaymentStatusBadge } from '@crypax/react';

<PaymentStatusBadge clientSecret="cs_live_..." />

Hooks

`useCrypax()`

Returns the Crypax client instance initialized by CrypaxProvider.

import { useCrypax } from '@crypax/react';

function MyComponent() {
  const crypax = useCrypax();
  // crypax is the Crypax client instance
}

`useConfirmPayment()`

Hook for confirming a payment. Manages wallet interaction, status, and error handling.

Checkout.tsx

import { useConfirmPayment } from '@crypax/react';

function Checkout({ clientSecret }: { clientSecret: string }) {
  const { confirmPayment, status, result, error, reset } = useConfirmPayment();

  const handlePay = async () => {
    const res = await confirmPayment(clientSecret);
    if (res.status === 'confirmed') {
      console.log('txHash:', res.txHash);
    }
  };

  return (
    <div>
      <button onClick={handlePay} disabled={status !== 'idle'}>
        {status === 'idle' ? 'Pay Now' : status}
      </button>
      {error && <p className="error">{error.message}</p>}
      {status !== 'idle' && <button onClick={reset}>Reset</button>}
    </div>
  );
}

Return	Type	Description
`confirmPayment`	(clientSecret: string) => Promise<PaymentResult>	Trigger the payment flow for the given client secret.
`status`	"idle" \| "processing" \| "confirmed" \| "failed"	Current status: 'idle' \| 'processing' \| 'confirmed' \| 'failed'
`result`	PaymentResult \| null	PaymentResult object after confirmation (null until resolved).
`error`	Error \| null	Error object if the payment failed, otherwise null.
`reset`	() => void	Reset status and error back to idle.

`useWallet()`

Hook for detecting and interacting with the user's wallet.

WalletInfo.tsx

import { useWallet } from '@crypax/react';

function WalletInfo() {
  const { wallet, loading, detect } = useWallet();

  if (loading) return <p>Detecting wallet...</p>;

  return (
    <div>
      {wallet ? (
        <>
          <p>Address: {wallet.address}</p>
          <p>Chain ID: {wallet.chainId}</p>
        </>
      ) : (
        <button onClick={detect}>Detect Wallet</button>
      )}
    </div>
  );
}

Return	Type	Description
`wallet`	{ address: string; chainId: number; provider: any } \| null	Detected wallet object (address, chainId, provider).
`loading`	boolean	True while wallet detection is in progress.
`detect`	() => void	Re-run wallet detection manually.

`usePaymentStatus(clientSecret)`

Polls and returns the current status of a payment by client secret.

import { usePaymentStatus } from '@crypax/react';

function StatusDisplay({ clientSecret }: { clientSecret: string }) {
  const { status, payment, loading, error } = usePaymentStatus(clientSecret);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return <p>Status: {status}</p>;
}

Return	Type	Description
`status`	string \| null	Current payment status string.
`payment`	Payment \| null	Full payment object.
`loading`	boolean	True while fetching.
`error`	Error \| null	Error if the fetch failed.

`useChains()`

Fetches the list of supported chains from the Crypax API.

import { useChains } from '@crypax/react';

function ChainList() {
  const { chains, loading, error } = useChains();

  if (loading) return <p>Loading chains...</p>;

  return (
    <ul>
      {chains.map((chain) => (
        <li key={chain.chainId}>{chain.name} ({chain.chainId})</li>
      ))}
    </ul>
  );
}

Full Example

PaymentPage.tsx

import { CrypaxProvider, CheckoutButton } from '@crypax/react';

// Server-side: create payment and pass clientSecret as prop
export default function App({ clientSecret }: { clientSecret: string }) {
  return (
    <CrypaxProvider publishableKey="pk_live_...">
      <CheckoutButton
        clientSecret={clientSecret}
        onSuccess={(result) => {
          console.log('Payment confirmed! tx:', result.txHash);
        }}
        onCancel={() => console.log('User cancelled')}
        onError={(err) => console.error('Payment failed:', err)}
      >
        Pay Now
      </CheckoutButton>
    </CrypaxProvider>
  );
}

Vue SDK →Node.js SDK →API Reference →