Payment Button

The Commerce Kit is currently in beta. APIs may change before the stable release. For additional details on Commerce Kit, see the Commerce Kit documentation.

The PaymentButton component from the Commerce Kit provides a complete payment interface—handling wallet connection, token selection, transaction processing, and UI state out of the box.

Installation

pnpm add @solana-commerce/kit

Basic Usage

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

Check out the Commerce Kit Playground to configure and test the component.

Tip Button

Pay Modal

Solana Pay QR Code Modal

Payment Modes

The mode option determines the button behavior:

Mode	Description
`buyNow`	Single product purchase with fixed amount
`cart`	Shopping cart with multiple products
`tip`	User chooses their own amount (donations/tips)

Configuration

Required Config

Property	Type	Description
`merchant.name`	`string`	Business name shown during checkout
`merchant.wallet`	`string`	Solana wallet address to receive payments
`mode`	`'buyNow' \| 'cart' \| 'tip'`	Payment flow type

Optional Config

Property	Type	Description
`network`	`'mainnet' \| 'devnet'`	Solana network (default: `'mainnet'`)
`rpcUrl`	`string`	Custom RPC endpoint
`allowedMints`	`string[]`	Restrict accepted tokens by mint address
`showQR`	`boolean`	Enable QR code payment option
`theme`	`ThemeConfig`	Visual customization (colors, border radius, etc.)

Payment Config

For buyNow and cart modes, provide products via paymentConfig:

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

Event Callbacks

Callback	Parameters	Description
`onPaymentSuccess`	`(signature: string)`	Transaction confirmed on-chain
`onPaymentError`	`(error: Error)`	Payment failed at any stage
`onPaymentStart`	`()`	Payment flow initiated
`onCancel`	`()`	User cancelled the payment

Custom Trigger

Replace the default button with your own element:

<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>

सामग्री तालिका