Referencia del cliente JavaScript

El cliente JavaScript permite crear un formulario de pago en su sitio comercial, con 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://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>

Vaya aquí para revisar la documentación completa: Inicio: Pago simple

Parámetros de inicialización

Se pueden definir diferentes parámetros al cargar el cliente JavaScript. Por ejemplo, para definir kr-public-key y kr-post-url-success:

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

Los parámetros disponibles son los siguientes:

Parámetro Obligatorio Descripción
kr-public-key Clave pública que se utilizará para realizar el pago.
kr-language   Idioma de visualización del formulario en formato de Cultura (fr-FR).
kr-post-url-refused   URL llamada en caso de fallar todos los intentos.
kr-post-url-success   URL en la que se realizará el POST del formulario, si es exitoso.
kr-clear-on-error   Desactive el borrado de la CVV si se rechaza una transacción (verdadero o falso).
kr-hide-debug-toolbar   Oculta la barra de depuración en modo de prueba (verdadero o falso).
kr-placeholder-expiry   Marcador de posición del campo kr-expiry (fecha de caducidad).
kr-placeholder-pan   Marcador de posición del campo kr-pan (número de tarjeta).
kr-placeholder-security-code   Marcador de posición del campo kr-security-code (CVV).

Eventos

Es posible adjuntar devoluciones de llamada de JavaScript personalizadas a varios eventos. El cliente JavaScript es compatible con los siguientes eventos:

Parámetro Descripción
KR.onError() Permite enviar una notificación cuando se produce un error.
KR.onFocus() Uno de los campos del formulario está enfocado.
KR.onFormCreated() El formulario de pago está listo pero todavía no se carga el contenido de iframes.
KR.onFormReady() El formulario está listo para usarse.
KR.onLoaded() Primer evento llamado antes de crear el formulario.
KR.onSubmit() Llamado justo antes de que el formulario se publique (con POST).

KR.onError()

KR.onError() permite interceptar los errores antes de que se muestren.

  <script type="text/javascript">
    $(document).ready(function() {
          KR.onError( function(event) {
            var code = event.errorCode;
            var message = event.errorMessage;
            var myMessage = code + ": " + message;

            document.getElementsByClassName("customerror")[0].innerText = myMessage;
          });
    });
  </script>

los mensajes de error se mostrarán automáticamente en el siguiente elemento, si está presente:

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

Cuando se generan múltiples errores, se agrupan en un solo error. La propiedad children agrupa los detalles de todos los errores:

{
    "errorCode": "CLIENT_300",
    "errorMessage": "Invalid form data",
    "children": [{
        "errorCode": "CLIENT_301",
        "errorMessage": "Invalid card number",
        "field": "pan",
        (...)
    }, {
        "errorCode": "CLIENT_302",
        "errorMessage": "Invalid expiry date",
        "field": "expiryDate",
        (...)
    }, {
        "errorCode": "CLIENT_303",
        "errorMessage": "Invalid security code",
        "field": "securityCode",
        (...)
    }],
    "detailedErrorCode": null,
    "detailedErrorMessage": null,
    (...)
}

Para obtener más detalles sobre los errores, vaya aquí: Administrar errores (cliente JS)

KR.onFocus()

KR.onFocus() permite de recibir notificadiones cuando un campo del formulario tiene el focus:

Ejemplo de integración:

  <script type="text/javascript">
    $(document).ready(function() {
          KR.onFocus( function(event) {
            var myMessage = "focus on: " + event.field;

            $("#custommessage").html(myMessage);
          });
    });
  </script>

Si el campo de numeró de tarjeta lleva el focus, el parametro event tendrà el valor siguiente:

{
    "field":"pan",
    "formId":"F73867",
    "_type":"krypton/focus"
}

KR.onSubmit()

KR.onSubmit () le permite interceptar la información de la transacción autorizada antes de que el formulario realice un POST en la URL definida en kr-post-success-url.

Ejemplo de integración:

  <script type="text/javascript">
    $(document).ready(function() {
      KR.onSubmit( function(event) {
        /* Change the button label to the orderStatus */
        $(".kr-payment-button > span:first").html(event.clientAnswer.orderStatus);
        $(".kr-spinner").hide();
        $(".kr-payment-button > span:first").show();
        
        /* return values:
         * true: kr-post-success-url is called using POST
         * false: kr-post-success-url is not called, execution stops.
         */
        return false;
      });
    });
  </script>

El objeto contenido en event es el mismo que aquel del POST del formulario. Para más información, vaya a: Retorno al navegador.

El comportamiento varía según el valor booleano devuelto por su función:

Valor de retorno Comportamiento
false Comportamiento predeterminado: el cliente JavaScript realiza una POST en kr-post-success-url.
true El POST on kr-post-success-url No está hecho. Usted administra la acción posterior al pago usted mismo.

Métodos

Hay varios métodos disponibles para interactuar con el cliente JavaScript:

Parámetro Descripción
KR.setFormConfig() Le permite modificar en caliente la configuración del cliente de JavaScript. Consulte la siguiente sección.
KR.validate() Activa la validación local del formulario.

KR.setFormConfig()

Este methodo permite de cambiar durante el runtime los elementos siguientes:

Uso Descripción
KR.setFormConfig({formToken: “NEW_FORM_TOKEN”}); Cambia el formulario formToken actual.
KR.setFormConfig({language: “fr-FR”}); Cambia el idioma del formulario de pago y los mensajes de error.

Personalización del boton

El botón de pago se agrega automáticamente a su formulario desde el siguiente código:

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

Hay muchas ventajas al usar nuestro botón de pago:

  • Se traducen automáticamente las etiquetas.
  • El monto se formatea y actualiza de forma automática.
  • Gestionamos para usted la animación de espera.
  • El botón cambia automáticamente a solo lectura (read-only) si es necesario.

Se puede personalizar el texto del botón asì:

También puede insertar una variable que represente la cantidad y la moneda:

Uso avanzado

Para ver todos los casos de uso avanzado, vaya a Funcionalidades del cliente JavaScript.