Referencia del cliente JavaScript

El cliente JavaScript permite crear un formulario de pago en su sitio comercial, con el siguiente código:

/es/rest/V4.0/api/kb/authentication.html

https://github.com/lyra/rest-php-examples/blob/master/www/minimalEmbeddedForm.php#L45-L85

https://api.lyra.com/api-payment/V4/Charge/CreatePayment

<!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.lyra.com/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" 
   kr-public-key="69876357:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5" 
   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.lyra.com/static/js/krypton-client/V4.0/ext/classic-reset.css">
 <script 
  src="https://static.lyra.com/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>

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

Plataformas compatibles

Hacemos nuestro mejor esfuerzo para admitir todas las versiones recientes de los principales navegadores disponibles en el mercado.

Por razones de seguridad y para ofrecer la mejor experiencia de usuario a la mayoría de nuestros vendedores, no admitimos navegadores y sistemas operativos que dejaron de recibir parches de seguridad.

Estos navegadores representan una parte ínfima del tráfico de pagos en Internet.

Somos compatibles con:

Internet Explorer de la versión 10 en adelante
Edge a partir de la versión 17
Chrome a partir de la versión 70
Firefox a partir de la versión 64
Safari (escritorio y móvil) a partir de la versión 11
Android Native Browser a partir de Android 5.0
todas las últimas versiones de iOS del iPhone 4S en adelante.

El navegador debe ser compatible con TLS 1.2.

Probamos proactivamente la mayoría de los navegadores, tanto en dispositivos móviles como de escritorio. Sin embargo, puede que una combinación de móvil + navegador escape a nuestra vigilancia. De ser el caso, contacte a nuestra asistencia técnica.

Si desea usar una combinación que no está soportada por nuestro cliente Javascript, también puede implementar nuestro formulario de redireccionamiento.

También tenga en cuenta que algunos antivirus o bloqueadores de anuncios pueden potencialmente bloquear nuestra solución. Si detecta algún uso indebido, contacte a la asistencia.

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:

https://github.com/lyra/rest-php-examples/blob/master/www/minimalEmbeddedForm.php#L81-L82

  <!-- Javascript library. Should be loaded in head section -->
  <script 
   src="https://static.lyra.com/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" 
   kr-public-key="69876357:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5" 
   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ámetros generales:

CARACTERÍSTICAS	OBLIGATORIO	Descripción
kr-public-key	Sí	Clave pública que se utilizará para realizar el pago.
kr-language		Idioma de visualización del formulario en formato CultureInfo (fr-FR).
kr-post-url-success		URL a la que se envía el formulario (método POST) en caso de éxito.
kr-get-url-success		URL a la que se envía el formulario (método POST) en caso de éxito.
kr-post-url-refused		URL que llamar cuando todos los intentos han fallado (método POST).
kr-get-url-refused		URL que llamar cuando todos los intentos han fallado (método GET).
kr-clear-on-error		Deshabilita el borrado del CVV en caso de rechazo de una transacción (true o false).
kr-hide-debug-toolbar		Oculta la barra de depuración en modo TEST (verdadero o falso).
kr-spa-mode		Si el valor es "true", el formulario no se inicializa automáticamente ("false" es el valor por defecto).

Clases que se utilizan para personalizar los campos:

CARACTERÍSTICAS	Descripción
kr-pan	Número de la tarjeta
kr-expiry	Fecha de vencimiento.
kr-security-code	Código de seguridad (cvv)
kr-installment-number	Número de cuotas (campo específico para LATAM)
kr-first-installment-delay	Número de meses en diferido para aplicar la primera cuota (campo específico LATAM)
kr-identity-document-type	Tipo de documento de identidad (campo específico para LATAM)
kr-identity-document-number	Documento de identidad (campo específico para LATAM)
kr-card-holder-name	Titular de la tarjeta (campo específico LATAM)
kr-card-holder-mail	Dirección de e-mail del titular (campo específico para América Latina)
kr-do-register	casilla de confirmación para la creación de un token de tarjeta

