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 tokens, processamento de transações 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: "tip"
      }}
      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
`tip`	O 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`	'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.)

Callbacks de eventos

Callback	Parâmetros	Descrição
`onPaymentSuccess`	`(signature: string)`	Transação confirmada on-chain
`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: "tip"
  }}
>
  <button className="my-custom-button">Pay with Solana</button>
</PaymentButton>

Índice