Thème et contrôles partagés
Configurez les couleurs, la typographie, les dimensions, les bordures et le comportement des champs communs aux widgets de checkout DEUNA.
Sur cette page
Utilisez la theme pour les choix visuels qui doivent rester cohérents dans tout le checkout. Configurez ces valeurs par défaut avant d'ajouter des remplacements propres à un écran.
Couleurs#
Définissez les arrière-plans principal et secondaire, le texte principal et les couleurs du bouton principal. Toutes les couleurs doivent utiliser le format HEX.
{
"theme": {
"colors": {
"primaryTextColor": "#323237",
"backgroundSecondary": "#FFFFFF",
"backgroundPrimary": "#FFFFFF",
"buttonPrimaryFill": "#17171A",
"buttonPrimaryHover": "#69696E",
"buttonPrimaryText": "#FFFFFF",
"buttonPrimaryActive": "#116C8E"
}
}
}Typographie#
Les polices prises en charge sont Heeb, Hind, Lato, Montserrat, Mukta, Nunito, Open Sans, Quicksand, Roboto, Raleway, San Franciscoet Ubuntu. Contactez votre Technical Account Manager (TAM) DEUNA avant d'utiliser une autre police.
{
"theme": {
"typography": {
"primaryFontFamily": "Lato"
}
}
}Dimensions des contrôles#
Définissez borderRadius et height en pixels. La hauteur par défaut des contrôles est 40px ; utilisez des valeurs comprises entre 30px et 60px pour préserver la facilité d'utilisation.
{
"theme": {
"buttons": {
"borderRadius": "20px",
"height": "50px"
},
"inputs": {
"borderRadius": "50px",
"height": "50px"
}
}
}Bordures des champs par état#
| État | Signification | Couleur par défaut |
|---|---|---|
| Désactivé | Le client ne peut pas modifier le champ. | #B4B4B7 |
| Activé | Le champ est disponible mais n'a encore reçu aucune saisie. | #D9D9DB |
| Actif | Le client interagit avec le champ. | #404046 |
| Renseigné | Le champ contient des données valides. | #8E8E92 |
| Erreur | Le champ n'est pas valide ou une valeur obligatoire est manquante. | #E11900 |
{
"theme": {
"colors": {
"inputBorder": "#D9D9DB",
"inputBorderError": "#F1998E",
"inputEnhancerFill": "#1AE1D7",
"inputBorderPositive": "#66D19E"
}
}
}Comportement des champs#
Renseignez inputMode à clearable pour afficher un contrôle de réinitialisation, validated pour afficher les icônes de réussite et d'erreur, ou none pour n'afficher aucun des deux. Les contrôles de réinitialisation et de validation ne peuvent pas être activés simultanément.
{
"theme": {
"inputs": {
"inputMode": "clearable"
}
}
}Pour tous les champs et types pris en charge, utilisez la référence des propriétés CustomStyle.