CARACTERÍSTICAS	OBLIGATORIO	Descripción
kr-placeholder-expiry		Marcador de posición del campo kr-expiry (fecha de expiración).

Clases que pueden utilizarse para personalizar los "placeholders":

CARACTERÍSTICAS	Descripción	Caso LATAM
kr-placeholder-expiry	Marcador de posición del campo kr-expiry (fecha de expiración).
kr-placeholder-pan	Placeholder de posición del campo kr-pan (número de tarjeta).
kr-placeholder-security-code	Placeholder de posición del campo kr-security-code (CVV).
kr-placeholder-identity-document-type	Marcador de posición del campo del tipo de documento de identidad, de ser necesario	Sí
kr-placeholder-identity-document-number	Marcador de posición del campo del número de documento de identidad, de ser necesario	Sí
kr-placeholder-installments-default	Marcador de posición del campo Forma de pago por defecto
kr-placeholder-installments-single-payment	Placeholder del campo medio de pago cuando hay solo uno disponible
kr-placeholder-installments-single-payment-credit	Placeholder del campo medio de pago cuando solo se acepta crédito
kr-placeholder-first-installment-delay	Placeholder del campo Plazo de pago	Sí
kr-placeholder-card-holder-mail	Marcador de posición del campo e-mail, de ser necesario	Sí
kr-placeholder-card-holder-name	Marcador de posición del campo del nombre del titular	Sí

Clases que se utilizan para personalizar las etiquetas animadas (específicas al material theme):

CARACTERÍSTICAS	Descripción	Template	Caso LATAM
kr-label-expiry	Etiqueta animada del campo kr-expiry (fecha de vencimiento).
kr-label-pan	Etiqueta animada del campo kr-pan (número de tarjeta).
kr-label-security-code	Etiqueta animada del campo kr-security-code (CVV).
kr-label-identity-document-type	Etiqueta animada del campo del tipo de documento de identidad, de ser necesario		Sí
kr-label-identity-document-number	Etiqueta animada del campo del número de documento de identidad, de ser necesario		Sí
kr-label-card-holder-mail	Etiqueta animada del campo e-mail, de ser necesario		Sí
kr-label-card-holder-name	Etiqueta animada del campo del nombre del titular, de ser necesario		Sí
kr-installments-label-singular	Etiqueta animada del campo medio de pago cuando hay solo uno disponible	Mi Etiqueta [COUNT] con [CURRENCY] AMOUNT]
kr-installments-label-plural	Etiqueta animada del campo medio de pago cuando hay varios medios disponibles	Mi Etiqueta [COUNT] con [CURRENCY] AMOUNT]
kr-first-installment-delay-label-plural	Etiqueta animada del campo Plazo de pago cuando hay uno solo	Mi Etiqueta [COUNT]	Sí
kr-first-installment-delay-label-without	Etiqueta animada del campo Plazo de pago cuando hay varios	Mi Etiqueta [COUNT]	Sí

También puede sobrescribir estos parámetros con el método KR.setFormConfig(). Por ejemplo, para sobrescribir el parámetro kr-post-url-success :

