Personalize the page layout
Horizontal alignment
To align , horizontally , the fields of the embedded form, use the , Flexbox in CSS , with the ,flex-direction property, 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-smart-form">...</div>
For more information CSS Flexbox (Flexible Box).
Example
Code sample
<head>
<!-- Javascript library. Should be loaded in head section -->
<script type="text/javascript"
src="https://static.lyra.com/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
kr-public-key="69876357:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5">
</script>
<!-- theme and plugins. should be loaded in the HEAD section -->
<link rel="stylesheet" href="https://static.lyra.com/static/js/krypton-client/V4.0/ext/neon-reset.min.css">
<script type="text/javascript" src="https://static.lyra.com/static/js/krypton-client/V4.0/ext/neon.js"></script>
<style type="text/css">
/*choice the size*/
.kr-smart-form {
width: 33% !important;
}
/*to choice the size of the embedded form*/
.kr-smart-form .kr-embedded {
width: 100% !important;
}
/*to use the CSS Flexbox (Flexible Box)*/
.kr-smart-form .kr-embedded .flex-container {
flex-direction: row !important;
display: flex;
}
/*tocenter the button*/
.kr-smart-form .kr-embedded .kr-payment-button {
margin-left: auto;
margin-right: auto;
width: 100% !important;
}
</style>
</head>
<body>
<div class="kr-smart-form" kr-card-form-expanded kr-form-token="[GENERATED FORMTOKEN]">
<div class="kr-embedded">
<div class="flex-container">
<div class="kr-pan">
</div>
<div class="kr-expiry">
</div>
<div class="kr-security-code">
</div>
</div>
<button class="kr-payment-button">
</button>
</div>
</div>
</body>Compact mode
The compact mode is used for customizing the display of the list mode and of the list mode with embedded card.
In list mode , the payment method buttons are displayed in the same row (in pairs).
Intégez l'attribut smartForm: { layout: 'compact' } en utilisant les fonctions KR.onFormReady() et KR.setFormConfig(), dans le header de votre page de paiement (plus de détails, consultez les fonctions JS).
. Code sample:
<script type="text/javascript">
KR.onFormReady(function (){
KR.setFormConfig(
{
smartForm: { layout: 'compact' },
}
);
});
</script>In list mode with embedded card , the expiration date and CVV are displayed on the same line.
Intégrez l'attribut cardForm: { layout: 'compact' } en utilisant les fonctions KR.onFormReady() et KR.setFormConfig(), dans le header de votre page de paiement (plus de détails, consultez les fonctions JS).
. Code sample:
<script type="text/javascript">
KR.onFormReady(function (){
KR.setFormConfig(
{
cardForm: { layout: 'compact' },
}
);
});
</script>Combine the attributes ,cardForm, and smartForm
You can combine the attributes cardForm and smartForm if your shop allows payments by card and with compatible payment methods.
. Code sample:
<script type="text/javascript">
KR.onFormReady(function (){
KR.setFormConfig(
{
cardForm: { layout: 'compact' },
smartForm: { layout: 'compact' },
}
);
});
</script>