Recorrências
Referência da API
Acesso ao Backoffice
  1. FORMULÁRIO INTELIGENTE (SmartForm)

Exibir o Formulário (SmartForm)

Como exibir o formulário (SmartForm)

Requisitos Iniciais

📘

Configurar Webhooks

Será obrigatório configurar um webhook para receber o resultado do pagamento. Verifique nessa documentação a seção WEBHOOKS.

📘

Configurar um servidor

Por normas de segurança, a chamada para criação do smartform deve ser feita a partir do seu servidor, e não de uma maquina local ou frontend, pois exige a chave de API secreta (public_key).

👍

Agora basta seguir o passo a passo!

Passo a Passo

Abaixo um resumo do fluxo para exibição do SmartForm.

  1. Iniciar uma venda do tipo (type) PAYMENT, e o meio de pagamento (payments.payment_method) como smartform.
    Caso tenha dúvidas sobre os tipos de vendas, verifique a seção na documentação MODELOS DE COBRANÇA.
  2. Armazenar os campos retornados no objeto smart_form, pois serão obrigatórios para exibir o formulário: public_key e token.
  3. Exibir o formulário conforme exemplo nessa documentação, preenchendo os campos kr-public-key e kr-form-token com os valores dos campos retornados anteriormente no objeto smart_form.
    1. Ao renderizar o formulário, será criada uma venda com status DUE (pendente).
    2. Enviamos o primeiro webhook sinalizando a criação da venda.
  4. Após realizada a tentativa de pagamento, iremos enviar o resultado da tentativa através dos webhooks configurados.
🚧

Validade do Token

O token retornado em smart_form.token possui a validade máxima de 15 minutos.

📘

Envio de Webhooks

Ao renderizar o formulário, enviamos o primeiro webhook de venda com status pendente.

Após a tentativa de pagamento, retornamos um segundo webhookcom as informações da tentativa, seja de uma transação recusada ou autorizada.

1. Criar Venda

Para iniciar uma venda será necessário realiza realizar a chamada na rota /v1/charges.

Para mais detalhes verifique na seção FORMULÁRIO INTELIGENTE > Iniciar venda.

Exemplo de requisição - Venda Avulsa

{
    "amount": 100,
    "order_id": "BR0000-63062677",
    "order_info": "charge description",
    "currency": "BRL",
    "type": "PAYMENT",
    "payments": [
        {
            "payment_method": "smartform",
            "enable_3ds": false,
            "amount": 100
        }
    ],
    "customer": {
        "name": "Scott Veum",
        "email": "[email protected]",
        "phone": "551198570711",
        "mobile_phone": "5511985270748",
        "birth_date": "2000-01-01",
        "document_type": "CPF",
        "document_number": "62286843023"
    }
}

Exemplo de requisição - Tokenização de Cartão Avulsa

{
    "amount": 0,
    "order_id": "BR0000-{{$randomBankAccount}}",
    "order_info": "charge description",
    "currency": "BRL",
    "type": "TOKENIZATION",
    "payments": [
        {
            "payment_method": "smartform",
            "create_token": true,
            "amount": 0,
            "installments": 1
        }
    ],
    "customer": {
        "name": "David Champlin",
        "email": "[email protected]",
        "phone": "551198570711",
        "mobile_phone": "5511985270748",
        "birth_date": "2000-01-01",
        "document_type": "CPF",
        "document_number": "62286843023"
    }
}

Exemplo de resposta

{
    "uuid": "a49bf43e-d937-4dcd-b569-f46d2e635c84",
    "type": "PAYMENT",
    "due_date": "2024-10-28T14:39:33",
    "expiry_date": "2024-10-30T14:39:33",
    "status": "DUE",
    "order_id": "BR0000-63062677",
    "order_info": "charge description",
    "currency": "BRL",
    "original_amount": 100,
    "amount": 100,
    "paid": 0,
    "due": 100,
    "refunded": 0,
    "attempts": 1,
    "max_attempts": 5,
    "drop_reason": "",
    "surcharge": false,
    "client_ip": null,
    "soft_descriptor": null,
    "smart_form": {
        "public_key": "62XXXX:publickey_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXrSK7kHJ",
        "token": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
    },
    "customer": {
        "uuid": "71b73bc2-eee1-4c88-9035-fe94aea3fc17",
        "name": "Scott Veum",
        "email": "[email protected]",
        "birth_date": "2000-01-01",
        "phone": "551198570711",
        "mobile_phone": "5511985270748",
        "document_type": "CPF",
        "document_number": "62286843023",
        "created_at": "2024-10-28T14:39:33.479Z",
        "updated_at": "2024-10-28T14:39:33.479Z"
    },
    "transactions": [],
    "created_at": "2024-10-28T14:39:33.471Z",
    "updated_at": "2024-10-28T14:39:33.471Z"
}

