Bouton de paiement

Le Commerce Kit est actuellement en version bêta. Les API peuvent changer avant la version stable. Pour plus de détails sur Commerce Kit, consultez la documentation Commerce Kit.

Le composant PaymentButton du Commerce Kit fournit une interface de paiement complète — gérant la connexion au portefeuille, la sélection de jetons, le traitement des transactions et l'état de l'interface utilisateur prêts à l'emploi.

Installation

pnpm add @solana-commerce/kit

Utilisation de base

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

Consultez le Commerce Kit Playground pour configurer et tester le composant.

Bouton de pourboire

Fenêtre de paiement

Fenêtre QR code Solana Pay

Modes de paiement

L'option mode détermine le comportement du bouton :

Mode	Description
`buyNow`	Achat d'un seul produit avec montant fixe
`cart`	Panier d'achat avec plusieurs produits
`tip`	L'utilisateur choisit son propre montant (dons/pourboires)

Configuration

Configuration requise

Propriété	Type	Description
`merchant.name`	`string`	Nom de l'entreprise affiché lors du paiement
`merchant.wallet`	`string`	Adresse du portefeuille Solana pour recevoir les paiements
`mode`	`'buyNow' \| 'cart' \| 'tip'`	Type de flux de paiement

Configuration optionnelle

Propriété	Type	Description
`network`	`'mainnet' \| 'devnet'`	Réseau Solana (par défaut : `'mainnet'`)
`rpcUrl`	`string`	Point de terminaison RPC personnalisé
`allowedMints`	`string[]`	Restreindre les jetons acceptés par adresse mint
`showQR`	`boolean`	Activer l'option de paiement par QR code
`theme`	`ThemeConfig`	Personnalisation visuelle (couleurs, rayon de bordure, etc.)

Configuration de paiement

Pour les modes buyNow et cart, fournissez les produits via paymentConfig :

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

Callbacks d'événements

Callback	Paramètres	Description
`onPaymentSuccess`	`(signature: string)`	Transaction confirmée on-chain
`onPaymentError`	`(error: Error)`	Échec du paiement à n'importe quelle étape
`onPaymentStart`	`()`	Flux de paiement initié
`onCancel`	`()`	L'utilisateur a annulé le paiement

Déclencheur personnalisé

Remplacez le bouton par défaut par votre propre élément :

<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>

Table des matières