---
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: 🎨
createdAt: 2021-01-25T20:54:48.000Z
---

Suga 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`.

- `type`: Tipo de Tema a utilizar. Opciones: "light" ( Claro ) o "dark" ( Oscuro ).
- `showHeader`: Permite ocultar la cabecera del Checkout donde se visualiza el logo y nombre de la Entidad.
- `header`: Para utilizar los valores por defecto utilizar null o false.
  - `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.

### Ejemplo

```json
{
  "options": {
    "theme": {
      "type": "light",
      "background": "#0000FF",
      "showHeader": false,  // Si se oculta la cabecera con esta propiedad, no definir "header"
      "header": {
        "name": "Pepito el pistolero",
        "logo": "https://res.sugawat.com/images/icons/def_store.png"
       },
      "colors": {
        "primary": "#FF0000"
       }
    }
  }
}
```