---
title: Personalización de la UI de Pago
slug: personalizacion-de-la-ui-de-pago
description: Learn how to customize your payment process with Mobbex. This detailed document offers step-by-step instructions for customizing your theme, such as choosing between light or dark themes, hiding or showing the header, and changing colors. Discover how to 
icon: 🎨
docTags: 
createdAt: 2021-01-25T20:54:48.000Z
---

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

- [Checkout](https://mobbex.dev/checkout)
- [Suscripciones](https://mobbex.dev/suscripciones)
- [Órdenes de Pago](https://mobbex.dev/ordenes-de-pago)

## 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

```json
{
  "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"
       }
    }
  }
}
```