Exibir o Formulário (SmartForm)

Depois de iniciar a Venda no Gateway, use os dados recebidos em smart_form para exibir o formulário com o SDK original da PayZen.

Requisitos

Crie a Venda no servidor por POST /v1/charges, utilizando a chave secreta api_key apenas nessa chamada. A API cria a Venda antes da renderização, com estado inicial normalmente DUE.

1. Criar a Venda

Exemplo de corpo para POST /v1/charges:

{
  "type": "PAYMENT",
  "order_id": "PEDIDO-SF-0001",
  "amount": 1000,
  "currency": "BRL",
  "payments": [
    { "payment_method": "smartform", "amount": 1000 }
  ],
  "customer": {
    "name": "Cliente Exemplo",
    "email": "[email protected]"
  }
}

O retorno contém, entre outros campos, estes valores:

{
  "status": "DUE",
  "smart_form": {
    "public_key": "<CHAVE_PUBLICA_PAYZEN>",
    "token": "<FORM_TOKEN_PAYZEN>"
  }
}

O JSON acima mostra apenas um fragmento ilustrativo da resposta. Confira a presença de ambos os campos antes de renderizar o HTML. Se o token não for retornado, trate a falha em seu servidor; não tente gerar tokens no navegador.

2. Renderizar o formulário

No HTML gerado pelo seu servidor, substitua CHAVE_PUBLICA_RECEBIDA e FORM_TOKEN_RECEBIDO pelos valores da resposta:

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pagamento</title>
  <script
    src="https://static.payzen.eu/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
    kr-public-key="CHAVE_PUBLICA_RECEBIDA"
    kr-post-url-success="/pagamento/resultado"></script>
  <link rel="stylesheet"
    href="https://static.payzen.eu/static/js/krypton-client/V4.0/ext/neon-reset.css">
  <script src="https://static.payzen.eu/static/js/krypton-client/V4.0/ext/neon.js"></script>
</head>
<body>
  <main>
    <h1>Finalize seu pagamento</h1>
    <div class="kr-smart-form" kr-form-token="FORM_TOKEN_RECEBIDO">
      <div class="kr-pan"></div>
      <div class="kr-expiry"></div>
      <div class="kr-security-code"></div>
      <button class="kr-payment-button"></button>
      <div class="kr-form-error" role="alert" aria-live="polite"></div>
    </div>
  </main>
</body>
</html>

🚧
Tema Neon
Carregue o arquivo neon.js da origem oficial PayZen.

O HTML acima utiliza o modo incorporado. Conheça outros formatos em Modos de Exibição.

3. Confirmar o pagamento

O atributo kr-post-url-success serve à navegação do comprador. Nunca altere a Venda para paga apenas porque o navegador acessou a URL de sucesso. Confirme os estados por consulta à API ou webhook.

Erros visuais podem aparecer no elemento kr-form-error. Consulte Tratamento de Erros.

📘
Token temporário
A duração exata do form token é A confirmar. Se o token não for aceito, confira o estado da Venda antes de iniciar outro fluxo.

Próximas leituras

Personalização Visual · Resultado e Comprovante · Segurança e Webhooks