Démarrage rapide : accepter un paiement

Vous obtiendrez un bouton de paiement dans une application React qui connecte un portefeuille, permet au payeur de choisir un token, et confirme un vrai paiement à votre adresse. Vous avez besoin de Node.js 20+, d'une application React ou Next.js (un nouveau create-next-app convient), et d'un portefeuille pour effectuer le paiement.

1. Installer le Commerce Kit

pnpm add @solana-commerce/kit

2. Ajouter le bouton

Insérez le composant PaymentButton n'importe où dans votre application et définissez le portefeuille marchand sur une adresse que vous contrôlez :

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

Le composant gère en interne la connexion au portefeuille, la sélection du token, le traitement des transactions et l'état de l'interface. mode: "tip" permet au payeur de choisir le montant ; consultez les modes de paiement pour les paiements à prix fixe et les paniers d'achat.

Essayer dans le navigateur

Configurez le bouton de paiement et lancez le flux de pourboire sans quitter cette page.

Ouvrir le Commerce Kit Playground en plein écran

3. Effectuer un paiement

Lancez votre application, cliquez sur le bouton, connectez un portefeuille et effectuez le paiement. Le callback onPaymentSuccess reçoit la signature de transaction, qui constitue votre reçu : recherchez-la avec getTransaction ou dans n'importe quel explorateur.

Prochaines étapes

• Comment fonctionnent les paiements sur Solana - portefeuilles, stablecoins, token accounts et frais
• Vérifier les paiements - confirmer un paiement côté serveur avant d'exécuter une commande
• Envoyer des paiements - versements et transferts depuis votre propre backend
• Prêt pour la production - avant que de l'argent réel ne circule