Personalice el diseño
Alineamiento horizontal
Para alinear horizontalmente los campos del formulario incrustado, utilice los Flexbox en CSS con el valor de la propiedad flex-direction establecido en row.
Los campos del formulario incrustado se posicionan en uno o varios contenedores:
<div class="flex-container">...</div>
Dentro de una DIV padre:
<div class="kr-smart-form">...</div>
Para más información CSS Flexbox (Flexible Box).
Ejemplo
Ejemplo de código
<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>Modo compacto
El modo compacto se utiliza para personalizar la visualización del modo lista y del modo lista con tarjeta incrustada.
En modo lista , los botones de los medios de pago se muestran en la misma línea (en pares).
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).
. Ejemplo de código:
<script type="text/javascript">
KR.onFormReady(function (){
KR.setFormConfig(
{
smartForm: { layout: 'compact' },
}
);
});
</script>En el **modo lista con tarjeta incrustada**, la fecha de expiración y el CVV aparecen en la misma línea.
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).
. Ejemplo de código:
<script type="text/javascript">
KR.onFormReady(function (){
KR.setFormConfig(
{
cardForm: { layout: 'compact' },
}
);
});
</script>Combinar el atributo cardForm y smartForm
Puede combinar los atributos cardForm y smartForm, si su tienda ofrece el pago con tarjeta y medios de pago compatibles.
. Ejemplo de código:
<script type="text/javascript">
KR.onFormReady(function (){
KR.setFormConfig(
{
cardForm: { layout: 'compact' },
smartForm: { layout: 'compact' },
}
);
});
</script>