Personnaliser la taille et la police d'écriture
La taille de la police des champs embarqués
Adaptez la taille de la police des champs embarqués selon la taille de l'écran (largeur de la zone d'affichage, ...).
Le cas échéant, vous pouvez intégrer les requêtes média (media queries).
Exemple de code
<html>
(...)
<style type="text/css">
/*taille de l'écran 500 px max`*/
@media (max-width: 500px) {
.kr-smart-form .kr-input-field {
font-size: 16px !important;
}
}
</style>
(...)
</html>Pour changer la taille de la police de tous les champs embarqués de 13px (taille par défaut) à 16px si l'écran ne dépasse pas 500px , intégrez ce code :
<script>
$(document).ready(function() {
function applyFontSizeConfig() {
const fontSize = window.matchMedia('(max-width: 500px)').matches ? '16px !important': '13px !important';
const fields = ['pan', 'expiryDate', 'securityCode'];
const cssConfig = {}
fields.forEach(field = >{
cssConfig[field] = {
inputDefault: {
fontSize
}
}
})
KR.setFormConfig({
css: cssConfig
});
}
KR.onFormCreated(function() {
applyFontSizeConfig();
window.addEventListener('resize', applyFontSizeConfig);
});
});
</script>La police d'écriture
La police d'écriture du formulaire de paiement est personnalisable.
Exemple de code
<style type="text/css">
/*custom the font family : ‘cooper black`*/
.kr-smart-form .kr-input-field
{
font-family: 'Cooper Black' !important;
}
</style>Illustration avec la police d'écriture Cooper Black
