website logo
Consola de Desarrolladores
Navigate through spaces
⌘K
💪PRIMEROS PASOS
Primeros Pasos
🔥Integración Embebida
🕹️MÓDULOS
💸Checkout
🔗Link de Pago
🔁Suscripciones/Recurrencia
Métodos de Pago y Cuotas
🎁Fidelización
📜Códigos de Barra y QR
💾Tokenización de Tarjetas y Cuentas Bancarias - Wallet Transparent
✂️Marketplace y Split de pagos
🛒ECOMMERCE Y LIBRERIAS
E-Commerce
Cliente Desktop (CLI)
Marketplace
INFORMACION GENERAL
Tabla de Países
Cod. de Provincias Argentinas
📨Webhooks
💳Tarjetas de Prueba
💱Conversión de Monedas
SUSCRIPCIONES Y LIBRERIAS
Suscripciones
WooCommerce Suscriptions
MOBBEX AVANZADO
Mobbex.JS
🎨Personalización de la UI de Pago
Operatoria en 2 pasos
🔌 SDK
NodeJS
PHP
Windows
OPERACIONES
Consulta de Operaciones
Devoluciones
Códigos de Estado
Códigos de Estado por Estado de Orden
CONNECT
Dev Connect
📱Aplicaciones Móviles
🇺🇸English
💪First Steps
🔥Embedded Integration
🕹️Modules
💸Checkout
Docs powered by
Archbee
MOBBEX AVANZADO

Personalización de la UI de Pago

5min

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
  • Suscripciones
  • Órdenes 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.
    • 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": {
      "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.mobbex.com/images/icons/def_store.png"
       },
      "colors": {
        "primary": "#FF0000"
       }
    }
  }
}




Updated 03 Apr 2023
Did this page help you?
PREVIOUS
Mobbex.JS
NEXT
Operatoria en 2 pasos
Docs powered by
Archbee
TABLE OF CONTENTS
Uso
Módulos
Opciones de Personalización
Ejemplo
Docs powered by
Archbee