Pulsante di pagamento

Il Commerce Kit è attualmente in beta. Le API potrebbero cambiare prima del rilascio stabile. Per ulteriori dettagli sul Commerce Kit, consulta la documentazione del Commerce Kit.

Il componente PaymentButton del Commerce Kit fornisce un'interfaccia di pagamento completa, gestendo la connessione del wallet, la selezione dei token, l'elaborazione delle transazioni e lo stato dell'interfaccia utente in modo predefinito.

Installazione

pnpm add @solana-commerce/kit

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

Dai un'occhiata al Commerce Kit Playground per configurare e testare il componente.

Pulsante mancia

Modale di pagamento

Modale codice QR Solana Pay

Modalità di pagamento

L'opzione mode determina il comportamento del pulsante:

Modalità	Descrizione
`buyNow`	Acquisto di un singolo prodotto con importo fisso
`cart`	Carrello con più prodotti
`tip`	L'utente sceglie il proprio importo (donazioni/mance)

Configurazione

Configurazione richiesta

Proprietà	Tipo	Descrizione
`merchant.name`	`string`	Nome dell'azienda mostrato durante il checkout
`merchant.wallet`	`string`	Indirizzo del wallet Solana per ricevere i pagamenti
`mode`	`'buyNow' \| 'cart' \| 'tip'`	Tipo di flusso di pagamento

Configurazione opzionale

Proprietà	Tipo	Descrizione
`network`	`'mainnet' \| 'devnet'`	Rete Solana (predefinito: `'mainnet'`)
`rpcUrl`	`string`	Endpoint RPC personalizzato
`allowedMints`	`string[]`	Limita i token accettati per indirizzo mint
`showQR`	`boolean`	Abilita l'opzione di pagamento con codice QR
`theme`	`ThemeConfig`	Personalizzazione visiva (colori, raggio del bordo, ecc.)

Configurazione pagamento

Per le modalità buyNow e cart, fornisci i prodotti tramite paymentConfig:

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

Callback degli eventi

Callback	Parametri	Descrizione
`onPaymentSuccess`	`(signature: string)`	Transazione confermata on-chain
`onPaymentError`	`(error: Error)`	Pagamento fallito in qualsiasi fase
`onPaymentStart`	`()`	Flusso di pagamento avviato
`onCancel`	`()`	L'utente ha annullato il pagamento

Trigger personalizzato

Sostituisci il pulsante predefinito con il tuo elemento:

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

Indice