Temas

El formulario incluye 2 temas listos para usar. Para cada tema se debe cargar un archivo CSS y un archivo JS dedicados.

El archivo de tema CSS le permite aplicar un tema básico hasta que el formulario de pago se cargue por completo. Esto es especialmente importante en dispositivos con una conexión lenta. Siempre debe colocarse en el encabezado de la página. Siempre se debe colocar en el encabezado de la página.

El archivo de tema JS contiene la parte activa del tema (animaciones, estilos elementos, etc.). ). Se debe cargar antes que la biblioteca principal de JavaScript.

Cada uno de estos temas puede utilizarse en modo lista con un mapa incrustado o en modo pop-in.

Tema neón

neón es el tema por defecto. Los archivos asociados son:

archivos	Descripción
neon-reset.min.css	Aplica el tema neon forzando los estilos (¡ojo!)
neon.css	Aplique el tema neón teniendo en cuenta los estilos de página
neon.js	Parte activa del tema neón

Ejemplo de tema neon:

Ejemplo de código para visualizar el tema neón:

<!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" />
<!-- STEP :
1 : load the JS librairy 
2 : required public key 
3 : the JS parameters url sucess -->

<script type="text/javascript"
        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 NEON should be loaded in the HEAD section   -->
<link rel="stylesheet" href="https://static.lyra.com/static/js/krypton-client/V4.0/ext/neon-reset.min.css">
<script src="https://static.lyra.com/static/js/krypton-client/V4.0/ext/neon.js">
 </script>
 </head>
 <body>
  <!-- payment form -->
  <div class="kr-smart-form" kr-card-form-expanded  kr-form-token="DEMO-TOKEN-TO-BE-REPLACED">
  <!-- error zone -->
  <div class="kr-form-error"></div>
  </div>
</body>
</html>

Tema clásico

Los archivos asociados son:

archivos	Descripción
classic-reset.min.css	Aplica el tema clásico forzando los estilos (!importante!)
classic.css	Aplica el tema clásico teniendo en cuenta los estilos de la página
classic.js	Parte activa del tema clásico

Ejemplo de un tema clásico:

Ejemplo de código para visualizar el tema clásico:

<!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" />
<!-- STEP :
1 : load the JS librairy 
2 : required public key 
3 : the JS parameters url sucess -->

<script type="text/javascript"
        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 NEON should be loaded in the HEAD section   -->
<link rel="stylesheet" href="https://static.lyra.com/static/js/krypton-client/V4.0/ext/classic-reset.min.css">
<script src="https://static.lyra.com/static/js/krypton-client/V4.0/ext/classic.js">
 </script>
 </head>
 <body>
  <!-- payment form -->
  <div class="kr-smart-form" kr-card-form-expanded  kr-form-token="DEMO-TOKEN-TO-BE-REPLACED">
  <!-- error zone -->
  <div class="kr-form-error"></div>
  </div>
</body>
</html>

El resultado será:

Tema clásico (pop-in)

También puede mostrar el tema classic en un pop-in agregando el atributo kr-popin:

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

https://github.com/lyra/rest-php-examples/blob/master/www/minimalEmbeddedForm.popIn.php#L70-L72

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

  <div class="kr-embedded" kr-popin kr-form-token="<?php echo $formToken;?>">

Tema de Material (no compatible)

Formulario sin tema

Si desea crear un tema personalizado, se recomienda incluir el CSS no-theme.min.css. Este garantiza la compatibilidad mínima con todos los navegadores (escritorio y móviles) del mercado:

archivos	Descripción
no-theme.min.css	Aplique el mínimo "css" para garantizar un buen funcionamiento del formulario.

Personalizar un tema

El formulario incrustado (y también el pop-in) aplica los estilos en 2 pasos:

cargando un archivo CSS (por ejemplo, classic-reset.min.css) en la cabecera de la página.
y luego, el tema es afinado gracias a un objeto de configuración (contenido en classic.js)

El archivo CSS inicial

Este archivo permite reservar el espacio y aplicar un estilo mínimo al formulario antes de que se cargue y ejecute el JavaScript.

Se recomienda cargar siempre este archivo CSS en el header de la página. classic-reset.css o no-theme.css son dos ejemplos de archivos CSS iniciales.

El objeto de configuración.

Los archivos JavaScript de temas (como classic.js o material.js) contienen un objeto de configuración que define el conjunto del tema: animaciones, estilos, elementos HTML.

La única diferencia entre un formulario clásico, material, incrustado o pop-in reside en este objeto de configuración.

Referencia del objeto de configuración

