@crypax/react

Crypax 결제 연동을 위한 React 훅 및 컴포넌트.

설치

$ npm install @crypax/react

설정

앱을 CrypaxProvider로 감싸세요. 모든 훅은 프로바이더 안에서 사용해야 합니다.

App.tsx

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

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

프롭	타입	설명
`publishableKey`	string	공개 키 (pk_live_). 필수.
`options?`	CrypaxOptions	선택적 설정: apiUrl 등.

훅 & 컴포넌트

`useConfirmPayment()`

결제 확인을 위한 훅. 상태와 에러를 관리합니다.

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>
  );
}

반환값	타입	설명
`confirmPayment`	(clientSecret: string) => Promise<PaymentResult>	주어진 client secret으로 결제 모달을 트리거합니다.
`status`	"idle" \| "processing" \| "confirmed" \| "failed"	결제 확인 플로우의 현재 상태.
`error`	Error \| null	결제 실패 시 에러 객체, 아니면 null.

`useWallet()`

사용자 지갑을 감지하고 연결하기 위한 훅.

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`

confirmPayment를 감싼 사전 제작 버튼 컴포넌트. onSuccess, onError 콜백을 받습니다.

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>
  );
}

전체 예제

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 레퍼런스 →