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.
Le Commerce Kit est actuellement en version bêta. Les API peuvent changer avant la version stable.
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 (<PaymentButtonconfig={{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 du 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 paiements avec panier.
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éparation à la production - avant que de l'argent réel ne circule
Is this page helpful?