クイックスタート：支払いを受け付ける

最終的には、ウォレットを接続し、支払い者がトークンを選択して、あなたのアドレスへの実際の支払いを確認できる、ReactアプリにPaymentボタンを実装することになります。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" を使用すると、支払い者が金額を選択できます。定額およびカートチェックアウトについては、支払いモードを参照してください。

ブラウザで試してみる

このページを離れることなく、PaymentボタンとTipフローを設定して起動します。

Commerce Kit プレイグラウンドをフルスクリーンで開く

3. 支払いを受け取る

アプリを起動し、ボタンをクリックしてウォレットを接続し、支払いを行います。onPaymentSuccessコールバックはトランザクション署名を受け取ります。これが領収書となり、getTransactionまたは任意のエクスプローラーで確認できます。

次のステップ

• Solanaでの支払いの仕組み - ウォレット、ステーブルコイン、token account、および手数料
• 支払いの確認 - 注文を処理する前にサーバーサイドで支払いを確認する
• 支払いの送信 - 自社バックエンドからの支払いと送金
• 本番環境への対応 - 実際の資金が動く前に