Thèmes
Le formulaire inclut 2 thèmes prêts à l’emploi. Chacun des thèmes nécessite le chargement d'un fichier CSS et JS dédiés.
Le fichier de thème CSS permet d'appliquer un thème de base en attendant que le formulaire de paiement soit complétement chargé. C'est particulièrement important sur les appareils avec une connexion lente. Il faut toujours le placer dans le header de la page.
Le fichier de thème JS contient la partie active du thème (animations, styles, éléments, ... ). Il doit être chargé avant la libraire JavaScript principale.
Chacun de ces thèmes peut être utilisé en mode liste avec carte embarquée ou en mode pop-in.
Thème néon
néon est le thème par défaut. Les fichiers associés sont :
fichiers | description |
---|---|
neon-reset.min.css | Applique le thème néon en forçant les styles (!important) |
neon.css | Applique le thème néon en tenant compte des styles de la page |
neon.js | Partie active du thème néon |
Exemple du thème néon :
Exemple de code pour afficher le thème néon :
<!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>
Thème classic
Les fichiers associés sont :
fichiers | description |
---|---|
classic-reset.min.css | Applique le thème classic en forçant les styles (!important) |
classic.css | Applique le thème classic en tenant compte des styles de la page |
classic.js | Partie active du thème classic |
Exemple du thème classic :
Exemple de code pour afficher le thème classic :
<!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>
Le résultat sera :
Thème classic (pop-in)
Vous pouvez également afficher le thème classic dans une pop-in en ajoutant l'attribut kr-popin :
<div class="kr-embedded" kr-popin kr-form-token="<?php echo $formToken;?>">
Thème material (non compatible)
Formulaire sans thème
Si vous souhaitez créer un thème personnalisé, il est recommandé d'inclure le CSS no-theme.min.css. Il permet de garantir la compatibilité minimale avec l'ensemble des navigateurs (desktop et mobile) du marché :
fichiers | description |
---|---|
no-theme.min.css | Applique le css minimum pour garantir le bon fonctionnement du formulaire |
Personnaliser un thème
Le formulaire embarqué (mais aussi la pop-in) applique les styles en 2 étapes :
- à travers le chargement d'un fichier CSS (comme classic-reset.min.css) dans le header de la page.
- et ensuite, le thème est affiné grâce à un objet de configuration (contenu dans classic.js)
Le fichier CSS initial
Ce fichier permet de réserver l'espace et d'appliquer un style minimum au formulaire, et ceci avant que le JavaScript ne soit chargé et exécuté.
Il est recommandé de toujours charger ce fichier CSS dans le header de la page.classic-reset.min.css, ou no-theme.min.css sont deux exemples de fichiers CSS initiaux fournis.
L'objet de configuration
Les fichiers JavaScript de thèmes (comme classic.js ou material.js) contiennent un objet de configuration qui définit l'ensemble du thème: animations, styles, éléments HTML.
La seule différence entre un formulaire classic, material, embarqué ou pop-in réside dans cet objet de configuration.
Référence de l'objet de configuration
Paramètre | Type | Description |
---|---|---|
form.fields.order | string list | default field order (if not included) like ["pan", "securityCode", "expiry"] |
form.controls.order | string list | default controls order (if not included) like ["formButton", "error"] |
form.layout | string | payment form layout: default or compact |
merchant.header.image.src | string | image url ou data:image (type supporté par CSS) |
merchant.header.image.type | string | background (occupe tout l'entête) ou logo (logo rond centré) |
merchant.header.image.visibility | boolean | true/false : si false, l'image est cachée |
merchant.header.shopName.color | string | couleur du nom de la boutique. Exemple : 'red' (attribut CSS) |
merchant.header.shopName.gradient | boolean | true/false : applique ou non un gradient dans l'entête |
merchant.header.backgroundColor | string | couleur de fond de l'entête. Exemple : 'red' (attribut CSS) |
Exemples de configuration du header de la pop-in
L'objet de configuration doit être passé de la façon suivante :
let config = { "merchant": { "header": { "image": { "visibility": false } } } }; KR.setFormConfig(config);
Voici quelques exemples de configuration du header de la pop-in.
Changer le logo :
{ "merchant": { "header": { "image": { "type": "logo", "visibility": true, "src": "<https://www.logomoose.com/wp-content/uploads/2018/02/logomoosedogandowl-011.jpg>" } } } }
Passer une image comme une chaîne :
{ "merchant": { "header": { "image": { "type": "background", "visibility": true, "src": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDU3NiA1MTIiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTEwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzOCIgLz4KICA8cGF0aAogICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOjAuMzkzNDMyNjgiCiAgICAgaWQ9InBhdGgyIgogICAgIGQ9Im0gMzczLjI2NjY0LDI3My44Mjk5NyAxOC41OTg3NSwtODEuODMzOTkgYyAxLjM0Mjc4LC01LjkwODU3IC0zLjE0ODI1LC0xMS41MzUwNCAtOS4yMDc1MSwtMTEuNTM1MDQgSCAyMjguMTI0NiBsIC0zLjYwNjIsLTE3LjYyOTcyIGMgLTAuODk4NjEsLTQuMzk0MjYgLTQuNzY1MjUsLTcuNTQ5OTkgLTkuMjUwNzgsLTcuNTQ5OTkgaCAtNDAuMzM4MjcgYyAtNS4yMTQ5NCwwIC05LjQ0MjM4LDQuMjI3NDQgLTkuNDQyMzgsOS40NDIzOCB2IDYuMjk0OTQgYyAwLDUuMjE0OTQgNC4yMjc0NCw5LjQ0MjM5IDkuNDQyMzgsOS40NDIzOSBoIDI3LjQ5NDI3IGwgMjcuNjM3ODcsMTM1LjExODU0IGMgLTYuNjEyMDUsMy44MDI1MyAtMTEuMDY3NjcsMTAuOTMyMzEgLTExLjA2NzY3LDE5LjEwNzA2IDAsMTIuMTY4MDggOS44NjQxNCwyMi4wMzIyMyAyMi4wMzIyMywyMi4wMzIyMyAxMi4xNjgwOSwwIDIyLjAzMjIzLC05Ljg2NDE1IDIyLjAzMjIzLC0yMi4wMzIyMyAwLC02LjE2NjY3IC0yLjUzNjQ2LC0xMS43MzgwNyAtNi42MTkxMSwtMTUuNzM3MzEgaCA4Mi40ODE5NyBjIC00LjA4MjI2LDMuOTk5MjQgLTYuNjE4NzIsOS41NzA2NCAtNi42MTg3MiwxNS43MzczMSAwLDEyLjE2ODA4IDkuODY0MTYsMjIuMDMyMjMgMjIuMDMyMjQsMjIuMDMyMjMgMTIuMTY4MDgsMCAyMi4wMzIyMywtOS44NjQxNSAyMi4wMzIyMywtMjIuMDMyMjMgMCwtOC43MjMyIC01LjA3MDU2LC0xNi4yNjEzNyAtMTIuNDI0MjEsLTE5LjgzMDk3IGwgMi4xNzA1NywtOS41NTA5NyBjIDEuMzQyNzcsLTUuOTA4NTkgLTMuMTQ4MjUsLTExLjUzNTA2IC05LjIwNzUsLTExLjUzNTA2IEggMjUxLjMwMTMzIGwgLTIuNTc1MDIsLTEyLjU4OTg2IGggMTE1LjMzMjgyIGMgNC40MDg4MSwwIDguMjMwNjEsLTMuMDUwNjcgOS4yMDc1MSwtNy4zNDk3MSB6IiAvPgo8L3N2Zz4K" } } } }
Créer vos propres thèmes
Les champs du formulaire de paiement sont personnalisables via des directives CSS stantards. Il vous suffit de les appliquer, et elles seront automatiquement reportées, même sur les éléments contenus dans les iframes des champs sensibles.
Le client JavaScript, grâce à un système de champs cachés, récupèrera automatiquement les styles de votre page pour les reporter dans les iframes.