Quickstart: accept a payment

You'll end up with a payment button in a React app that connects a wallet, lets the payer pick a token, and confirms a real payment to your address. You need Node.js 20+, a React or Next.js app (a fresh create-next-app is fine), and a wallet to pay from.

1. Install the Commerce Kit

pnpm add @solana-commerce/kit

2. Add the button

Drop the PaymentButton component anywhere in your app and set the merchant wallet to an address you control:

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

The component handles wallet connection, token selection, transaction processing, and UI state internally. mode: "tip" lets the payer choose the amount; see payment modes for fixed-price and cart checkouts.

Try it in the browser

Configure the payment button and launch the tip flow without leaving this page.

Open the Commerce Kit Playground full screen

3. Take a payment

Run your app, click the button, connect a wallet, and pay. The onPaymentSuccess callback receives the transaction signature, which is your receipt: look it up with getTransaction or in any explorer.

Where to go next

• How payments work on Solana - wallets, stablecoins, token accounts, and fees
• Verify payments - confirm a payment server-side before fulfilling an order
• Send payments - payouts and transfers from your own backend
• Production readiness - before real money moves