Thèmes
Le formulaire embarqué 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 formulaire embarqué, ou en mode pop-in.
Thème classic
classic est le thème par défaut. 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" />
<!-- Javascript library. Should be loaded in head section -->
<script
src="https://static.systempay.fr/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
kr-public-key="73239078:testpublickey_Zr3fXIKKx0mLY9YNBQEan42ano2QsdrLuyb2W54QWmUJQ"
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.systempay.fr/static/js/krypton-client/V4.0/ext/classic-reset.css">
<script
src="https://static.systempay.fr/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>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;?>">
Le résultat sera :
Il est possible de personnaliser l'image et le nom de la boutique de la pop-in. Pour plus d'informations, consultez : Référence du client JavaScript
Thème material design
Le thème material applique les guidelines définis par Google. Les fichiers associés sont les suivants :
| fichiers | description |
|---|---|
| material-reset.css | Applique le thème material en forçant les styles (!important) |
| material.css | Applique le thème material en tenant compte des styles de la page |
| material.js | Partie active du thème classic |
Exemple de thème material:
Exemple de code pour afficher le thème 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>Thème material (pop-in)
Vous pouvez également afficher le thème material dans une pop-in en ajoutant l'attribut kr-popin :
<div class="kr-embedded" kr-popin kr-form-token="<?php echo $formToken;?>">
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.