Botão de pagamento

O Commerce Kit está atualmente em beta. As APIs podem mudar antes do lançamento estável. Para detalhes adicionais sobre o Commerce Kit, consulte a documentação do Commerce Kit .

O componente PaymentButton do Commerce Kit fornece uma interface de pagamento completa—gerenciando conexão de carteira, seleção de token, processamento de transação e estado da UI prontos para uso.

Instalação

pnpm add @solana-commerce/kit

Uso básico

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

Confira o Commerce Kit Playground para configurar e testar o componente.

Botão de gorjeta

Modal de pagamento

Modal de código QR Solana Pay

Modos de pagamento

A opção mode determina o comportamento do botão:

Modo	Descrição
`buyNow`	Compra de produto único com valor fixo
`cart`	Carrinho de compras com múltiplos produtos
`tip`	Usuário escolhe o próprio valor (doações/gorjetas)

Configuração

Configuração obrigatória

Propriedade	Tipo	Descrição
`merchant.name`	`string`	Nome da empresa exibido durante o checkout
`merchant.wallet`	`string`	Endereço da carteira Solana para receber pagamentos
`mode`	`'buyNow' \| 'cart' \| 'tip'`	Tipo de fluxo de pagamento

Configuração opcional

Propriedade	Tipo	Descrição
`network`	`'mainnet' \| 'devnet'`	Rede Solana (padrão: `'mainnet'`)
`rpcUrl`	`string`	Endpoint RPC personalizado
`allowedMints`	`string[]`	Restringir tokens aceitos por endereço mint
`showQR`	`boolean`	Ativar opção de pagamento por código QR
`theme`	`ThemeConfig`	Personalização visual (cores, raio da borda, etc.)

Configuração de pagamento

Para os modos buyNow e cart, forneça produtos através de paymentConfig:

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

Callbacks de eventos

Callback	Parâmetros	Descrição
`onPaymentSuccess`	`(signature: string)`	Transação confirmada na blockchain
`onPaymentError`	`(error: Error)`	Pagamento falhou em qualquer etapa
`onPaymentStart`	`()`	Fluxo de pagamento iniciado
`onCancel`	`()`	Utilizador cancelou o pagamento

Acionador personalizado

Substitua o botão padrão pelo seu próprio 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>

Índice