Skip to main content

Implementar WebSDK

Guia completo de tokenização no frontend com https://js.pagou.ai/payments/v2.js.

Criar transação de cartão

Referência do endpoint POST /v2/transactions com method: "credit_card".

​
Passo 1: tokenizar no frontend

Inclua o WebSDK no checkout: 
<script
  src="https://js.pagou.ai/payments/v2.js"
  data-public-key="pk_live_sua_chave_publica"
  data-test-mode="false"
></script>
Exemplo de formulário HTML com atributos data-pagou: 
<form id="payment-form">
  <input type="text" data-pagou="number" placeholder="Número do cartão" />
  <input type="text" data-pagou="expiration" placeholder="MM/AA" />
  <input type="text" data-pagou="verification_value" placeholder="CVV" />
  <input type="text" data-pagou="full_name" placeholder="Nome do portador" />
  <button type="submit">Pagar</button>
</form>
Consulte a tabela completa de bindings data-pagou em /sdk/websdk-credit-card.
Colete os campos do formulário com data-pagou e gere o token: 
document.getElementById("payment-form").addEventListener("submit", async (event) => {
  event.preventDefault();

  const { token, errors } = await window.Pagou.createPaymentToken();

  if (errors) {
    console.error("Erros de validação", errors);
    return;
  }

  // Envie APENAS o token para seu backend
  await fetch("/checkout/pay", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ token }),
  });
});

​
Passo 2: criar transação no backend

Envie apenas o token gerado no frontend e crie a transação no backend. 
const transaction = await client.transactions.create({
  amount: 1500, // R$15,00 em centavos
  currency: "BRL",
  method: "credit_card",
  token: "pgct_0123456789abcdef",
  installments: 1,
  buyer: {
    name: "Maria Silva",
    email: "maria@empresa.com",
    document: {
      type: "CPF",
      number: "12345678901",
    },
  },
  products: [{ name: "Pedido #1234", price: 1500, quantity: 1 }],
});

console.log(transaction.data.id, transaction.data.status);

​
Passo 3: acompanhar status

  • Webhook como canal principal de atualização (veja Webhooks de pagamentos)
  • GET /v2/transactions/{id} como fallback para reconciliação
const tx = await client.transactions.retrieve("id-da-transacao");
console.log(tx.data.status, tx.data.paid_at);
Não armazene PAN, CVV ou data de expiração no backend. Use apenas o token retornado pelo WebSDK.
Não existe rota pública de tokenização na API. A geração de token deve ser feita no navegador via WebSDK.