Botón de pago

Commerce Kit se encuentra actualmente en beta. Las API pueden cambiar antes del lanzamiento estable. Para más detalles sobre Commerce Kit, consulta la documentación de Commerce Kit.

El componente PaymentButton del Commerce Kit proporciona una interfaz de pago completa que gestiona la conexión de billetera, selección de tokens, procesamiento de transacciones y estado de la interfaz de usuario de forma predeterminada.

Instalación

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

Consulta el Commerce Kit Playground para configurar y probar el componente.

Botón de propina

Modal de pago

Modal de código QR de Solana Pay

Modos de pago

La opción mode determina el comportamiento del botón:

Modo	Descripción
`buyNow`	Compra de un solo producto con importe fijo
`cart`	Carrito de compras con múltiples productos
`tip`	El usuario elige su propio importe (donaciones/propinas)

Configuración

Configuración requerida

Propiedad	Tipo	Descripción
`merchant.name`	`string`	Nombre del negocio mostrado durante el pago
`merchant.wallet`	`string`	Dirección de billetera Solana para recibir pagos
`mode`	`'buyNow' \| 'cart' \| 'tip'`	Tipo de flujo de pago

Configuración opcional

Propiedad	Tipo	Descripción
`network`	`'mainnet' \| 'devnet'`	Red de Solana (predeterminado: `'mainnet'`)
`rpcUrl`	`string`	Endpoint RPC personalizado
`allowedMints`	`string[]`	Restringir tokens aceptados por dirección mint
`showQR`	`boolean`	Habilitar opción de pago con código QR
`theme`	`ThemeConfig`	Personalización visual (colores, radio de borde, etc.)

Configuración de pago

Para los modos buyNow y cart, proporciona productos mediante 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	Descripción
`onPaymentSuccess`	`(signature: string)`	Transacción confirmada en cadena
`onPaymentError`	`(error: Error)`	Pago fallido en cualquier etapa
`onPaymentStart`	`()`	Flujo de pago iniciado
`onCancel`	`()`	Usuario canceló el pago

Activador personalizado

Reemplaza el botón predeterminado con tu propio 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>

Tabla de Contenidos