Probar rápidamente

Esta página ofrece una visión general rápida de cómo introducir un formulario de pago seguro, en 3 simples pasos.

Para obtener una guía de integración más completa, consulte: Inicio: Pago simple

1. Crear un formToken

Cuando un comprador finaliza su compra en su sitio web, usted debe validar la transacción en el servidor comerciante, verificando en particular el monto, la moneda (divisa), el contenido de la cesta, etc.

Una vez realizados los controles, su servidor comerciante debe llamar el Servicio Web Charge/CreatePayment con la finalidad de iniciar la transacción.

En respuesta, su servidor comerciante recupera un formToken, un objeto cifrado que permite inicializar el formulario incrustado con la información de la transacción y los correspondientes a la configuración de la tienda.

{
"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"];

?>

Plus de détails sur l’authentification des appels au web-service REST sont disponibles ici: API REST: phase d’authentification.

La respuesta será:

{
    "status": "SUCCESS",
    "_type": "V4/WebService/Response",
    "webService": "Charge/CreatePayment",
    "applicationProvider": "PAYZEN",
    "version": "V4",
    "applicationVersion": "4.1.0",
    "answer": {
        "formToken": "ff:d433b3eee93b40cbac0a20efd13bfccc:161018165424:000003de45555201:9e:01",
        "_type": "V4/Charge/PaymentForm"
    }
}

2. Mostrar el formulario

Para mostrar un formulario a partir de un formToken, basta con copiar y pegar el siguiente código:

<!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://api.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://api.payzen.lat/static/js/krypton-client/V4.0/ext/classic-reset.css">
 <script 
  src="https://api.payzen.lat/static/js/krypton-client/V4.0/ext/classic.js">
 </script> 
</head>
<body>
  <!-- payment form -->
  <div class="kr-embedded" 
   kr-form-token="ff:d433b3eee93b40cbac0a20efd13bfccc:161018165424:000003de45555201:9e:01">

    <!-- 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>

El formToken antes generado se define en la propiedad kr-form-token del elemento DIV kr-embedded.

El cliente JavaScript utilizará elementos DIV especiales para introducir los campos del formulario. Estos contenedores se identifican a partir de las siguientes clases:

Class Descripción
kr-pan Número de la tarjeta
kr-expiry Fecha de expiración
kr-security-code Código de seguridad (CVV)
kr-form-error Zona de visualización de errores

Ejemplo de formulario de pago:

Cuando el comprador valida el formulario, la transacción se somete a validación.

Si la transacción se ha pagado El formulario se envía (sin los datos sensibles de la tarjeta).
Si la transacción se ha rechazado Se muestra un mensaje de error; no se redirige al comprador.

3. Verificar el estado de la transacción

Una vez que se realiza el pago, las 2 acciones siguientes ocurrirán en forma secuencial:

  • Se enviará una IPN (notificación de servidor a servidor) con toda la información de la transacción a la URL de notificación de la tienda.
  • El cliente JavaScript enviará los resultados de la transacción como su hubiese utilizado un formulario clásico.

Ejemplo de la información enviada:

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

Una vez que se verifica la firma (kr-hash), usted puede verificar el estado de la transacción.

Para probar esta tercera etapa, basta con realizar un pago con el formulario inferior, o ir a: Retorno al navegador.