Formulário embutido: Teste rápido

Esta página apresenta um exemplo de integração rápida de um formulário de pagamento seguro, em 3 ações simples.

Para consultar um guia de integração completo (ou para uma integração a partir de um site JavaScript), ir aqui: Inciar: Pagamento simples

1. Inicializar o formulário

Quando um comprador válido finaliza sua compra no seu site, você do Estabelecimento Comercial, verificando particularmente o valor, a moeda, o conteúdo do carrinho, etc...

Uma vez que realizou estas verificações, seu servidor Estabelecimento Comercial deve chamar o Web Service Charge/CreatePayment para inicializar a transação.

Como resposta, seu servidor Estabelecimento Comercial recupera um formToken, um objeto criptografado que permite inicializar o formulário embutido com os dados da transação e os dados que correspondem à configuração da sua loja.

{
"amount":   990,
"currency": "BRL",
"orderId":  "myOrderId-999999",
"customer": {
    "email": "sample@example.com"
    }
}
/**
 * I initialize the PHP SDK
 */
require_once __DIR__ . '/vendor/autoload.php';
require_once __DIR__ . '/keys.php';
require_once __DIR__ . '/helpers.php';

/** 
 * Initialize the SDK 
 * see keys.php
 */
$client = new Lyra\Client();

/**
 * I create a formToken
 */
$store = array("amount" => 250, 
"currency" => "EUR", 
"orderId" => uniqid("MyOrderId"),
"customer" => array(
  "email" => "sample@example.com"
));
$response = $client->post("V4/Charge/CreatePayment", $store);

/* I check if there are some errors */
if ($response['status'] != 'SUCCESS') {
    /* an error occurs, I throw an exception */
    display_error($response);
    $error = $response['answer'];
    throw new Exception("error " . $error['errorCode'] . ": " . $error['errorMessage'] );
}

/* everything is fine, I extract the formToken */
$formToken = $response["answer"]["formToken"];

?>

Para maiores detalhes sobre a autenticação das chamada ao web service REST, consultar: Fase de autenticação.

A resposta será:

{
    "status": "SUCCESS",
    "_type": "V4/WebService/Response",
    "webService": "Charge/CreatePayment",
    "applicationProvider": "PAYZEN",
    "version": "V4",
    "applicationVersion": "4.1.0",
    "answer": {
        "formToken": "DEMO-TOKEN-TO-BE-REPLACED",
        "_type": "V4/Charge/PaymentForm"
    }
}

2. Exibir o formulário

Uma vez que você tiver o formToken, você poderá exibir o formulário de pagamento.

Para isso, você deve:

  • incluir na sua página de pagamento a biblioteca JavaScript do formulário de pagamento (kr-payment-form.min.js), colocando como argumento sua chave de acesso (ver aqui para saber como recuperá-la), bem como as folhas de estilos associadas,
  • incluir um elemento de tipo DIV tendo como argumento a classe kr-embedded e o atributo kr-form-token no qual você já terá incluído o formToken recuperado na etapa anterior. O formulário de pagamento será exibido nesta DIV.
<!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" />  

  <!-- Javascript library. Should be loaded in head section -->
  <script 
   src="https://static.payzen.lat/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" 
   kr-public-key="28478261:testpublickey_LHvSiWObWJnSBv6lnBMmS0tlDPLslOFYXvmKguoWiBIWj" 
   kr-post-url-success="paid.html">
  </script>

  <!-- theme and plugins. should be loaded after the javascript library -->
  <!-- not mandatory but helps to have a nice payment form out of the box -->
  <link rel="stylesheet" 
  href="https://static.payzen.lat/static/js/krypton-client/V4.0/ext/classic-reset.css">
 <script 
  src="https://static.payzen.lat/static/js/krypton-client/V4.0/ext/classic.js">
 </script> 
</head>
<body>
  <!-- payment form -->
  <div class="kr-embedded" 
   kr-form-token="DEMO-TOKEN-TO-BE-REPLACED">

    <!-- payment form fields -->
    <div class="kr-pan"></div>
    <div class="kr-expiry"></div>
    <div class="kr-security-code"></div>

    <!-- payment form submit button -->
    <button class="kr-payment-button"></button>

    <!-- error zone -->
    <div class="kr-form-error"></div>
  </div>
</body>
</html>
<!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" /> 

  <!-- Javascript library. Should be loaded in head section -->
  <script 
   src="<?php echo $client->getClientEndpoint();?>/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
   kr-public-key="<?php echo $client->getPublicKey();?>"
   kr-post-url-success="paid.php">
  </script>

  <!-- theme and plugins. should be loaded after the javascript library -->
  <!-- not mandatory but helps to have a nice payment form out of the box -->
  <link rel="stylesheet" 
   href="<?php echo $client->getClientEndpoint();?>/static/js/krypton-client/V4.0/ext/classic-reset.css">
  <script 
   src="<?php echo $client->getClientEndpoint();?>/static/js/krypton-client/V4.0/ext/classic.js">
  </script>
</head>
<body style="padding-top:20px">
  <!-- payment form -->
  <div class="kr-embedded"
   kr-form-token="<?php echo $formToken;?>">

    <!-- payment form fields -->
    <div class="kr-pan"></div>
    <div class="kr-expiry"></div>
    <div class="kr-security-code"></div>  

    <!-- payment form submit button -->
    <button class="kr-payment-button"></button>

    <!-- error zone -->
    <div class="kr-form-error"></div>
  </div>  
</body>
</html>

O cliente JavaScript usa elementos DIV especiais para inserir os campos do formulário. Estes conteiners são identificados a partir das classes seguintes:

Class Descrição
kr-pan Número do cartão
kr-expiry Data de vencimento
kr-security-code Código de segurança (CVV)
kr-form-error Área de exibição de erros

Exemplo de formulário de pagamento:

Quando o comprador validar o formulário, a transação será apresentado diretamente pelo formulário para nossa plataforma de pagamento, para validação.

  • Se a transação for aprovada, o comprador será redirecionado para a página que consta no atributokr-post-url-successdo tag
  • Se a transação for recusada, um erro será exibido, o comprador ficará na página de pagamento.

3. Verificar o status da transação

Durante o pagamento, as 2 ações ocorrem seqüencialmente:

  • Uma notificação instantânea (Instant Payment Notification, ou IPN) será enviada com todos os dados da transação, ela sendo aceita ou recusada. A URL de notificação do seu servidor deve ser configurada na loja do seu Back-Office.
  • O navegador também receberá os mesmos dados de transação no final do pagamento.

Você deve tratar apenas 1 destas 2 mensagens (são idênticas). Permitem validar seu carrinho e iniciar a continuação da sua compra.

Exemplo de informações enviadas:

kr-hash=c3c0323c748fdb7c2d24bd39ada99663526236828efa795193bebfdea022fe58
kr-hash-algorithm=sha256_hmac
kr-hash-key=sha256_hmac
kr-answer={"orderStatus":"PAID", (...)

A primeira etapa consiste em validar a integridade da mensagem, verificando que a assinatura (kr-hash) corresponde à totalidade da mensagem.

Uma vez que a integridade da mensagem foi aprovada, você pode tratar a transação (cujo status foi armazenado na propriedade kr-answer).