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 is the default theme. The associated files are:
files | description |
---|---|
classic-reset.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://api.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://api.systempay.fr/static/js/krypton-client/V4.0/ext/classic-reset.css"> <script src="https://api.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>
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.
The material theme applies the guidelines defined by Google. The associated files are:
files | description |
---|---|
material-reset.css | Applies the material theme by forcing the styles (!important). |
material.css | Applies the material theme while taking into account the styles of the page. |
material.js | Active part of the classic theme. |
Example of material theme:

Example of code for displaying the 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>
You can also display the material theme in a pop-in by adding the kr-popin attribute:
<div class="kr-embedded" kr-popin kr-form-token="<?php echo $formToken;?>">
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.css | Applies minimal CSS to guarantee that the form works properly. |
The embedded form (as well as the pop-in) applies the styles in 2 steps:
- By loading a CSS file (e.g. classic-reset.css) in the header of the page.
- Afterwards, the theme is refined thanks to a configuration object (included in classic.js).
This file allows to reserve the space and apply a minimal style to the form before JavaScript is loaded and executed.
It is recommended to always load this CSS file in the header of the page. classic-reset.css, or no-theme.css are two examples of the provided initial CSS files.
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.
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). |
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" } } } }
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.
The "Pay" button is placed in the container.<div class="kr-embedded">
The style of the "Pay" button is defined by the classkr-payment-button.
To override the color of the "Pay" button, it is recommended to define the new style in the <HEAD> tag of your payment page, just after the theme and the JavaScript code are loaded.
Here is an example using the css rule!important
.
<head> <!-- Javascript library. Should be loaded in head section --> <script type="text/javascript" src="https://api.systempay.fr/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" kr-public-key="73239078:testpublickey_Zr3fXIKKx0mLY9YNBQEan42ano2QsdrLuyb2W54QWmUJQ:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5"> </script> <!-- theme and plugins. should be loaded in the HEAD section --> <link rel="stylesheet" href="https://api.systempay.fr/static/js/krypton-client/V4.0/ext/classic-reset.css"> <script type="text/javascript" src="https://api.systempay.fr/static/js/krypton-client/V4.0/ext/classic.js"></script> <!-- Overrride payment button background color --> <style type="text/css"> .kr-embedded .kr-payment-button { background-color: #00D152 !important; } </style> </head> <body> ... </body>