Quick Start

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

1. 계정 생성 & API 키 발급

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

2. SDK 설치

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

$ npm install @crypax/react

3. 결제 생성 (서버)

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

server.ts

import { Crypax, PLUMISE_MAINNET } from '@crypax/node';
// Available chains: PLUMISE_MAINNET (41956), PLUMISE_TESTNET (419561)

const crypax = new Crypax('sk_live_your_secret_key', {
  apiUrl: 'https:1
});

2
const payment = await crypax.payments.create({
  amount: '1.0',
  recipientAddress: '0xYourWalletAddress',
  chainId: PLUMISE_MAINNET.chainId,  3
  currency: 'native',
  orderId: 'order_123',
  description: 'Premium Plan',
  expiresInMinutes: 30,
});

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

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

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

App.tsx

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

function App() {
  return (
    <CrypaxProvider publishableKey="pk_live_your_key">
      <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 1 PLM' : status}
    </button>
  );
}

5. 웹훅 설정

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

webhooks.ts

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

const app = express();
const crypax = new Crypax('sk_live_your_secret_key');

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, signature, 'whsec_your_secret');

    switch (event.type) {
      case 'payment.confirmed':
        // Fulfill the order
        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 레퍼런스 →