Payment Button

Das Commerce Kit befindet sich derzeit in der Beta-Phase. APIs können sich vor der stabilen Veröffentlichung ändern. Weitere Details zum Commerce Kit finden Sie in der Commerce Kit Dokumentation.

Die PaymentButton-Komponente aus dem Commerce Kit bietet eine vollständige Zahlungsschnittstelle – sie verwaltet Wallet-Verbindung, Token-Auswahl, Transaktionsverarbeitung und UI-Status direkt nach der Installation.

Installation

pnpm add @solana-commerce/kit

Grundlegende Verwendung

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

Schauen Sie sich den Commerce Kit Playground an, um die Komponente zu konfigurieren und zu testen.

Tip Button

Pay Modal

Solana Pay QR-Code-Modal

Zahlungsmodi

Die mode-Option bestimmt das Button-Verhalten:

Modus	Beschreibung
`buyNow`	Einzelproduktkauf mit festem Betrag
`cart`	Warenkorb mit mehreren Produkten
`tip`	Benutzer wählt eigenen Betrag (Spenden/Trinkgeld)

Konfiguration

Erforderliche Konfiguration

Eigenschaft	Typ	Beschreibung
`merchant.name`	`string`	Unternehmensname, der beim Checkout angezeigt wird
`merchant.wallet`	`string`	Solana-Wallet-Adresse für den Zahlungsempfang
`mode`	`'buyNow' \| 'cart' \| 'tip'`	Zahlungsablauf-Typ

Optionale Konfiguration

Eigenschaft	Typ	Beschreibung
`network`	`'mainnet' \| 'devnet'`	Solana-Netzwerk (Standard: `'mainnet'`)
`rpcUrl`	`string`	Benutzerdefinierter RPC-Endpunkt
`allowedMints`	`string[]`	Akzeptierte Token nach Mint-Adresse einschränken
`showQR`	`boolean`	QR-Code-Zahlungsoption aktivieren
`theme`	`ThemeConfig`	Visuelle Anpassung (Farben, Rahmenradius usw.)

Zahlungskonfiguration

Für die Modi buyNow und cart stellen Sie Produkte über paymentConfig bereit:

paymentConfig={{
  products: [
    { id: '1', name: 'T-Shirt', price: 25, quantity: 2 },
    { id: '2', name: 'Hoodie', price: 45, quantity: 1 }
  ]
}}

Event-Callbacks

Callback	Parameter	Beschreibung
`onPaymentSuccess`	`(signature: string)`	Transaktion on-chain bestätigt
`onPaymentError`	`(error: Error)`	Zahlung in beliebiger Phase fehlgeschlagen
`onPaymentStart`	`()`	Zahlungsablauf initiiert
`onCancel`	`()`	Benutzer hat die Zahlung abgebrochen

Benutzerdefinierter Trigger

Ersetzen Sie die Standard-Schaltfläche durch Ihr eigenes 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>

Inhaltsverzeichnis