2. Exibir o formulário

Criar o formulário em html, carregando os scripts necessários e inserir a public_key e token retornados no objeto smart_form da requisição feita em /v1/charges

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" 
   content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />  

  <!-- Biblioteca javascript. Deve ser inserida no header -->
  <script 
   src="https://static.payzen.eu/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" 
   kr-public-key="------------------INSIRA A PUBLIC_KEY AQUI------------------" 
   kr-post-url-success="paid.html">
  </script>

  <!-- Temas e plugins. Devem ser carregados após o script. -->
  <!-- Não é obrigatório mas ajuda na carregamento do formulário -->
  <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.min.js">
 </script> 
</head>
  
<body>
  
  <!-- SMARTFORM -->
  <div class="kr-smart-form" 
   kr-form-token="---------------INSIRA O TOKEN AQUI ---------------------------">

    <!-- campos para inserir o cartão -->
    <div class="kr-pan"></div>
    <div class="kr-expiry"></div>
    <div class="kr-security-code"></div>

    <!-- botão para finalizar -->
    <button class="kr-payment-button"></button>

    <!-- seção de erro -->
    <div class="kr-form-error"></div>
  </div>
</body>
</html>

Exemplo JSFiddle

Webhook da venda

Após realizada a tentativa de pagamento, será retornado o webhook com a situação do pagamento.

{
    "uuid": "8aef5c56-a168-48ed-8634-1cb8172e2ebd",
    "type": "PAYMENT",
    "due_date": "2024-10-24T20:02:55Z",
    "expiry_date": "2024-10-26T20:02:55Z",
    "status": "PAID",
    "order_id": "BR0000-68563008",
    "order_info": "charge description",
    "currency": "BRL",
    "original_amount": 100,
    "amount": 100,
    "paid": 100,
    "due": 0,
    "refunded": 0,
    "attempts": 2,
    "max_attempts": 5,
    "drop_reason": "",
    "surcharge": false,
    "client_ip": null,
    "soft_descriptor": null,
    "customer": {
        "uuid": "4222e88b-fd4d-4a6b-8a68-7af08bfbc08e",
        "name": "Sara Gibson III",
        "email": "[email protected]",
        "birth_date": "2000-01-01",
        "phone": "551198570711",
        "mobile_phone": "5511985270748",
        "document_type": "CPF",
        "document_number": "62286843023",
        "created_at": "2024-10-24T20:02:55Z",
        "updated_at": "2024-10-24T20:02:55Z"
    },
    "transactions": [
        {
            "uuid": "333f52c0-8953-4b99-9ae6-87d827bedc82",
            "charge_uuid": "8aef5c56-a168-48ed-8634-1cb8172e2ebd",
            "gateway_id": "50606df221754430a49fe42b33122cbf",
            "amount": 100,
            "paid_amount": 100,
            "status": "PAID",
            "payment_option": "CARD",
            "scheme": "MAESTRO",
            "external_id": "10492410241702572412",
            "transaction_id_reference": null,
            "expected_capture_date": "2024-10-24T20:04:53Z",
            "payment_at": "2024-10-24T20:04:53Z",
            "captured_at": null,
            "auth_num": "892881",
            "auth_response_code": "0",
            "operation_type": "DEBIT",
            "extra": null,
            "payment_number": "550209XXXXXX3646",
            "payer_info": "",
            "expiry_month": 8,
            "expiry_year": 2028,
            "acquirer_network": "REDE",
            "nsu": "254956625",
            "tid": "",
            "token": null,
            "create_token": false,
            "detailed_status": "CAPTURED",
            "currency": "BRL",
            "document_type": null,
            "document_number": null,
            "installments": 1,
            "auth_3ds": null,
            "created_at": "2024-10-24T20:05:50.763Z",
            "updated_at": "2024-10-24T20:05:50.763Z"
        }
    ],
    "created_at": "2024-10-24T20:02:55Z",
    "updated_at": "2024-10-24T20:02:55Z"
}

Updated 4 months ago

Did this page help you?

Updated 4 months ago

Did this page help you?