빠른 시작: 결제 수락하기

최종적으로 React 앱에 결제 버튼이 생성됩니다. 이 버튼은 지갑을 연결하고, 결제자가 토큰을 선택하며, 귀하의 주소로 실제 결제를 확인합니다. Node.js 20 이상, React 또는 Next.js 앱(새로 생성한 create-next-app도 가능), 그리고 결제에 사용할 지갑이 필요합니다.

1. Commerce Kit 설치

pnpm add @solana-commerce/kit

2. 버튼 추가

앱의 원하는 위치에 PaymentButton 컴포넌트를 추가하고, 귀하가 관리하는 주소로 판매자 지갑을 설정하세요:

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

이 컴포넌트는 지갑 연결, 토큰 선택, 트랜잭션 처리 및 UI 상태를 내부적으로 처리합니다. mode: "tip"은 결제자가 금액을 선택할 수 있게 합니다. 고정 가격 및 장바구니 결제에 대해서는 결제 모드를 참조하세요.

브라우저에서 체험하기

이 페이지를 벗어나지 않고 결제 버튼을 구성하고 팁 플로우를 실행해 보세요.

Commerce Kit Playground 전체 화면으로 열기

3. 결제 받기

앱을 실행하고, 버튼을 클릭한 후 지갑을 연결하고 결제하세요. onPaymentSuccess 콜백은 트랜잭션 서명을 수신하며, 이것이 영수증입니다. getTransaction이나 임의의 익스플로러에서 조회할 수 있습니다.

다음 단계

• Solana에서 결제가 작동하는 방식 - 지갑, 스테이블코인, token account 및 수수료
• 결제 검증 - 주문 처리 전 서버 측에서 결제 확인
• 결제 전송 - 자체 백엔드에서의 지급 및 이체
• 프로덕션 준비 - 실제 자금 이동 전 확인 사항