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 embedded form mode or in pop-in mode.
Classic theme
Classic is the default 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" />
<!-- 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>Classic theme (pop-in)
You can also display the classic theme in a pop-in by adding the kr-popin attribute:
<div class="kr-embedded" kr-popin kr-form-token="<?php echo $formToken;?>">
The result will be:
It is possible to personalize the image and the name of the shop appearing in the pop-in. For more information, go to: JavaScript client reference.
Material Design theme
Material Theme applies the guidelines defined by Google. The associated files are:
| files | description |
|---|---|
| material-reset.css | Applies Material Theme by forcing styles (!important). |
| material.css | Applies Material Theme while respecting the styles of the page. |
| material.js | Active part of the classic theme. |
Example of Material Theme:
Example of code for displaying Material 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" />
<!-- 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>Material Theme (pop-in)
You can also display Material Theme in a pop-in by adding the kr-popin attribute:
<div class="kr-embedded" kr-popin kr-form-token="<?php echo $formToken;?>">
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.