Quickstart: een betaling accepteren

Je eindigt met een betaalknop in een React-app die een wallet verbindt, de betaler een token laat kiezen en een echte betaling naar jouw adres bevestigt. Je hebt Node.js 20+, een React- of Next.js-app (een nieuwe create-next-app volstaat) en een wallet om vanuit te betalen nodig.

1. Installeer de Commerce Kit

pnpm add @solana-commerce/kit

2. Voeg de knop toe

Plaats de PaymentButton-component ergens in je app en stel de merchant-wallet in op een adres dat je beheert:

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

De component verwerkt intern de walletverbinding, tokenselectie, transactieverwerking en UI-status. Met mode: "tip" kiest de betaler zelf het bedrag; zie betaalmodi voor afrekeningen met vaste prijs en winkelwagentjes.

Probeer het in de browser

Configureer de betaalknop en start de tipflow zonder deze pagina te verlaten.

Open de Commerce Kit Playground op volledig scherm

3. Ontvang een betaling

Start je app, klik op de knop, verbind een wallet en betaal. De onPaymentSuccess-callback ontvangt de transactiehandtekening, die als je ontvangstbewijs dient: zoek deze op met getTransaction of in een willekeurige explorer.

Wat nu?

• Hoe betalingen werken op Solana - wallets, stablecoins, token accounts en kosten
• Betalingen verifiëren - bevestig een betaling server-side vóór het uitvoeren van een bestelling
• Betalingen verzenden - uitbetalingen en overboekingen vanuit je eigen backend
• Gereed voor productie - voordat er echt geld wordt verplaatst