Tema y controles compartidos
Configura los colores, la tipografía, las dimensiones, los bordes y el comportamiento de los campos compartidos por los widgets de checkout de DEUNA.
En esta página
Usa la theme para las decisiones visuales que deben mantenerse coherentes en todo el checkout. Configura estos valores predeterminados antes de añadir ajustes específicos para una pantalla.
Colores#
Define los fondos principal y secundario, el texto principal y los colores del botón principal. Todos los colores deben usar el formato HEX.
{
"theme": {
"colors": {
"primaryTextColor": "#323237",
"backgroundSecondary": "#FFFFFF",
"backgroundPrimary": "#FFFFFF",
"buttonPrimaryFill": "#17171A",
"buttonPrimaryHover": "#69696E",
"buttonPrimaryText": "#FFFFFF",
"buttonPrimaryActive": "#116C8E"
}
}
}tipografía#
Las tipografías compatibles son Heeb, Hind, Lato, Montserrat, Mukta, Nunito, Open Sans, Quicksand, Roboto, Raleway, San Franciscoy Ubuntu. Contacta a tu Technical Account Manager (TAM) de DEUNA antes de usar otra tipografía.
{
"theme": {
"typography": {
"primaryFontFamily": "Lato"
}
}
}Dimensiones de los controles#
Define borderRadius y height en píxeles. La altura predeterminada de los controles es 40px; usa valores de 30px a 60px para conservar la usabilidad.
{
"theme": {
"buttons": {
"borderRadius": "20px",
"height": "50px"
},
"inputs": {
"borderRadius": "50px",
"height": "50px"
}
}
}Bordes de los campos según el estado#
| Estado | Significado | Color predeterminado |
|---|---|---|
| Discapacitado | El cliente no puede editar el campo. | #B4B4B7 |
| Habilitado | El campo está disponible, pero aún no contiene datos. | #D9D9DB |
| Enfoque | El cliente está interactuando con el campo. | #404046 |
| Completado | El campo contiene datos válidos. | #8E8E92 |
| error | El campo no es válido o falta un valor obligatorio. | #E11900 |
{
"theme": {
"colors": {
"inputBorder": "#D9D9DB",
"inputBorderError": "#F1998E",
"inputEnhancerFill": "#1AE1D7",
"inputBorderPositive": "#66D19E"
}
}
}Comportamiento de los campos#
Configura inputMode funcione clearable para mostrar un control de restablecimiento, validated para mostrar iconos de éxito y error, o none para no mostrar ninguno. Los controles de restablecimiento y validación no se pueden activar al mismo tiempo.
{
"theme": {
"inputs": {
"inputMode": "clearable"
}
}
}Para consultar todos los campos y tipos compatibles, usa la referencia de propiedades de CustomStyle.