KR.setFormConfig({
        'kr-post-url-success': 'https://my.site'
    }).then(({
            KR
        }) => {
            /* there is no error */
        );

Si los parámetros kr-post-url-success y kr-post-url-success se definen al mismo tiempo, el método POST es prioritario. Sucede lo mismo con kr-post-url-refused y kr-get-url-refused*.

Eventos

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

CARACTERÍSTICAS	Descripción
KR.onBlur()	Uno de los campos del formulario pierde el foco. Ver KR.onFocus()
KR.onBrandChanged()	Se llama cuando se detecta la marca de la tarjeta
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 aún no se carga el contenido de las Iframe.
KR.onFormReady()	El formulario está listo para usarse.
KR.onFormValid()	Se llama cuando se detecta la marca de la tarjeta
KR.onInstallmentChanged()	Se llama cuando el comprador selecciona el número de cuotas que aplicar al pago.
KR.onLoaded()	Primer evento llamado antes de la creación del formulario.
KR.onPopinClosed()	Emet un evenement lorsque la popIn du formulaire est fermée (cas undefined)
KR.onSubmit()	Se llama justo antes de enviar el formulario mediante POST.
KR.wallet.onTabChange()	Detecta un cambio de tabulación en el caso del wallet (véase Gestión de los wallets comprador )
KR.onTransactionCreated()	Llamada al crear una transacción (aceptada o rechazada)
KR.button.onClick()	Se llama cuando el comprador hace clic en el botón del formulario.
KR.on3dSecureAbort()	Llamada cuando el usuario abandona la autentificación 3DS

Los siguientes eventos están obsoletos y ya no son compatibles. No deben ser utilizados :

KR.onFormReadyListener()
KR.onFormCreateListener()

Todos los eventos devuelven promesas, lo que les permite integrarlas en un string. Para más información, ver: Trabajar en un entorno asíncrono.

KR.onBrandChanged()

La callback definida en KR.onBrandChanged() se llama cada vez que se detecta una marca de tarjeta. Ejemplo de integración

https://github.com/lyra/rest-php-examples/blob/master/www/js_examples/jquery/minimalEmbeddedForm.onBrandChanged.php#L70-L78

  <script type="text/javascript">
    $(document).ready(function() {
          KR.onBrandChanged( function({KR, cardInfo}) {
            var myMessage = "Selected brand: " + cardInfo.brand + ", and bin: " + cardInfo.bin;

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

El objeto **cardInfo** contiene la propiedad **brand** que puede tomar los siguientes valores:

Amex
cb
mastercard
maestro
visa_electron
Visa

También contiene el bin de la tarjeta introducida, que son los 6 primeros caracteres del pan.

Para ver la lista completa, consulte la documentación de referencia del parámetro effectiveBrand aquí: Payment Payment.

KR.onFormValid()

Se llama a la callback definida en KR.onFormValid() cada vez que todos los campos requeridos son rellenados y los datos son válidos. Ejemplo de integración

https://github.com/lyra/rest-php-examples/blob/master/www/js_examples/jquery/minimalEmbeddedForm.onFormValid.php#L70-L78

    <script type="text/javascript">
    $(document).ready(function() {
          KR.onFormValid( function({KR, cardInfo}) {
            var myMessage = "Selected brand: " + cardInfo.brand + ", and bin: " + cardInfo.bin;

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

El objeto **cardInfo** contiene la propiedad **brand** que puede tomar los siguientes valores:

Amex
cb
mastercard
maestro
visa_electron
Visa

También contiene el bin de la tarjeta introducida, que son los 6 primeros caracteres del pan.

Para ver la lista completa, consulte la documentación de referencia del parámetro effectiveBrand aquí: Payment Payment.

KR.onError()

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

Ejemplo de intercepción de mensajes de error:

https://github.com/lyra/rest-php-examples/blob/master/www/js_examples/jquery/minimalEmbeddedForm.onError.php#L70-L80

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

            try {
              /* if client answer exists, a refused transaction has been created */
              /* it's not always the case. For example, if the form is empty,    */
              /* error is raised before transaction creation                     */

A continuación, los mensajes de error se mostrarán automáticamente en el siguiente elemento, siempre y cuando esté presente:

<div id="customerror"></div>

Cuando se generan múltiples errores, se agrupan en un solo error. La propiedad children contendrá 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 más información sobre errores, consulte: Gestionar errores (cliente JS)

KR.onFocus()

KR.onFocus() permite ser notificado cuando un campo de formulario esta orientado:

Ejemplo de integración:

https://github.com/lyra/rest-php-examples/blob/master/www/js_examples/jquery/minimalEmbeddedForm.onFocus.php#L70-L78

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

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

Si el campo del número de tarjeta se enfoca, la variable event tomará el siguiente valor:

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

También puede utilizar KR.onBlur() para detectar si un campo pierde foco. Funciona de manera parecida a KR.onFocus()

KR.onInstallmentChanged()

KR.onInstallmentChanged() permite recibir notificaciones cuando el comprador selecciona el número de cuotas.

<script type="text/javascript">
    $(document).ready(function(){
          KR.onInstallmentChanged( function({KR, installmentInfo}){
            console.log(installmentInfo)
          });
    });
</script>

El objeto **installationInfo** tiene los siguientes atributos:

Marca de la tarjeta. Ejemplo: VISA,
Booleano que indica si se aplica una tasa de interés. Ejemplo: false
Número total de cuotas. Ejemplo: 1
Monto total, con intereses Ejemplo: 20000

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:

https://github.com/lyra/rest-php-examples/blob/master/www/js_examples/jquery/minimalEmbeddedForm.onSubmit.php#L70-L85

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

La callback recibe un objeto con 2 parámetros:

KR KR: Referencia a la biblioteca
evento event: Objeto que contiene la transacción recién creada.

L'objet contenu dans event est le même que celui posté par le formulaire. Pour plus de détails, rendez-vous ici : retour à la boutique.

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

Valor de retorno	Comportamiento
true	el cliente JavaScript realiza un POST en kr-post-success-url.
false	El post sobre kr-post-success-url no está hecho. Usted maneja por su cuenta la acción posterior al pago.

KR.button.onClick()

KR.button.onClick() permite realizar un procesamiento personalizado antes de que el cliente JavaScript valide el formulario y realice la llamada para crear una transacción. KR.button.onClick() acepta como parámetro un callback o una promesa (Promise).

Puede detener la cadena de ejecución devolviendo false al final del procesamiento:

Valor de retorno	Comportamiento
false	Ejecución interrumpida. La gestión de errores o la redirección no fue realizada. La transacción no se ha pagado.
true	la ejecución continúa normalmente cuando se ejecuta la callback.

KR.onTransactionCreated()

Hay 2 callbacks que permiten interceptar una transacción recién creada:

KR.onSubmit() KR.onError() : Cuando se crea una transacción aceptada.
KR.onError() : Se crea una transacción rechazada.

KR.onTransactionCreated() intercepta las transacciones creadas recientemente, ya sean aceptadas o rechazadas. acepta un callback o una promesa como parámetro.

La callback recibe un objeto con 2 parámetros:

KR KR: Referencia a la biblioteca
evento event: Objeto que contiene la transacción recién creada.

Puede detener la cadena de ejecución devolviendo false al final del procesamiento:

Valor de retorno	Comportamiento
false	Ejecución interrumpida. La gestión de errores o la redirección no fue realizada.
true	la ejecución continúa normalmente cuando se ejecuta la callback.

KR.on3dSecureAbort()

Con la autentificación 3-D Secure, el usuario puede elegir anular. Esto ocasionará el cierre del pop-in 3DS-Secure y un error de abandono Este evento intercepta un abandono por parte del usuario.

Note que en dicho caso la transacción no es creada en tiempo real. Una transacción rechazada con el error 149 será creada de forma asíncrona únicamente si el usuario no ha hecho un nuevo intento de pago. La creación se iniciará en 10 minutos máximo. Para interceptar esta transacción debe utilizar IPNs. Consulte Generalidades sobre la IPN para más información.

Métodos

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

Método	Descripción
KR.field.focus()	Asigna el foco a un campo del formulario incrustado
KR.setFormConfig()	Permite sobrescribir la configuración del cliente JavaScript, consulte la sección siguiente.
KR.setFormToken()	Acceso directo para cambiar el formToken del formulario actual.
KR.setBrand()	Fuerza la detección de un modo de pago.
KR.submit()	Envía el formulario(). Equivale al clic del usuario en el botón del formulario
KR.validate()	Obsoleto, utilice KR.validateForm()
KR.validateForm()	Activa la validación local del formulario.

Los siguientes métodos están obsoletos y ya no son compatibles. No deben ser utilizadas :

KR.validate(): utilizar KR.validateForm()
KR.registerPlugin()

Gestion de l'affichage en mode PopIn (voir undefined )

Método	Descripción
KR.closePopin()	Cierra la popIn (si está abierta)
KR.openPopin()	Abre la pop-in (si estaba cerrada)
KR.setShopName()	Cambia el nombre de la tienda definido en el encabezado de la pop-in.

Gestión dinámica del formulario (agregar, eliminar DOM)

Método	Descripción
KR.addForm(CSS class or id)	Agrega un formulario a un elemento del DOM. Devuelve un formId
KR.attachForm(CSS class or id)	Activar el formulario en un DOM existente. Devuelve un formId
KR.hideForm(formId)	Ocultar el formulario
KR.removeEventCallbacks()	Las funciones *KR.on[]** suprimen todas las devoluciones de llamada adjuntas
KR.removeForms()	Suprime todos los formularios del DOM (llama automáticamente KR.removeEventCallbacks() )
KR.showForm(formId)	Visualiza el formulario

puede consultar el repositorio github de Embedded FormGlue para más información.

Manejo del botón de envío del formulario de pago:

CARACTERÍSTICAS	Descripción
KR.button.setLabel('MON LABEL %amount-and-currency% ')	Define una etiqueta donde %amount-and-currency% es remplazado por el monto y la divisa
KR.button.showSpinner()	Muestra la animación de espera
KR.button.hideSpinner()	Ocultar la animación de espera
KR.button.disable()	Desactiva el botón (no se puede cliquear)
KR.button.enable()	Activa el botón

Todos los eventos devuelven promesas que puede integrar en una cadena. Para más información, ver: Trabajar en un entorno asíncrono.

KR.field.focus()

Para asignarle el foco a un campo del formulario puede utilizar el método KR.field.focus(FIELD_CLASS) Debe pasar como parámetro la clase del campo del formulario incrustado.

Por ejemplo, para añadir un botón que le asignará el foco de entrada al campo fecha de vencimiento:

<button type="button" onclick="KR.fields.focus('kr-expiry')">Focus expiry field</button>

KR.setFormConfig()

Este método permite sobrescribir los parámetros de inicialización y los siguientes elementos:

Uso	Descripción
KR.setFormConfig({formToken: "NEW_FORM_TOKEN"});	Cambia el formulario formToken actual.
KR.setFormConfig({language: "fr-FR"});	Modifica el idioma del formulario de pago y de los mensajes de error.
KR.setFormConfig({'kr-label-do-register': 'custom'})	Define la etiqueta de la casilla de control "Guardar mi tarjeta"

Este método devuelve una promesa (Promise).

KR.setBrand()

Fuerza la detección de un modo de pago. El método toma como parámetro el nombre del modo de pago Los valores admitidos son (no exhaustivos):

Visa
VISA_DEBIT
VISA_ELECTRON
mastercard
MASTERCARD_DEBIT
maestro
Amex
CB
(...)

Atención: Importante: Si determina otro valor, este se enviará sin ser modificado a la plataforma de pago. Si el valor es incompatible con la configuración de su tienda, no se crea ninguna transacción.

Para reactivar la detección automática, llame KR.setBrand() sin parámetros.

KR.validateForm()

Este método verifica localmente si el formulario es válido. Y devuelve una promesa:

se llama a then() cuando el formulario es válido. result tendrá el valor null.
Se llama a catch() cuando el formulario no es válido. result contiene los detalles del error.

Ejemplo de llamada:

KR.validateForm().then( ({KR, result}) => {

    /* there is no error */
    /* result == null */
    }

)
.catch( ({KR, result}) => {

    /* Get the error message */
    var code = result.errorCode;
    var message = result.errorMessage;
    var myMessage = code + ": " + message;
    console.log(myMessage);

    /* if you have defined a callback using      */
    /* result.onError(), you can trigger it calling: */
    return result.doOnError();
    }

);

Una vez que haya detectado los errores, puede activar el evento KR.onError() manualmente llamando a result.doOnError();.

Personalización del botón

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

https://github.com/lyra/rest-php-examples/blob/master/www/minimalEmbeddedForm.php#L78-L79

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

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

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

Las etiquetas se traducen automáticamente
El monto se formatea y actualiza automáticamente
Nos encargamos de la animación de espera en su lugar
El botón cambia automáticamente a solo lectura (read-only) si es necesario.

Si desea administrar la etiqueta del botón usted mismo, solo agréguelo de la siguiente manera:

<button class="kr-payment-button">Custom label</button>

También puede insertar una variable que represente el monto y la moneda. El cliente JavaScript cancelará automáticamente el reemplazo:

<button class="kr-payment-button">this will cost %amount-and-currency% !!</button>

Preguntas frecuentes

Aquí encontrará preguntas frecuentes sobre el cliente JavaScript.

¿Cómo corregir los errores CORS o “Unable to post message” al momento de pagar?

Para empezar, debe programar desde un servidor web. Se debe acceder a la página de test con http:// y no con file://

Si utiliza el framework ionic o cordova , debe declarar explícitamente los nombres de dominio que el cliente JavaScript puede llamar. Para ello, añada a config.xml :

<allow-navigation href="https://static.lyra.com/static/js/krypton-client/V4.0" />

Más información.

Cómo configurar las CSP (Content Security Policy)

Si su sitio web utiliza CSP (Content Security Policy), debe autorizar la creación de Iframes al cliente JavaScript Para ello, es necesario añadir las siguientes 3 directivas:

Directiva CSP	valores
connect-src	https://static.lyra.com
frame-src	https://static.lyra.com
script-src	https://static.lyra.com

Ejemplo de inclusión en los metadatos del encabezado de su página:

<meta
  http-equiv="Content-Security-Policy"
  content="
    connect-src https://static.lyra.com;
    frame-src https://static.lyra.com;
    script-src https://static.lyra.com;"
/>

Más información sobre las CSP aquí.

Si utiliza una herramienta externa de detección de fraude (como monitor+, clearsale, etc.), también debe agregarla:

Directiva CSP	valores
connect-src	https://secure.lyra.com
frame-src	https://secure.lyra.com
script-src	https://secure.lyra.com

Uso avanzado

Para ver todos los casos de uso avanzados, consulte los siguientes artículos:

Descripción	Artículo
Transmitir los campos de acuerdo a sus necesidades	Casos de uso
Agregar los campos de formulario personalizados	Campos adicionales
Manejo de errores en el formulario de pago	Manejo de errores
Gestión de nuevos intentos de pago (retry)	Gestión de retry
Configuración general del cliente JS	Parámetros generales
Ejemplos de código	Ejemplos de código

Ejemplos de integración:

En función del framework JavaScript que utilice en el sitio vendedor, otros ejemplos de integración están disponibles aquí:

Framework	Descripción
Vue.js	Ejemplo de integración para Vue.js
React	Ejemplo de integración para React.
React + NextJS	ejemplo de integración con React y NextJS
Angular	Ejemplo de integración para Angular y TypeScript
Ionic	Ejemplo de integración para Ionic
require.js	ejemplo de integración con RequireJS
Javascript	Biblioteca genérica utilizada con los framework Javascript
[C#][csharp]	Ejemplo de integración para C# (.NET)
python/flask	ejemplo en python con el framework flask
php/symfony	ejemplo en python en PHP con symfony

Categoria

Tags