Betaalknop

De Commerce Kit bevindt zich momenteel in bèta. API's kunnen wijzigen vóór de stabiele release. Voor aanvullende details over Commerce Kit, zie de Commerce Kit documentatie.

Het PaymentButton component uit de Commerce Kit biedt een complete betalingsinterface—die wallet-verbinding, tokenselectie, transactieverwerking en UI-status out of the box afhandelt.

Installatie

pnpm add @solana-commerce/kit

Basisgebruik

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

Bekijk de Commerce Kit Playground om het component te configureren en te testen.

Fooiknop

Betaalmodal

Solana Pay QR-code modal

Betaalmodi

De mode optie bepaalt het gedrag van de knop:

Modus	Beschrijving
`buyNow`	Aankoop van één product met vast bedrag
`cart`	Winkelwagen met meerdere producten
`tip`	Gebruiker kiest eigen bedrag (donaties/fooien)

Configuratie

Vereiste configuratie

Eigenschap	Type	Beschrijving
`merchant.name`	`string`	Bedrijfsnaam getoond tijdens afrekenen
`merchant.wallet`	`string`	Solana wallet-adres om betalingen te ontvangen
`mode`	`'buyNow' \| 'cart' \| 'tip'`	Type betalingsflow

Optionele configuratie

Eigenschap	Type	Beschrijving
`network`	`'mainnet' \| 'devnet'`	Solana-netwerk (standaard: `'mainnet'`)
`rpcUrl`	`string`	Aangepast RPC-endpoint
`allowedMints`	`string[]`	Beperk geaccepteerde tokens op mint-adres
`showQR`	`boolean`	Schakel QR-code betalingsoptie in
`theme`	`ThemeConfig`	Visuele aanpassing (kleuren, border radius, etc.)

Betalingsconfiguratie

Voor buyNow en cart modi, geef producten op 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	Beschrijving
`onPaymentSuccess`	`(signature: string)`	Transactie bevestigd on-chain
`onPaymentError`	`(error: Error)`	Betaling mislukt in elke fase
`onPaymentStart`	`()`	Betalingsproces gestart
`onCancel`	`()`	Gebruiker heeft de betaling geannuleerd

Aangepaste trigger

Vervang de standaardknop door je eigen 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>

Inhoudsopgave