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.micuentaweb.pe/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" kr-public-key="89289758:testpublickey_TxzPjl9xKlhM0a6tfSVNilcLTOUZ0ndsTogGTByPUATcE:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5"> </script> <!-- theme and plugins. should be loaded in the HEAD section --> <link rel="stylesheet" href="https://static.micuentaweb.pe/static/js/krypton-client/V4.0/ext/neon-reset.min.css"> <script type="text/javascript" src="https://static.micuentaweb.pe/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> <div class="flex-container"> <div class="kr-identity-document-type"> </div> <div class="kr-identity-document-number"> </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>