Themes

The embedded form includes 2 ready-to-use themes. Each theme requires for corresponding CSS and JS files to be loaded.

The CSS theme file allows to apply a basic theme while waiting for the payment form to finish loading. This is particularly important on devices with slow connection. It must always be placed in the header of the page.

The JS theme file contains the active part of the theme (animations, styles, elements, etc.). It must be loaded before the main JavaScript library.

Each of these themes can be used in list mode with embedded card, or in pop-in mode.

Neon theme

neon is the default theme. The associated files are:

files	description
neon-reset.min.css	Applies the neon theme by forcing the styles (!important).
neon.css	Applies the neon theme while taking into account the styles of the page.
neon.js	Active part of the neon theme

Example of neon theme:

Code sample for displaying the neon theme:

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

Classic theme

The associated files are:

files	description
classic-reset.min.css	Applies the classic theme by forcing the styles (!important).
classic.css	Applies the classic theme while taking into account the styles of the page.
classic.js	Active part of the classic theme.

Example of classic theme:

Example of code for displaying the classic theme:

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

The result will be:

Classic theme (pop-in)

You can also display the classic theme in a pop-in by adding the kr-popin attribute:

/doc/en-EN/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

Material theme (not compatible)

Form without a theme

If you want to create a custom theme, it is recommended to include the no-theme-css CSS. It ensures minimum compatibility with all browsers (desktop and mobile) on the market :

files	description
no-theme.min.css	Applies minimal CSS to guarantee that the form works properly.

Customizing a theme

The embedded form (as well as the pop-in) applies the styles in 2 steps:

by loading a CSS file (e.g. classic-reset.min.css) in the header of the page.
Afterwards, the theme is refined thanks to a configuration object (included in classic.js).

The initial CSS file

This file allows to reserve the space and apply a minimal style to the form before JavaScript is loaded and executed.

We recommend always loading this CSS file in the page header. classic-reset.min.css , or no-theme.min.css are two examples of the initial CSS files provided.

The configuration object

JavaScript theme files (such as classic.js or material.js ) contain a configuration object that defines the whole theme: animations, styles, HTML elements.

The only difference between the classic, material, embedded or pop-in forms is in this configuration object.

The configuration object reference

PARAMETER	Type	Description
form.fields.order	string list	Default field order (if not included), such as ["pan", "securityCode", "expiry"].
form.controls.order	string list	Default controls order (if not included) such as ["formButton", "error"].
form.layout	string	Payment form layout: default or compact.
merchant.header.image.src	string	Image url or data:image (type supported by CSS).
merchant.header.image.type	string	Background (occupies the entire header) or logo (round centered logo).
merchant.header.image.visibility	boolean	True/false: if false, the image is hidden.
merchant.header.shopName.color	string	Color of shop name. Example: ‘red’ (CSS attribute).
merchant.header.shopName.gradient	boolean	True/false: applies (or not) a gradient in the header.
merchant.header.backgroundColor	string	Background color of the header. Example: ‘red’ (CSS attribute).

Examples of configuration of the pop-in header

The configuration object must be passed as follows:

let config = {
  "merchant": {
    "header": {
      "image": {
        "visibility": false
      }
    }
  }
};

KR.setFormConfig(config);

Here are some examples of configuration of the pop-in header.

Change the logo:

{
  "merchant": {
    "header": {
      "image": {
        "type": "logo",
        "visibility": true,
        "src": "<https://www.logomoose.com/wp-content/uploads/2018/02/logomoosedogandowl-011.jpg>"
      }
    }
  }
}

Pass an image in string format:

{
  "merchant": {
    "header": {
      "image": {
        "type": "background",
        "visibility": true,
        "src": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDU3NiA1MTIiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTEwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzOCIgLz4KICA8cGF0aAogICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOjAuMzkzNDMyNjgiCiAgICAgaWQ9InBhdGgyIgogICAgIGQ9Im0gMzczLjI2NjY0LDI3My44Mjk5NyAxOC41OTg3NSwtODEuODMzOTkgYyAxLjM0Mjc4LC01LjkwODU3IC0zLjE0ODI1LC0xMS41MzUwNCAtOS4yMDc1MSwtMTEuNTM1MDQgSCAyMjguMTI0NiBsIC0zLjYwNjIsLTE3LjYyOTcyIGMgLTAuODk4NjEsLTQuMzk0MjYgLTQuNzY1MjUsLTcuNTQ5OTkgLTkuMjUwNzgsLTcuNTQ5OTkgaCAtNDAuMzM4MjcgYyAtNS4yMTQ5NCwwIC05LjQ0MjM4LDQuMjI3NDQgLTkuNDQyMzgsOS40NDIzOCB2IDYuMjk0OTQgYyAwLDUuMjE0OTQgNC4yMjc0NCw5LjQ0MjM5IDkuNDQyMzgsOS40NDIzOSBoIDI3LjQ5NDI3IGwgMjcuNjM3ODcsMTM1LjExODU0IGMgLTYuNjEyMDUsMy44MDI1MyAtMTEuMDY3NjcsMTAuOTMyMzEgLTExLjA2NzY3LDE5LjEwNzA2IDAsMTIuMTY4MDggOS44NjQxNCwyMi4wMzIyMyAyMi4wMzIyMywyMi4wMzIyMyAxMi4xNjgwOSwwIDIyLjAzMjIzLC05Ljg2NDE1IDIyLjAzMjIzLC0yMi4wMzIyMyAwLC02LjE2NjY3IC0yLjUzNjQ2LC0xMS43MzgwNyAtNi42MTkxMSwtMTUuNzM3MzEgaCA4Mi40ODE5NyBjIC00LjA4MjI2LDMuOTk5MjQgLTYuNjE4NzIsOS41NzA2NCAtNi42MTg3MiwxNS43MzczMSAwLDEyLjE2ODA4IDkuODY0MTYsMjIuMDMyMjMgMjIuMDMyMjQsMjIuMDMyMjMgMTIuMTY4MDgsMCAyMi4wMzIyMywtOS44NjQxNSAyMi4wMzIyMywtMjIuMDMyMjMgMCwtOC43MjMyIC01LjA3MDU2LC0xNi4yNjEzNyAtMTIuNDI0MjEsLTE5LjgzMDk3IGwgMi4xNzA1NywtOS41NTA5NyBjIDEuMzQyNzcsLTUuOTA4NTkgLTMuMTQ4MjUsLTExLjUzNTA2IC05LjIwNzUsLTExLjUzNTA2IEggMjUxLjMwMTMzIGwgLTIuNTc1MDIsLTEyLjU4OTg2IGggMTE1LjMzMjgyIGMgNC40MDg4MSwwIDguMjMwNjEsLTMuMDUwNjcgOS4yMDc1MSwtNy4zNDk3MSB6IiAvPgo8L3N2Zz4K"
      }
    }
  }
}

Creating you own themes

The payment form fields are customizable via standard CSS directives. All you need to do is apply them and they will be automatically transferred, even for the elements contained in the iframes of sensitive fields.

Thanks to a system of hidden fields, the JavaScript client will automatically retrieve the styles of your page and include them in iframes.

Categories

Tags