Schnellstart: eine Zahlung akzeptieren

Am Ende haben Sie einen Zahlungsbutton in einer React-App, der ein Wallet verbindet, dem Zahler die Auswahl eines Tokens ermöglicht und eine echte Zahlung an Ihre Adresse bestätigt. Sie benötigen Node.js 20+, eine React- oder Next.js-App (ein frisches create-next-app ist in Ordnung) und ein Wallet zum Bezahlen.

1. Das Commerce Kit installieren

pnpm add @solana-commerce/kit

2. Den Button hinzufügen

Fügen Sie die PaymentButton-Komponente an beliebiger Stelle in Ihrer App ein und setzen Sie das Händler-Wallet auf eine Adresse, die Sie kontrollieren:

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

Die Komponente verwaltet intern die Wallet-Verbindung, Token-Auswahl, Transaktionsverarbeitung und den UI-Zustand. mode: "tip" ermöglicht es dem Zahler, den Betrag selbst zu wählen; siehe Zahlungsmodi für Festpreiszahlungen und Warenkorb-Checkouts.

Im Browser ausprobieren

Konfigurieren Sie den Zahlungsbutton und starten Sie den Trinkgeld-Flow, ohne diese Seite zu verlassen.

Den Commerce Kit Playground im Vollbildmodus öffnen

3. Eine Zahlung entgegennehmen

Starten Sie Ihre App, klicken Sie auf den Button, verbinden Sie ein Wallet und bezahlen Sie. Der onPaymentSuccess-Callback erhält die Transaktionssignatur, die Ihre Quittung darstellt: Suchen Sie sie mit getTransaction oder in einem beliebigen Explorer nach.

Wie geht es weiter

• Wie Zahlungen auf Solana funktionieren – Wallets, Stablecoins, token account und Fee
• Zahlungen verifizieren – eine Zahlung serverseitig bestätigen, bevor eine Bestellung ausgeführt wird
• Zahlungen senden – Auszahlungen und Überweisungen von Ihrem eigenen Backend
• Produktionsreife – bevor echtes Geld bewegt wird