Quickstart: accetta un pagamento

Otterrai un pulsante di pagamento in un'app React che connette un wallet, consente al pagante di scegliere un token e conferma un pagamento reale al tuo indirizzo. Hai bisogno di Node.js 20+, un'app React o Next.js (un nuovo create-next-app va benissimo) e un wallet da cui effettuare il pagamento.

1. Installa il Commerce Kit

pnpm add @solana-commerce/kit

2. Aggiungi il pulsante

Inserisci il componente PaymentButton ovunque nella tua app e imposta il wallet del commerciante su un indirizzo che controlli:

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

Il componente gestisce internamente la connessione al wallet, la selezione del token, l'elaborazione delle transazioni e lo stato dell'interfaccia. mode: "tip" consente al pagante di scegliere l'importo; vedi modalità di pagamento per i checkout a prezzo fisso e con carrello.

Provalo nel browser

Configura il pulsante di pagamento e avvia il flusso di mancia senza lasciare questa pagina.

Apri il Commerce Kit Playground a schermo intero

3. Ricevi un pagamento

Avvia la tua app, clicca sul pulsante, connetti un wallet ed effettua il pagamento. Il callback onPaymentSuccess riceve la firma della transazione, che costituisce la tua ricevuta: consultala con getTransaction o su qualsiasi explorer.

Dove andare dopo

• Come funzionano i pagamenti su Solana - wallet, stablecoin, token account e commissioni
• Verifica i pagamenti - conferma un pagamento lato server prima di evadere un ordine
• Invia pagamenti - pagamenti e trasferimenti dal tuo backend
• Prontezza per la produzione - prima che vengano movimentati fondi reali