Customization of the layout for the embedded form
To align , horizontally , the fields of the embedded form, you can use the , Flexbox in CSS , with the property ,flex-direction, set to row.
The fields of the embedded form are enclosed in one or more containers:
<div class="flex-container">...</div>
Inside a parent DIV:
<div class="kr-embedded">...</div>
For more information, check out this link: CSS Flexbox (Flexible Box).
A presentation of the horizontal display of embedded fields:
You will find a code sample:
<head>
<!-- Javascript library. Should be loaded in head section -->
<script type="text/javascript"
src="https://static-sogecommerce.societegenerale.eu/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
kr-public-key="61881992:testpublickey_k7sM5cu1WTzkCCqU966agj3Ia3b04Pcsw4dZoeLVVUbc3:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5">
</script>
<!-- theme and plugins. should be loaded in the HEAD section -->
<link rel="stylesheet" href="https://static-sogecommerce.societegenerale.eu/static/js/krypton-client/V4.0/ext/classic-reset.min.css">
<script type="text/javascript" src="https://static-sogecommerce.societegenerale.eu/static/js/krypton-client/V4.0/ext/classic.js"></script>
<style type="text/css">
/* choice the embedded size */
.kr-embedded {
width: 33% !important;
}
/* CSS Flexbox (Flexible Box) */
.kr-embedded .flex-container {
display: flex;
flex-direction: row !important;
justify-content: center;
align-items: center;
}
/* to center the button with the class kr-payment-button */
.kr-embedded .kr-payment-button {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<!-- payment form -->
<div class="kr-embedded" kr-form-token="[GENERATED FORMTOKEN]">
<!--new flex-container class to indicate a flex-direction: row -->
<div class="flex-container">
<!-- payment form fields -->
<div class="kr-pan"></div>
<div class="kr-expiry"></div>
<div class="kr-security-code"></div>
</div>
<!-- payment form submit button -->
<button class="kr-payment-button"></button>
</div>
</body>Customization with an additional field: email
You will find an code sample by adding the e-mail field , as mandatory data.
<head>
<!-- Javascript library. Should be loaded in head section -->
<script type="text/javascript"
src="https://static-sogecommerce.societegenerale.eu/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
kr-public-key="61881992:testpublickey_k7sM5cu1WTzkCCqU966agj3Ia3b04Pcsw4dZoeLVVUbc3:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5">
</script>
<!-- theme and plugins. should be loaded in the HEAD section -->
<link rel="stylesheet" href="https://static-sogecommerce.societegenerale.eu/static/js/krypton-client/V4.0/ext/classic-reset.min.css">
<script type="text/javascript" src="https://static-sogecommerce.societegenerale.eu/static/js/krypton-client/V4.0/ext/classic.js"></script>
<link rel="stylesheet" id="extraStyleCDN" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.1.1/css/all.min.css">
<style type="text/css">
/* to choice the embedded size */
.kr-embedded {
width: 33% !important;
}
/* to use the CSS Flexbox (Flexible Box) */
.kr-embedded .flex-container {
flex-direction: row !important;
justify-content: space-between;
width: 100%;
display: flex;
gap: 5px;
}
/* to have the email field the same width as the KR fields */
.kr-embedded .flex-container .kr-email {
width: 100%;
}
/* to center the button with the class kr-payment-button */
.kr-embedded .kr-payment-button {
margin-left: auto;
margin-right: auto;
display: block;
width: 100%;
}
</style>
</head>
<body>
<!-- payment form -->
<div class="kr-embedded" kr-form-token="[GENERATED FORMTOKEN]">
<!--new flex-container class to indicate a flex-direction: row -->
<div class="flex-container">
<div class="kr-email">
<input type="text" name="acme-email" placeholder="email" class="kr-theme" kr-icon="fas fa-envelope" required/>
</div>
<div class="kr-pan"></div>
</div>
<!--new flex-container class to indicate a flex-direction: row -->
<div class="flex-container">
<div class="kr-expiry"></div>
<div class="kr-security-code"></div>
</div>
<!-- payment form submit button -->
<button class="kr-payment-button"></button>
</div>
</body>Customization in case of invalid data entry
You can customize the embedded form to warn the buyer in case of invalid data entry.
See the code sample provided on GitHub by clicking the link:
The code allows to display a warning message in red , below the erroneous embedded field.
