Personalización del diseño del formulario incrustado
Para alinear horizontalmente los campos del formulario incrustado, puede utilizar 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-embedded">...</div>
Para más información, consulte el siguiente enlace: CSS Flexbox (Flexible Box).
Una presentación horizontal de los campos incrustados:
Podrá consultar un 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/classic-reset.min.css">
<script type="text/javascript" src="https://static.lyra.com/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>Personalización con un campo adicional: e-mail
Puede ver un ejemplo de código añadiendo el campo e-mail como dato obligatorio.
<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/classic-reset.min.css">
<script type="text/javascript" src="https://static.lyra.com/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>Personalización en caso de introducción de datos no válidos
El formulario incrustado puede personalizarse para que avise al comprador si se introducen datos no válidos.
Puede consultar un ejemplo de código en Github en el siguiente enlace:
El código permite mostrar un mensaje de advertencia en rojo debajo del campo incrustado que presenta el error.
