Personalización de la UI de Pago
4 min
Mobbex le permite personalizar sus colores, logo y más del proceso de pago. Aqui le contamos cómo hacerlo!
Uso
Para personalizar la experiencia debe agregar el Object options.theme al Módulo de Cobro que utilice. Las disponibles hoy son:
Módulos
Opciones de Personalización
Estas opciones siempre deben ir dentro de options en el sub-nodo theme.
- branding: Permite configurar cuando mostrar logo y nombre entidad, dependiendo el dispositivo.
- auto: se muestran el logo y el texto unicamente en versión desktop.
- logo: se muestra el logo en versión mobile y en versión desktop.
- text: se muestra el nombre en versión mobile y en versión desktop.
- both: se muestran el logo y el texto en versión
- showHeader: Permite ocultar la cabecera del Checkout donde se visualiza el logo y nombre de la Entidad. Admite valores true o false.
- header:
- header.name: Nombre a mostrar en la cabecera del Checkout.
- header.logo: Logo a utilizar en la cabecera del Checkou. Sólo HTTPS.
- colors: Para utilizar la paleta por defecto establecer en null o false.
- primary: Color de Primario de la interfaz, utilizado en los botones principales y elementos del Checkout. Si no se especifica color de cabecera, el color primario tambien es utilizado en este sector. Sólo admite valores hexadecimales.
- paymentFlow: Permite personalizar la interfaz asociada al flujo del pago. Valores posibles: background, header
- background: define un color para la pantalla del pago. Solo admite valores hexadecimales
- header: define un color para la cabecera de la pantalla de pago. Sólo admite valores hexadecimales
Ejemplo
{
"options": {
"theme": {
"branding": "auto",
"background": "#0000FF",
"showHeader": false, // Si se oculta la cabecera con esta propiedad, no definir "header"
"header": {
"name": "Pepito el pistolero",
"logo": "https://res.mobbex.com/images/icons/def_store.png"
},
"colors": {
"primary": "#FF0000"
}
}
}
}