Quick Start

연동부터 첫 테스트 결제까지 5분이면 충분합니다.

1. 계정 생성 & API 키 발급

crypax.io/register에서 회원가입 후 대시보드에 로그인하세요. API 키 메뉴에서 키 쌍을 생성하면 공개 키(pk_live_)와 비밀 키(sk_live_)가 발급됩니다. 비밀 키는 한 번만 표시되니 안전한 곳에 저장하세요.

2. SDK 설치

사용하는 플랫폼에 맞는 패키지를 선택하여 설치하세요.

$ npm install @crypax/react @crypax/node

3. 결제 생성 (서버)

서버에서 비밀 키를 사용하여 결제를 생성합니다. 응답의 <code>clientSecret</code>을 프론트엔드로 안전하게 전달하세요.

server.ts

import { Crypax } from '@crypax/node';

const crypax = new Crypax('sk_live_...');

// Create a payment
const payment = await crypax.payments.create({
  amount: '10.00',
  chainId: 41956,
  currency: 'native',
  description: 'Pro Plan',
});

// Send payment.clientSecret to frontend
// payment.clientSecret = "cs_live_..."

QR mode — skip wallet selection and show QR code directly:

const payment = await crypax.payments.create({
  amount: '10.00',
  chainId: 41956,
  qrMode: true, // Skip wallet selection, show QR directly
});

4. 결제 확인 (클라이언트)

서버에서 받은 <code>clientSecret</code>으로 결제 모달을 열고 사용자가 지갑으로 결제를 확인하도록 합니다.

App.tsx

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

function App({ clientSecret }: { clientSecret: string }) {
  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>
  );
}

Or use useConfirmPayment for custom UI:

Checkout.tsx

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

function App() {
  return (
    <CrypaxProvider publishableKey="pk_live_...">
      <Checkout />
    </CrypaxProvider>
  );
}

function Checkout() {
  const { confirmPayment, status } = useConfirmPayment();

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

  return (
    <button onClick={handlePay} disabled={status !== 'idle'}>
      {status === 'idle' ? 'Pay 10 PLM' : status}
    </button>
  );
}

5. 웹훅 설정

결제 상태가 변경될 때 실시간 이벤트를 받으려면 웹훅 엔드포인트를 설정하세요. 서명을 반드시 검증하여 요청의 신뢰성을 확인하세요.

webhooks.ts

import { Crypax } from '@crypax/node';
import express from 'express';

const app = express();
const crypax = new Crypax('sk_live_...');

app.post('/webhooks/crypax', express.raw({ type: 'application/json' }), (req, res) => {
  const signature = req.headers['x-crypax-signature'] as string;

  try {
    const event = crypax.webhooks.constructEvent(
      req.body,           // raw body string
      signature,
      'whsec_...',        // webhook signing secret
    );

    switch (event.type) {
      case 'payment.confirmed':
        // Handle confirmed payment
        console.log('Payment confirmed:', event.data.id);
        break;
      case 'payment.expired':
        console.log('Payment expired:', event.data.id);
        break;
    }

    res.json({ received: true });
  } catch (err) {
    res.status(400).json({ error: 'Invalid signature' });
  }
});

6. 테스트하기

개발 중에는 chainId 419561(Plumise 테스트넷)을 사용하세요. chainId: 419561로 결제를 생성하고 테스트넷 자금으로 테스트하세요. 라이브 배포 시에는 chainId: 41956(Plumise 메인넷)으로 전환하세요.

개요 →React SDK 레퍼런스 →API 레퍼런스 →