결제 버튼

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: "buyNow"
      }}
      paymentConfig={{
        products: [{ id: "item-1", name: "Coffee", price: 5.0, quantity: 1 }]
      }}
      onPaymentSuccess={(signature) => {
        console.log("Payment confirmed:", signature);
      }}
    />
  );
}

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

팁 버튼

결제 모달

Solana Pay QR 코드 모달

결제 모드

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

모드	설명
`buyNow`	고정 금액의 단일 제품 구매
`cart`	여러 제품이 포함된 장바구니
`tip`	사용자가 금액을 직접 선택(기부/팁)

구성

필수 구성

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

선택적 구성

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

결제 설정

buyNow 및 cart 모드의 경우, paymentConfig를 통해 제품을 제공하세요:

paymentConfig={{
  products: [
    { id: '1', name: 'T-Shirt', price: 25, quantity: 2 },
    { id: '2', name: 'Hoodie', price: 45, quantity: 1 }
  ]
}}

이벤트 콜백

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

사용자 정의 트리거

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

<PaymentButton
  config={{
    merchant: { name: "Shop", wallet: "address" },
    mode: "buyNow"
  }}
  paymentConfig={{
    products: [{ id: "1", name: "Product", price: 10, quantity: 1 }]
  }}
>
  <button className="my-custom-button">Pay with Solana</button>
</PaymentButton>

목차