---
title: "Quickstart: accept a payment"
description:
  Add a working payment button to a React app in about five minutes and take
  your first stablecoin 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.

<Callout type="caution">
  The Commerce Kit is currently in beta. APIs may change before the stable
  release.
</Callout>

## 1. Install the Commerce Kit

```bash
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:

```tsx
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](/docs/payments/accept-payments/payment-button) for
fixed-price and cart checkouts.

## Try it in the browser

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

<iframe
  src="https://launch.solana.com/products/commercekit/playground"
  title="Commerce Kit Playground"
  width="100%"
  height="1080"
  loading="lazy"
  allow="clipboard-read; clipboard-write; payment"
  referrerPolicy="strict-origin-when-cross-origin"
  style={{
    display: "block",
    width: "100%",
    border: "1px solid rgba(148, 163, 184, 0.25)",
    borderRadius: "12px",
    background: "#fff"
  }}
/>

[Open the Commerce Kit Playground full screen](https://launch.solana.com/products/commercekit/playground)

## 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](/docs/rpc/http/gettransaction) or in
any explorer.

## Where to go next

- [How payments work on Solana](/docs/payments/how-payments-work) - wallets,
  stablecoins, token accounts, and fees
- [Verify payments](/docs/payments/accept-payments/verification-tools) - confirm
  a payment server-side before fulfilling an order
- [Send payments](/docs/payments/send-payments) - payouts and transfers from
  your own backend
- [Production readiness](/docs/payments/production-readiness) - before real
  money moves