Pop-in: Probar rápidamente

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

Para 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

Una vez que el formToken esté en su poder, puede visualizar el formulario de pago.

Para esto usted debe:

  • Incluya en su página de pago la biblioteca de JavaScript del formulario de pago (kr-payment-form.min.js), pasando en argumento su clave de acceso (consulte aquí para saber cómo recuperarla), así como las hojas de estilo asociadas.
  • Incluir un elemento de tipo DIV con argumento de clase kr-embedded y el atributo kr-form-tokenen el que habrá enviado el formToken recuperado en la etapa anterior. Es en este DIV que se mostrará el formulario de pago.
  <!-- payment form -->
  <div class="kr-embedded"
   kr-popin
   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>
<!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-popin
       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>

El cliente JavaScript utiliza los elementos DIV especiales para insertar 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 es enviada mediante el formulario directamente a nuestra plataforma de pago para su validación.

  • Si la transacción es validada, el comprador es redirigido hacia a la página mencionada en el atributo.kr-post-url-successde la etiqueta
  • Si la transacción es rechazada, une error aparece, el comprador se queda en la página de pago.

3. Verificar el estado de la transacción

Durante el proceso de pago, las 2 siguientes acciones tienen lugar de forma secuencial:

  • La Notificación de pago instantánea (Instant Payment Notification o IPN) se envía con toda la información de la transacción, independientemente si la transacción ha sido aceptada o se rechazada La URL de notificación de su servidor debe ser configurada en el Back-Office de su tienda
  • El navegador también recibe la misma información de transacción al final del proceso de pago.

Solo necesita procesar uno de estos 2 mensajes (son idénticos). Le sirven para validar su carrito de compra e iniciar su proceso de compra.

Ejemplo de la información enviada:

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

La primera etapa consiste en validar la integridad del mensaje, verificando que la firma (kr-hash) coincida con el conjunto del mensaje.

Una vez validada la integridad del mensaje, puede procesar la transacción (cuyo estado se almacena en la propiedad kr-answer).