支払いボタン

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>

目次