@crypax/react

React hooks and components for integrating Crypax payments.

Installation

$ npm install @crypax/react

Setup

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

App.tsx

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

function App() {
  return (
    <CrypaxProvider
      publishableKey="pk_live_your_key"
      options={{ apiUrl: 'https://api.crypax.io' }}
    >
      <YourApp />
    </CrypaxProvider>
  );
}

Prop	Type	Description
`publishableKey`	string	Your publishable key (pk_live_). Required.
`options?`	CrypaxOptions	Optional config: apiUrl, etc.

Hooks & Components

`useConfirmPayment()`

Hook for confirming a payment. Manages state and error handling.

Checkout.tsx

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

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

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

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

Return	Type	Description
`confirmPayment`	(clientSecret: string) => Promise<PaymentResult>	Trigger the payment modal for the given client secret.
`status`	"idle" \| "processing" \| "confirmed" \| "failed"	Current status of the payment confirmation flow.
`error`	Error \| null	Error object if the payment failed, otherwise null.

`useWallet()`

Hook for detecting and connecting to the user's wallet.

WalletInfo.tsx

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

function WalletInfo() {
  const { address, chainId, isConnected, connect, disconnect } = useWallet();

  if (!isConnected) {
    return <button onClick={connect}>Connect Wallet</button>;
  }

  return (
    <div>
      <p>Address: {address}</p>
      <p>Chain ID: {chainId}</p>
      <button onClick={disconnect}>Disconnect</button>
    </div>
  );
}

`CheckoutButton`

Pre-built button component that wraps confirmPayment. Accepts onSuccess and onError callbacks.

Checkout.tsx

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

function Checkout() {
  return (
    <CheckoutButton
      clientSecret="cs_live_..."
      onSuccess={(result) => console.log('Paid!', result.txHash)}
      onError={(err) => console.error(err)}
    >
      Pay 1 PLM
    </CheckoutButton>
  );
}

Full Example

PaymentPage.tsx

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

export default function App() {
  return (
    <CrypaxProvider publishableKey="pk_live_your_key">
      <PaymentPage clientSecret="cs_live_..." />
    </CrypaxProvider>
  );
}

function PaymentPage({ clientSecret }: { clientSecret: string }) {
  const { address, isConnected, connect } = useWallet();
  const { confirmPayment, status, error } = useConfirmPayment();

  if (!isConnected) {
    return <button onClick={connect}>Connect Wallet</button>;
  }

  const handlePay = async () => {
    const result = await confirmPayment(clientSecret);
    if (result.status === 'confirmed') {
      alert('Payment confirmed! tx: ' + result.txHash);
    }
  };

  return (
    <div>
      <p>Paying from: {address}</p>
      <button onClick={handlePay} disabled={status !== 'idle'}>
        {status === 'idle' ? 'Pay Now' : status}
      </button>
      {error && <p style={{ color: 'red' }}>{error.message}</p>}
    </div>
  );
}

Vue SDK →Node.js SDK →API Reference →