Início rápido

O caminho mais curto entre nada e um pagamento concluído. Pressupõe que tem uma chave pública e pelo menos uma wallet de liquidação configurada.

1. Instalar

npm install stablezact-pay

2. Montar o 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)}
      />
    </>
  );
}

Não usa React? O mesmo fluxo em JavaScript puro:

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 no seu servidor

Não processe a encomenda em onSuccess

onSuccess é disparado quando a wallet do cliente aceita a transação, não quando o dinheiro está confirmado on-chain. Depois desse momento, a transação ainda pode falhar, ser substituída ou ser descartada. Trate-o como “enviado” e processe a encomenda só depois de o seu servidor ter confirmado o pagamento.

Confirme a partir do seu backend, onde a resposta não pode ser falsificada pelo navegador:

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

Leia outcome:

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

paid significa que o dinheiro do cliente entrou e pode processar a encomenda. Os outros dois valores são pending e failed. A regra é só esta, e é a mesma seja qual for a forma como o cliente pagou.

Melhor ainda, deixe que sejamos nós a avisá-lo: consulte Webhooks.

Próximos passos

• Configuração: as opções que vale a pena conhecer
• Ciclo de vida do pagamento: processar a encomenda e acompanhar a transferência para a sua wallet
• Pagamentos em excesso e reembolsos: o que acontece quando o montante está errado