Temas
El formulario incrustado incluye 2 temas listos para usar. Cada tema requiere la carga de 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 ser utilizado con el formulario incrustado o con el modo pop-in.
Tema clásico
classic (clásico) es el tema por defecto. 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" />
<!-- 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>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 aquí: Referencia del cliente JavaScript
Tema de diseño “material”
El tema material aplica las directrices de Google. Los archivos asociados son los siguientes:
| archivos | Descripción |
|---|---|
| material-reset.css | Aplica el tema "material" forzando los estilos (!importante!) |
| material.css | Aplica el tema "material” teniendo en cuenta los estilos de la página |
| material.js | Parte activa del tema clásico |
Ejemplo de un 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, 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.