Betaalknop

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

Het PaymentButton-component van 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: "tip"
      }}
      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-codemodal

Betaalmodi

De mode-optie bepaalt het gedrag van de knop:

Modus	Beschrijving
`tip`	Gebruiker kiest eigen bedrag (donaties/fooi)

Configuratie

Vereiste configuratie

Eigenschap	Type	Beschrijving
`merchant.name`	`string`	Bedrijfsnaam getoond tijdens afrekenen
`merchant.wallet`	`string`	Solana wallet-adres om betalingen te ontvangen
`mode`	'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-codebetalingsoptie in
`theme`	`ThemeConfig`	Visuele aanpassing (kleuren, border radius, etc.)

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: "tip"
  }}
>
  <button className="my-custom-button">Pay with Solana</button>
</PaymentButton>

Inhoudsopgave