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://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>

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://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>
  <!-- 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.

Exemple d’interception des messages d’erreurs:

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

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

Ensuite, les messages d’erreurs seront automatiquement affichés dans l’élément suivant, s’il est présent:

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

Lorsque plusieurs erreurs sont génerées, elles sont regroupées au sein d’une erreur unique. La propriété children contiendra le détail de toutes les erreurs:

{
    "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,
    (...)
}

Pour plus de détails sur les erreurs, rendez-vous ici:  Gérer les erreurs (client JS)

KR.onFocus()

KR.onFocus() permet d’être notifié lorsqu’un champ du formulaire prend le focus:

Exemple d’intégration:

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

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

Si le champ du numéro de carte prend le focus, la variable event prendra la valeur suivante:

{
    "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 Comportement par défaut: le client JavaScript effectue un POST sur kr-post-success-url.
 true Le post sur kr-post-success-url n’est pas effectué. Vous gérez vous même l’action post-paiement.

Métodos

Plusieurs méthodes sont à votre disposition pour interagir avec le client 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()

cette fonction permet de changer à chaud les éléments suivants:

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.

Personnalisation du boutton

Le boutton de paiement est automatiquement ajouté dans votre formulaire à partir du code suivant:

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

Il y a de multiples avantages à utiliser notre bouton de paiement:

  • 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.

Si vous souhaitez gérer vous-même le label du bouton, il suffit de l’ajouter de la façon suivante:

Vous pouvez également insérer une variable qui représente le montant et la devise:

Uso avanzado

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