Inicio rápido

El camino más corto desde cero hasta un pago completado. Se asume que ya tiene una clave pública y al menos una wallet de liquidación configurada.

1. Instalar

npm install stablezact-pay

2. Montar el checkout

import { useState } from 'react';
import { StablezactPayment } from 'stablezact-pay';
import 'stablezact-pay/dist/style.css';

export default function Checkout() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Pay with crypto</button>

      <StablezactPayment
        isOpen={open}
        onClose={() => setOpen(false)}
        publicKey="pk_your_public_key"
        apiUrl="https://hub.stablezact.com"
        config={{
          amount: 49.99,
          currency: 'USDC',
          customerEmail: 'customer@example.com',
        }}
        onSuccess={(paymentId, txHash) => {
          // The customer has submitted. Do not fulfil here. See step 3.
          console.log('submitted', paymentId, txHash);
        }}
        onError={(error) => console.error(error)}
      />
    </>
  );
}

¿No usa React? El mismo flujo en JavaScript simple:

const stablezact = new StablezactVanilla({
  publicKey: 'pk_your_public_key',
  apiUrl: 'https://hub.stablezact.com',
  theme: 'light',
});

document.getElementById('payButton').addEventListener('click', () => {
  stablezact.open(
    { amount: 49.99, customerEmail: 'customer@example.com', merchantName: 'Your Store' },
    {
      onSuccess: (paymentId, txHash) => console.log('submitted', paymentId, txHash),
      onError: (error) => console.error(error),
    }
  );
});

3. Confirmar en su servidor

No complete el pedido en onSuccess

onSuccess se dispara cuando la wallet del cliente acepta la transacción, no cuando el dinero está confirmado on-chain. Después de ese momento, la transacción todavía puede fallar, ser reemplazada o descartarse. Trátelo como «enviado» y complete el pedido solo cuando su servidor haya confirmado el pago.

Confirme desde su backend, donde el navegador no puede falsificar la respuesta:

curl https://hub.stablezact.com/api/v1/payments/PAYMENT_UUID/status \
  -H "X-Public-Key: pk_your_public_key"

Lea outcome:

{ "payment": { "outcome": "paid", "isFinal": true } }

paid significa que el dinero del cliente ha llegado y puede completar el pedido. Los otros dos valores son pending y failed. Esa es toda la regla, y es la misma sin importar cómo haya pagado el cliente.

Mejor aún, deje que se lo avisemos nosotros: consulte Webhooks.

Próximos pasos

• Configuración: las opciones que conviene conocer
• Ciclo de vida del pago: completar el pedido y seguir su liquidación
• Sobrepagos y reembolsos: qué ocurre cuando el importe no es el correcto