Temas y personalización

El formulario incrustado incluye 2 temas listos para usar. Cada tema requiere cargar un archivo CSS y un archivo JS específicos.

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.

El archivo de tema JS contiene la parte activa del tema (animaciones, estilos, elementos, etc.). Es necesario cargarlo antes de la biblioteca de JavaScript principal.

Cada uno de estos temas puede ser utilizado con el formulario incrustado o con el modo pop-in

Tema classic

classic (clásico) es el tema predeterminado. Los archivos asociados son:

archivos description
classic-reset.css Aplica el tema clásico forzando los estilos (¡ojo!)
classic.css Aplica el tema clásico tomando en cuenta los estilos de la página
classic.js Parte activa del tema clásico

Ejemplo de 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" />  

  <!-- Javascript library. Should be loaded in head section -->
  <script 
   src="https://api.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://api.lyra.com/static/js/krypton-client/V4.0/ext/classic-reset.css">
 <script 
  src="https://api.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>

Tema clásico (pop-in)

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

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

El resultado será:

Es posible personalizar la imagen y el nombre de la tienda de la pop-in. Para mas información, consulte: Referencia del cliente JavaScript.

Tema material

El tema material aplica las directrices definidas por Google. Los archivos asociados son los siguientes:

archivos description
material-reset.css Aplica el tema material forzando los estilos (¡ojo!)
material.css Aplica el tema material tomando en cuenta los estilos de la página
material.js Parte activa del tema clásico

Ejemplo de tema material:

Ejemplo del código para mostrar el tema material:

<!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/material-reset.css">
  <script 
   src="<?php echo $client->getClientEndpoint();?>/static/js/krypton-client/V4.0/ext/material.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>

Tema material (pop-in)

También puede visualizar el tema material en el pop-in agregando el atributo kr-popin:

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

Formulario sin tema

Si desea crear un tema personalizado, le recomendamos incluir el CSS no-theme-css. Este permite asegurar la compatibilidad mínima necesaria con todos los navegadores (móviles y de escritorio) del mercado:

archivos description
no-theme.css Aplica el css mínimo para garantizar que el formulario funcione correctamente

Personalizar un tema

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

  1. cargando un archivo CSS (como classic-reset.css) en el encabezado de la página
  2. a continuación, se perfecciona el tema 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 encabezado de la página. classic-reset.css y no-theme.css son dos ejemplos de archivos CSS iniciales que proporcionamos.

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 tema en su integralidad: 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

Parámetro 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 Diseño del formulario de pago: default o compact
merchant.header.image.src string URL de imagen o data:image (tipo admitido 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 ocultará 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"
      }
    }
  }
}

Crear sus propios temas

Es posible personalizar los campos del formulario de pago mediante directivas CSS estándar. Simplemente aplíquelas y las imágenes se transferirán automáticamente, incluso en los elementos contenidos en los IFrame de los campos sensibles.

Gracias a un sistema de campos ocultos, el cliente JavaScript recuperará automáticamente los estilos de su página para trasladarlos a los IFrame.

Personalizar el color del botón “Pagar”.

El botón “Pagar” se encuentra en el contenedor<div class="kr-embedded">. El estilo del botón “Pagar” está definido por la clasekr-payment-button.

Para sobrecargar el color del botón “Pagar”, se recomienda definir el nuevo estilo en la etiqueta de su página de pago, justo después de cargar el tema y el código JavaScript.

He aquí un ejemplo usando la regla css!important.

<head>
    <!-- Javascript library. Should be loaded in head section -->
    <script type="text/javascript"
        src="https://api.lyra.com/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" 
        kr-public-key="69876357:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5">
    </script>

    <!-- theme and plugins. should be loaded in the HEAD section -->
    <link rel="stylesheet" href="https://api.lyra.com/static/js/krypton-client/V4.0/ext/classic-reset.css">
    <script type="text/javascript" src="https://api.lyra.com/static/js/krypton-client/V4.0/ext/classic.js"></script>
    
    <!-- Overrride payment button background color -->
    <style type="text/css">
      .kr-embedded .kr-payment-button {
	    background-color: #00D152 !important;	
      } 
    </style>
</head>
<body> 
    ...
</body>