결제 버튼

Commerce Kit은 현재 베타 버전입니다. 정식 출시 전에 API가 변경될 수 있습니다. Commerce Kit에 대한 자세한 내용은 Commerce Kit 문서를 참조하세요.

Commerce Kit의 PaymentButton 컴포넌트는 지갑 연결, 토큰 선택, 트랜잭션 처리 및 UI 상태를 기본적으로 처리하는 완전한 결제 인터페이스를 제공합니다.

설치

pnpm add @solana-commerce/kit

기본 사용법

import { PaymentButton } from "@solana-commerce/kit";

function Checkout() {
  return (
    <PaymentButton
      config={{
        merchant: { name: "My Store", wallet: "your-wallet-address" },
        mode: "tip"
      }}
      onPaymentSuccess={(signature) => {
        console.log("Payment confirmed:", signature);
      }}
    />
  );
}

Commerce Kit Playground에서 컴포넌트를 구성하고 테스트해 보세요.

팁 버튼

결제 모달

Solana Pay QR 코드 모달

결제 모드

mode 옵션은 버튼 동작을 결정합니다:

모드	설명
`tip`	사용자가 자신의 금액을 선택 (기부/팁)

구성

필수 구성

속성	타입	설명
`merchant.name`	`string`	결제 시 표시되는 비즈니스 이름
`merchant.wallet`	`string`	결제를 받을 Solana 지갑 주소
`mode`	'tip'`	결제 플로우 유형

선택적 구성

속성	타입	설명
`network`	`'mainnet' \| 'devnet'`	Solana 네트워크 (기본값: `'mainnet'`)
`rpcUrl`	`string`	커스텀 RPC 엔드포인트
`allowedMints`	`string[]`	민트 주소로 허용되는 토큰 제한
`showQR`	`boolean`	QR 코드 결제 옵션 활성화
`theme`	`ThemeConfig`	시각적 커스터마이징 (색상, 테두리 반경 등)

이벤트 콜백

콜백	매개변수	설명
`onPaymentSuccess`	`(signature: string)`	온체인에서 트랜잭션 확인됨
`onPaymentError`	`(error: Error)`	모든 단계에서 결제 실패
`onPaymentStart`	`()`	결제 플로우 시작됨
`onCancel`	`()`	사용자가 결제를 취소함

커스텀 트리거

기본 버튼을 자신의 요소로 교체하세요:

<PaymentButton
  config={{
    merchant: { name: "Shop", wallet: "address" },
    mode: "tip"
  }}
>
  <button className="my-custom-button">Pay with Solana</button>
</PaymentButton>

목차