CARACTERÍSTICAS	Tipo	Descripción
form.fields.order	string list	Orden predeterminado de los campos (si no se incluye) como [“pan”, “securityCode”, “expiry”]
form.controls.order	string list	Orden predeterminado de los controles (si no se incluye) como [“formButton”, “error”]
form.layout	string	payment form layout: default or compact
merchant.header.image.src	string	imagen url o data:image (tipo soportado por el CSS)
merchant.header.image.type	string	Fondo (ocupa todo el encabezado) o logo (logo circular centrado)
merchant.header.image.visibility	boolean	true/false: si se establece en "false", se oculta la imagen
merchant.header.shopName.color	string	Color del nombre de la tienda. Ejemplo: ‘red’ (atributo CSS)
merchant.header.shopName.gradient	boolean	true/false: aplicar o no un degradado en el encabezado
merchant.header.backgroundColor	string	Color de fondo del encabezado. Ejemplo: ‘red’ (atributo CSS)

Ejemplos de configuración del encabezado del pop-in

El objeto de configuración se debe pasar de la siguiente manera:

let config = {
  "merchant": {
    "header": {
      "image": {
        "visibility": false
      }
    }
  }
};

KR.setFormConfig(config);

Ejemplos de configuración del encabezado del pop-in.

Cambiar el logo:

{
  "merchant": {
    "header": {
      "image": {
        "type": "logo",
        "visibility": true,
        "src": "<https://www.logomoose.com/wp-content/uploads/2018/02/logomoosedogandowl-011.jpg>"
      }
    }
  }
}

Pasar una imagen como una cadena:

{
  "merchant": {
    "header": {
      "image": {
        "type": "background",
        "visibility": true,
        "src": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDU3NiA1MTIiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTEwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzOCIgLz4KICA8cGF0aAogICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOjAuMzkzNDMyNjgiCiAgICAgaWQ9InBhdGgyIgogICAgIGQ9Im0gMzczLjI2NjY0LDI3My44Mjk5NyAxOC41OTg3NSwtODEuODMzOTkgYyAxLjM0Mjc4LC01LjkwODU3IC0zLjE0ODI1LC0xMS41MzUwNCAtOS4yMDc1MSwtMTEuNTM1MDQgSCAyMjguMTI0NiBsIC0zLjYwNjIsLTE3LjYyOTcyIGMgLTAuODk4NjEsLTQuMzk0MjYgLTQuNzY1MjUsLTcuNTQ5OTkgLTkuMjUwNzgsLTcuNTQ5OTkgaCAtNDAuMzM4MjcgYyAtNS4yMTQ5NCwwIC05LjQ0MjM4LDQuMjI3NDQgLTkuNDQyMzgsOS40NDIzOCB2IDYuMjk0OTQgYyAwLDUuMjE0OTQgNC4yMjc0NCw5LjQ0MjM5IDkuNDQyMzgsOS40NDIzOSBoIDI3LjQ5NDI3IGwgMjcuNjM3ODcsMTM1LjExODU0IGMgLTYuNjEyMDUsMy44MDI1MyAtMTEuMDY3NjcsMTAuOTMyMzEgLTExLjA2NzY3LDE5LjEwNzA2IDAsMTIuMTY4MDggOS44NjQxNCwyMi4wMzIyMyAyMi4wMzIyMywyMi4wMzIyMyAxMi4xNjgwOSwwIDIyLjAzMjIzLC05Ljg2NDE1IDIyLjAzMjIzLC0yMi4wMzIyMyAwLC02LjE2NjY3IC0yLjUzNjQ2LC0xMS43MzgwNyAtNi42MTkxMSwtMTUuNzM3MzEgaCA4Mi40ODE5NyBjIC00LjA4MjI2LDMuOTk5MjQgLTYuNjE4NzIsOS41NzA2NCAtNi42MTg3MiwxNS43MzczMSAwLDEyLjE2ODA4IDkuODY0MTYsMjIuMDMyMjMgMjIuMDMyMjQsMjIuMDMyMjMgMTIuMTY4MDgsMCAyMi4wMzIyMywtOS44NjQxNSAyMi4wMzIyMywtMjIuMDMyMjMgMCwtOC43MjMyIC01LjA3MDU2LC0xNi4yNjEzNyAtMTIuNDI0MjEsLTE5LjgzMDk3IGwgMi4xNzA1NywtOS41NTA5NyBjIDEuMzQyNzcsLTUuOTA4NTkgLTMuMTQ4MjUsLTExLjUzNTA2IC05LjIwNzUsLTExLjUzNTA2IEggMjUxLjMwMTMzIGwgLTIuNTc1MDIsLTEyLjU4OTg2IGggMTE1LjMzMjgyIGMgNC40MDg4MSwwIDguMjMwNjEsLTMuMDUwNjcgOS4yMDc1MSwtNy4zNDk3MSB6IiAvPgo8L3N2Zz4K"
      }
    }
  }
}

Cree sus propios temas

Se pueden personalizar los campos del formulario de pago a través de directivas CSS estándar. Solo tiene que aplicar y las imágenes serán transferidas automáticamente, incluso en los elementos contenidos en los iframes de los campos sensibles.

El cliente JavaScript, gracias a los campos ocultos del sistema, recuperará automáticamente los estilos de su página para trasladarlos a los iframes.

Categoria

Tags