Início rápido: aceitar um pagamento

Você terá um botão de pagamento em um app React que conecta uma carteira, permite que o pagador escolha um token e confirma um pagamento real para o seu endereço. Você precisa do Node.js 20+, um app React ou Next.js (um create-next-app novo está ótimo) e uma carteira para pagar.

1. Instalar o Commerce Kit

pnpm add @solana-commerce/kit

2. Adicionar o botão

Adicione o componente PaymentButton em qualquer lugar do seu app e defina a carteira do comerciante para um endereço que você controla:

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

O componente gerencia internamente a conexão da carteira, seleção de token, processamento de transações e estado da interface. mode: "tip" permite que o pagador escolha o valor; consulte modos de pagamento para checkouts de preço fixo e carrinho.

Experimente no navegador

Configure o botão de pagamento e inicie o fluxo de gorjeta sem sair desta página.

Abrir o Commerce Kit Playground em tela cheia

3. Realizar um pagamento

Execute seu app, clique no botão, conecte uma carteira e pague. O callback onPaymentSuccess recebe a assinatura da transação, que é o seu comprovante: consulte-a com getTransaction ou em qualquer explorador.

Próximos passos

• Como os pagamentos funcionam no Solana - carteiras, stablecoins, token accounts e taxas
• Verificar pagamentos - confirmar um pagamento no servidor antes de concluir um pedido
• Enviar pagamentos - pagamentos e transferências a partir do seu próprio backend
• Prontidão para produção - antes de movimentar dinheiro real