Personalizar o layout
Alinhamento horizontal
Para alinhar, horizontalemente , os campos do formulário incorporado, use , Flexbox em CSS , com a propriedade flex-direction valorizada a row.
Os campos de formulário incorporado são colocados em um ou mais contêineres:
<div class="flex-container">...</div>
Dentro de uma DIV parent:
<div class="kr-smart-form">...</div>
Para maiores informações CSS Flexbox (Flexible Box).
Exemplo
Exemplo 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
O modo compacto é usado para personalizar a 'exibição do modo de lista e do modo de lista com cartão incorporado.
No modo lista , os botões de meios de pagamento são exibidos na mesma linha (em 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).
. Exemplo de código:
<script type="text/javascript">
KR.onFormReady(function (){
KR.setFormConfig(
{
smartForm: { layout: 'compact' },
}
);
});
</script>No modo lista com cartão incorporado , a data de expiração e o CVV aparecem na mesma linha.
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).
. Exemplo de código:
<script type="text/javascript">
KR.onFormReady(function (){
KR.setFormConfig(
{
cardForm: { layout: 'compact' },
}
);
});
</script>Combine o, cardForm e smartForm
Pode-se associar os atributos cardForm e smartForm, se sua loja tiver o pagamento por cartão e meios de pagamento compatíveis.
. Exemplo de código:
<script type="text/javascript">
KR.onFormReady(function (){
KR.setFormConfig(
{
cardForm: { layout: 'compact' },
smartForm: { layout: 'compact' },
}
);
});
</script>