Inicio rápido: aceptar un pago

Terminarás con un botón de pago en una aplicación React que conecta una billetera, permite al pagador elegir un token y confirma un pago real a tu dirección. Necesitas Node.js 20+, una aplicación React o Next.js (un create-next-app nuevo está bien) y una billetera desde la que pagar.

1. Instalar Commerce Kit

pnpm add @solana-commerce/kit

2. Agregar el botón

Coloca el componente PaymentButton en cualquier lugar de tu aplicación y establece la billetera del comerciante en una dirección que controles:

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

El componente gestiona internamente la conexión de la billetera, la selección de tokens, el procesamiento de transacciones y el estado de la interfaz. mode: "tip" permite al pagador elegir el monto; consulta modos de pago para pagos de precio fijo y carritos de compra.

Pruébalo en el navegador

Configura el botón de pago e inicia el flujo de propina sin salir de esta página.

Abrir el Playground de Commerce Kit en pantalla completa

3. Realizar un pago

Ejecuta tu aplicación, haz clic en el botón, conecta una billetera y paga. El callback onPaymentSuccess recibe la firma de la transacción, que es tu recibo: consúltalo con getTransaction o en cualquier explorador.

Próximos pasos

• Cómo funcionan los pagos en Solana - billeteras, stablecoins, token accounts y comisiones
• Verificar pagos - confirma un pago del lado del servidor antes de completar un pedido
• Enviar pagos - pagos y transferencias desde tu propio backend
• Preparación para producción - antes de que se mueva dinero real