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.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 NEON should be loaded in the HEAD section   -->
<link rel="stylesheet" href="https://static.systempay.fr/static/js/krypton-client/V4.0/ext/neon-reset.min.css">
<script src="https://static.systempay.fr/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.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 NEON should be loaded in the HEAD section   -->
<link rel="stylesheet" href="https://static.systempay.fr/static/js/krypton-client/V4.0/ext/classic-reset.min.css">
<script src="https://static.systempay.fr/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 :

/doc/fr-FR/rest/V4.0/api/kb/authentication.html

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

https://api.systempay.fr/api-payment/V4/Charge/CreatePayment

  <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.

Catégories

Tags