Personalización CustomStyle
Personalización de estilos mediante CustomStyle
Esta página proporciona información detallada sobre cómo editar la apariencia de la solución de pagos en DEUNA.
Puedes adaptar el diseño del widget según las necesidades específicas de tu marca o negocio.
Para ello:
- Identifica las vistas o elementos que desees personalizar.
- Modificá el archivo JSON de configuración incluyendo todos tus requerimientos de estilo (colores, fuentes, tamaños, textos, etc.).
La personalización te permite alinear visualmente la experiencia de pago con la identidad de tu producto.
Para mayor claridad, los ejemplos muestran el JSON por secciones. El entregable es un solo JSON con las secciones, para enviar todas las configuraciones deseadas.
Configuración de estilos básicos
Puedes cambiar colores y estilos básicos siguientes:
- Fondo
- Textos
- Botones.
Todo esto incluyendo los campos en el JSON.
Los colores se manejan en HEX.
{
"theme": {
"colors": {
"primaryTextColor": "#323237",
"backgroundSecondary": "#FFFFFF",
"backgroundPrimary": "#FFFFFF",
"buttonPrimaryFill": "#17171A",
"buttonPrimaryHover": "#69696E",
"buttonPrimaryText": "#FFFFFF",
"buttonPrimaryActive": "#5F529E"
}
}
}
Ejemplo
Vista OTP
La vista OTP (one-time-password) solicita al usuario ingresar un código de un solo uso enviado por email o SMS.
Personalizar elementos como:
- Encabezado
- Botones de cambio de canal
- Opción de continuar como invitado.
La vista de OTP es opcional.

{
"HeaderPattern": {
"overrides": {
"Logo": {
"props": {
"url":"https://live.staticflickr.com/6164/6144091654_cbc351c8e2_b.jpg",
"position": "center",
"style": {
"min-width": "150px"
}
}
}
}
},
"OtpPage": {
"overrides": {
"Headings": {
"props": {
"title": "Ingresa el código de verificación",
"description": "Para ver tus tarjetas guardadas ingresa el código enviado a"
}
},
"OtpChangeChannelButton": {
"props": {
"description": {
"sms": "Enviar código por correo",
"email": "Enviar código por SMS"
}
}
},
"ContinueAsGuestButton": {
"props": {
"description": "Continuar sin ingresar el código"
}
}
}
}
}
Ejemplo
Vista principal
La vista principal es donde los usuarios interactúan con los elementos principales.
Configurar y personaliza los siguientes patrones:
- Información de la tarjeta
- Términos y condiciones
- Botones de pago
El soporte de upper tag y lower tag no se encuentra disponible para Payment Link.

{
"CardInfoPattern": {
"title": "Pago con tarjeta de crédito o débit",
"subtitle": {
"content": "Ingresa los datos de tu tarjeta"
}
},
"CardPattern": {
"translations": {
"es": {
"inputs": {
"identityNumber": {
"label": "Número de documento"
},
"identityDocument": {
"label": {
"CO": "CO: Cédula / Doc de identidad",
"CL": "CL: RUT/DNI",
"EC": "EC: Cédula / Doc de identidad",
"MX": "MX: Otro documetnto",
"BR": "BR: CPF/ CNPJ del titular",
"AR": "AR: DNI / Doc de identidad",
"UY": "UY: Cédula / Doc de identidad"
}
},
"cardNumber": {
"label": "Número de tarjeta"
},
"cardHolder": {
"label": "Nombre en la tarjeta"
},
"installment": {
"label": "Selecciona las cuotas",
"withoutInstallments": "Sin cuotas"
}
}
}
}
},
"TermsConditionsPattern": {
"showForGuest": true,
"showForAuth": false,
"legalMessage": "Al continuar aceptas las",
"connectorText": "y",
"hideCompanyDisclaimer": false,
"termsAndConditionsUrl": "https://tusitio.com/terminos-y-condiciones",
"privacyPolicyUrl": "https://tusitio.com/politica-de-privacidad"
},
"PoweredByPattern": {
"url": "https://images-staging.getduna.com/checkout_modular/banco-azteca-powered-by-deuna.svg",
"hideText": true,
"hide": false,
"imageStyle": {
"filter": "none",
"width": "50px",
"height": "200px"
}
}
}
Ejemplo

Usuario autenticado
Esta vista se muestra una vez que el usuario ha sido autenticado, ya sea mediante un código OTP o de forma frictionless a través de nuestra tecnología de device fingerprinting.
En esta etapa, el usuario interactúa con sus tarjetas previamente guardadas.
Puedes configurar y personalizar los patrones de visualización y gestión de tarjetas, ajustando los elementos que desees mostrar, ocultar o estilizar según tus necesidades.
{
"UserCardPattern": {
"translations": {
"es": {
"addNewCard": {
"info": "Agregar una tarjeta"
},
"moreOptions": {
"payWith": "Tarjeta seleccionada"
},
"paymentMethods": {
"seeAllMyCards": "Ver tarjetas guardadas",
"expiredCard": "Tarjeta expirada",
"warningExpiredCard": "Selecciona un método de pago disponible",
"confirmDeleteMethodTitle": "Eliminar esta tarjeta",
"deleteMainText": "Eliminar",
"confirmDeleteMethodAccept": "Confirmar",
"confirmDeleteMethodCancel": "Cancelar",
"confirmDeleteMethod": "Ten en cuenta que al eliminarla no podrás restaurarla."
}
}
}
}
}
Ejemplo
Thank You Page
La vista de confirmación de pedido es la sección en la que los usuarios interactúan con los elementos finales del proceso.
Configura y personaliza los patrones de información relacionados con los estados del proceso de pago, así como el título de la página.
Además, detalla el proceso para personalizar los dos botones principales:
- Guardar comprobante
- Regresar al comercio

Ejemplo
"ThankYouView": {
"translations": {
"es": {
"thankYouPage": {
"status": {
"succeeded": "Thank You!!!!",
"pending": "pndxing",
"denied": "denied jlkhjkh"
}
}
}
},
"overrides": {
"Body": {
"props": {
"title": "Desde Custom Style"
}
},
"Actions": {
"props": {
"hideDownloadAction": false,
"hideBackToCommerceAction": false,
"downloadText": "Donload css",
"backText": "back text css"
}
}
}
}

Voucher page
Configurar y personaliza los patrones de información del voucher de pago generados por métodos de pago alternativos.
"VoucherPage": {
"SPEI": {
"overrides": {...}
},
"OXXO_PAY": {
"overrides": {...}
},
"PAYU_EFECTY": {
"overrides": {...}
},
"BAZ": {
"overrides": {...}
}
}
Tabla de vouchers
Propiedad | Objeto | Descripción |
---|---|---|
VoucherPage.{PROCESSOR_NAME}.overrides.Header.props.title | string | Título personalizado para la página. |
VoucherPage.{PROCESSOR_NAME}.overrides.Header.props.subtitle | string | Subtítulo personalizado para la página. |
VoucherPage.{PROCESSOR_NAME}.overrides.Header.props.description | string | Descripción personalizada para la página. |
VoucherPage.{PROCESSOR_NAME}.overrides.Header.props.referenceTitle | string | Titulo de la referencia personalizada para la página. |
VoucherPage.{PROCESSOR_NAME}.overrides.Header.props.payBefore | string | Texto de la fecha de pago personalizada para la página. |
VoucherPage.{PROCESSOR_NAME}.overrides.Footer.props.seeOrderSummay | string | Texto que define la descripción para el botón de ir al resumen de la orden. |
VoucherPage.{PROCESSOR_NAME}.overrides.Footer.props.downloadReference | string | Texto que define la descripción para el botón de descargar referencia. |
VoucherPage.{PROCESSOR_NAME}.overrides.Footer.props.showPoweredByDeuna | boolean | Define si la sección PoweredBy esta visible o no. |
Ejemplo de configuración de VoucherPage para OXXO.
"VoucherPage": {
"OXXO_PAY": {
"overrides": {
"Header": {
title: "Pago con OXXO"
},
"Footer": {
"downloadReference": "Descargar Voucher"
}
}
}
}
Tipografias
DEUNA soporta una selección de tipografías diseñadas para complementar el diseño:
- Roboto: Moderna y técnica, ideal para interfaces versátiles.
- Montserrat: Geométrica y sofisticada, combina bien con Poppins.
- Open Sans: Fácil de leer y ampliamente adoptada en la industria.
- Lato: Suave y limpia, con un toque amigable.
- Nunito: Redondeada y cálida, perfecta para experiencias accesibles.
- Heebo: Moderna y funcional, con líneas claras.
- Raleway: Elegante y minimalista, ideal para títulos destacados.
- Quicksand: Juvenil y moderna, para diseños frescos.
- Ubuntu: Con un toque único, aporta personalidad sin comprometer la claridad.
- Mukta: Simple y profesional, una alternativa sobria a Poppins.
- Hind: Optimizada para pantallas, combina formas geométricas con excelente legibilidad.
- San Francisco: La tipografía oficial de Apple, diseñada para dispositivos iOS.
Contacta a tu TPM para implementar una tipografía propia.
{
"theme": {
"typography": {
"primaryFontFamily": "Lobster"
}
}
}
Ejemplo
Radios: inputs y botones
Personaliza el radio de bordes para los inputs y botones con píxeles (px).
Esto te brinda un control más preciso sobre el diseño de tus componentes.
{
"theme": {
"inputs": {
"borderRadius": "50px"
},
"buttons": {
"borderRadius": "20px"
}
}
}
Ejemplo
Estructura completa CustomStyle
El archivo CSSStyleFile contiene la configuración de estilos para el widget y el vault.
Ejemplo de un JSON válida para CustomStyle
{
"theme": {
"colors": {
"primaryTextColor": "#323237",
"backgroundSecondary": "#FFFFFF",
"backgroundPrimary": "#FFFFFF",
"buttonPrimaryFill": "#17171A",
"buttonPrimaryHover": "#69696E",
"buttonPrimaryText": "#FFFFFF",
"buttonPrimaryActive": "#5F529E"
},
"typography": {
"primaryFontFamily": "Lobster"
},
"inputs": {
"borderRadius": "50px",
},
"buttons": {
"borderRadius": "20px"
}
},
"HeaderPattern": {
"overrides": {
"Logo": {
"props": {
"url":"https://live.staticflickr.com/6164/6144091654_cbc351c8e2_b.jpg",
"position": "center",
"style": {
"min-width": "150px"
}
}
}
}
},
"OtpPage": {
"overrides": {
"Header": {
"props": {
"overrides": {
"Logo": {
"props": {
"url": "https://live.staticflickr.com/6164/6144091654_cbc351c8e2_b.jpg"
}
}
}
}
},
"Headings": {
"props": {
"title": "Ingresa el código de verificación",
"description": "Para ver tus tarjetas guardadas ingresa el código enviado a"
}
},
"OtpChangeChannelButton": {
"props": {
"description": {
"sms": "Enviar código por correo",
"email": "Enviar código por SMS"
}
}
},
"ContinueAsGuestButton": {
"props": {
"description": "Continuar sin ingresar el código"
}
}
}
},
"CardInfoPattern": {
"title": "Pago con tarjeta de crédito o débito",
"subtitle": {
"content": "Ingresa los datos de tu tarjeta"
}
},
"CardPattern": {
"translations": {
"es": {
"inputs": {
"identityNumber": {
"label": "Número de documento"
},
"identityDocument": {
"label": {
"CO": "CO: Cédula / Doc de identidad",
"CL": "CL: RUT/DNI",
"EC": "EC: Cédula / Doc de identidad",
"MX": "MX: Otro documento",
"BR": "BR: CPF/ CNPJ del titular",
"AR": "AR: DNI / Doc de identidad",
"UY": "UY: Cédula / Doc de identidad"
}
},
"cardNumber": {
"label": "Número de tarjeta"
},
"cardHolder": {
"label": "Nombre en la tarjeta"
},
"installment": {
"label": "Selecciona las cuotas",
"withoutInstallments": "Sin cuotas"
}
}
}
}
},
"TermsConditionsPattern": {
"showForGuest": true,
"showForAuth": false,
"legalMessage": "Al continuar aceptas las",
"connectorText": "y",
"hideCompanyDisclaimer": false,
"termsAndConditionsUrl": "https://tusitio.com/terminos-y-condiciones",
"privacyPolicyUrl": "https://tusitio.com/politica-de-privacidad"
},
"PaymentButtonPattern": {
"label": "Pagar",
"showOrderTotal": true,
"styles": {
"padding": "10px 20px",
"borderRadius": "25px"
}
},
"PoweredByPattern": {
"url": "https://images-staging.getduna.com/checkout_modular/banco-azteca-powered-by-deuna.svg",
"hideText": true,
"hide": false,
"imageStyle": {
"filter": "none",
"width": "50px",
"height": "200px"
}
},
"UserCardPattern": {
"translations": {
"es": {
"addNewCard": {
"info": "Agregar una tarjeta"
},
"moreOptions": {
"payWith": "Tarjeta seleccionada"
},
"paymentMethods": {
"seeAllMyCards": "Ver tarjetas guardadas",
"expiredCard": "Tarjeta expirada",
"warningExpiredCard": "Selecciona un método de pago disponible",
"confirmDeleteMethodTitle": "Eliminar esta tarjeta",
"deleteMainText": "Eliminar",
"confirmDeleteMethodAccept": "Confirmar",
"confirmDeleteMethodCancel": "Cancelar",
"confirmDeleteMethod": "Ten en cuenta que al eliminarla no podrás restaurarla."
}
}
}
}
}
Definición de las propiedades
A continuación, se presenta una descripción detallada de los componentes editables y personalizables:
Propiedad | Objeto | Descripción |
---|---|---|
theme | Objeto | Objeto que define la configuración global del tema para colores y estilos. |
theme.typography.primaryFontFamily | String | Define la tipografia de los widgets. |
theme.colors.primaryTextColor | String | Color primario del texto. |
theme.colors.backgroundSecondary | String | Color de fondo en la vista de OTP. |
theme.colors.backgroundPrimary | String | Color de fondo en la vista principal. |
theme.colors.buttonPrimaryFill | String | Color de relleno del botón principal. |
theme.colors.buttonPrimaryHover | String | Color de relleno del botón principal al pasar el cursor. |
theme.colors.buttonPrimaryText | String | Color del texto del botón principal. |
theme.colors.buttonPrimaryActive | String | Color de relleno del botón principal al hacer clic. |
HeaderPattern | Objeto | Objeto que define sobrescrituras para el encabezado. |
HeaderPattern.overrides | Objeto | Contiene sobrescrituras específicas para componentes del encabezado. |
HeaderPattern.overrides.Logo | Objeto | Objeto que define propiedades para el componente del logo. |
HeaderPattern.overrides.Logo.props.url | String | URL del logo que se mostrará en el encabezado. |
HeaderPattern.overrides.Logo.props.style | String | Define el tamaño del logo. |
HeaderPattern.overrides.Logo.props.position | String | Define con que alineación mostar el logo, izqquierada o centro. |
CardInfoPattern | Objeto | Objeto que define la información de la tarjeta. |
CardInfoPattern.title | String | Título de la sección de información de la tarjeta. |
CardInfoPattern.subtitle.content | String | Contenido del subtítulo. |
UpperTagPattern | Objeto | Objeto que define una etiqueta superior personalizada. |
UpperTagPattern.title | String | Título de la etiqueta superior. |
UpperTagPattern.description | String | Descripción de la etiqueta superior. |
UpperTagPattern.iconColor | String | Color del icono de la etiqueta superior. |
UpperTagPattern.style | Objeto | Estilo de la etiqueta superior, como color(color de texto), box-shadow, margin-top y backgroundColor. |
UserCardPattern | Objeto | Objeto que define traducciones y configuraciones para la gestión de tarjetas de usuario. |
UserCardPattern.translations.es | Objeto | Traducciones al español para componentes de gestión de tarjetas de usuario. |
UserCardPattern.translations.es.addNewCard.info | String | Texto para la opción "Agregar nueva tarjeta". |
UserCardPattern.translations.es.moreOptions.payWith | String | Texto para la opción "Pagar con". |
UserCardPattern.translations.es.paymentMethods.seeAllMyCards | String | Texto para ver todas las tarjetas guardadas. |
UserCardPattern.translations.es.paymentMethods.expiredCard | String | Texto que indica una tarjeta expirada. |
UserCardPattern.translations.es.paymentMethods.warningExpiredCard | String | Mensaje de advertencia para seleccionar un método de pago válido. |
UserCardPattern.translations.es.paymentMethods.confirmDeleteMethodTitle | String | Título para el modal de confirmación de eliminación de una tarjeta. |
UserCardPattern.translations.es.paymentMethods.deleteMainText | String | Texto principal para la opción de eliminar. |
UserCardPattern.translations.es.paymentMethods.confirmDeleteMethodAccept | String | Texto para el botón de aceptar en la confirmación de eliminación. |
UserCardPattern.translations.es.paymentMethods.confirmDeleteMethodCancel | String | Texto para el botón de cancelar en la confirmación de eliminación. |
UserCardPattern.translations.es.paymentMethods.confirmDeleteMethod | String | Mensaje indicando que la eliminación es irreversible. |
CardPattern | Objeto | Objeto que define traducciones y configuraciones para campos de entrada de tarjeta. |
CardPattern.translations.es.inputs.identityNumber.label | String | Etiqueta personalizada para el campo del número de identidad. |
CardPattern.translations.es.inputs.identityDocument.label | Objeto | Etiquetas personalizadas para los documentos de identidad en diferentes países. |
CardPattern.translations.es.inputs.identityDocument.label.CO | String | Etiqueta para Colombia: Cédula / Doc de identidad. |
CardPattern.translations.es.inputs.identityDocument.label.CL | String | Etiqueta para Chile: RUT/DNI. |
CardPattern.translations.es.inputs.identityDocument.label.EC | String | Etiqueta para Ecuador: Cédula / Doc de identidad. |
CardPattern.translations.es.inputs.identityDocument.label.MX | String | Etiqueta para México: Número de RFC. |
CardPattern.translations.es.inputs.identityDocument.label.BR | String | Etiqueta para Brasil: CPF/CNPJ del titular. |
CardPattern.translations.es.inputs.identityDocument.label.AR | String | Etiqueta para Argentina: DNI / Doc de identidad. |
CardPattern.translations.es.inputs.identityDocument.label.UY | String | Etiqueta para Uruguay: Cédula / Doc de identidad. |
CardPattern.translations.es.inputs.cardNumber.label | String | Etiqueta personalizada para el campo del número de tarjeta. |
cardHolder | Objeto | Objeto que define la etiqueta para el campo del nombre del titular de la tarjeta. |
cardHolder.label | String | Etiqueta personalizada para el campo del nombre del titular de la tarjeta. |
installment | Objeto | Objeto que define la etiqueta para el campo de cuotas. |
installment.label | String | Etiqueta personalizada para el campo de cuotas. |
installment.withoutInstallments | String | Texto para indicar que no hay cuotas. |
LowerTagPattern | Objeto | Objeto que define una etiqueta inferior personalizada. |
LowerTagPattern.title | String | Título de la etiqueta inferior. |
LowerTagPattern.description | String | Descripción de la etiqueta inferior. |
LowerTagPattern.iconColor | String | Color del icono de la etiqueta inferior. |
LowerTagPattern.style | Objeto | Estilo de la etiqueta superior, como color(color de texto), box-shadow y backgroundColor. |
TermsConditionsPattern | Objeto | Objeto que define la configuración de los términos y condiciones. |
TermsConditionsPattern.showForGuest | Boolean | Indica si se muestran los términos y condiciones para usuarios invitados. |
TermsConditionsPattern.showForAuth | Boolean | Indica si se muestran los términos y condiciones para usuarios autenticados. |
TermsConditionsPattern.legalMessage | String | Mensaje legal personalizado. |
TermsConditionsPattern.connectorText | String | Texto conector en los términos y condiciones. |
TermsConditionsPattern.hideCompanyDisclaimer | Boolean | Indica si se oculta la exención de responsabilidad de la empresa. |
TermsConditionsPattern.termsAndConditionsUrl | string | Define la URL que se utilizará como hipervínculo para los Términos y Condiciones que verá el usuario. |
TermsConditionsPattern.privacyPolicyUrl | string | Define la URL que se utilizará como hipervínculo para la Política de Privacidad que verá el usuario. |
PaymentButtonPattern | Objeto | Objeto que define la etiqueta, estilo y configuración del botón de pago. |
PaymentButtonPattern.label | String | Texto para el botón de pago. |
PaymentButtonPattern.showOrderTotal | Boolean | Indica si se muestra el total del pedido en el formulario. |
PaymentButtonPattern.styles | Objeto | Estilo del botón de pago, como el padding y el radio del borde. |
PaymentButtonPattern.styles.padding | String | Padding del botón de pago. |
PaymentButtonPattern.styles.borderRadius | String | Radio de borde del botón de pago. |
PoweredByPattern | Objeto | Objeto que define estilo y configuración del disclaimer Power by DEUNA. |
PoweredByPattern.hide | Boolean | Indica si se oculta la marca "Powered by DEUNA". |
PoweredByPattern.hidetext | Boolean | Indica si se oculta la marca "Powered by". |
PoweredByPattern.url | String | URL del logo que se mostrará en Power by. |
PoweredByPattern.imageStyle | Objeto | Estilo del logo de Power By, width y height. |
OtpPage | Objeto | Objeto que define sobrescrituras para la página de OTP. |
OtpPage.overrides | Objeto | Contiene sobrescrituras específicas para componentes de la página de OTP. |
OtpPage.overrides.Header | Objeto | Objeto que define sobrescrituras relacionadas con el encabezado para la página de OTP. |
OtpPage.overrides.Header.props | Objeto | Propiedades para el encabezado, como la URL del logo. |
OtpPage.overrides.Header.props.url | String | URL del logo que se mostrará en la página de OTP. |
OtpPage.overrides.Headings | Objeto | Objeto que define el título y la descripción para la página de OTP. |
OtpPage.overrides.Headings.title | String | Título personalizado para la página de OTP. |
OtpPage.overrides.Headings.description | String | Texto descriptivo para la página de OTP. |
OtpPage.overrides.OtpChangeChannelButton | Objeto | Objeto que define la descripción para el botón de cambio de canal OTP. |
OtpPage.overrides.OtpChangeChannelButton.description | Objeto | Descripciones para enviar OTP por SMS o correo electrónico. |
OtpPage.overrides.OtpChangeChannelButton.description.sms | String | Descripción personalizada para enviar OTP por SMS. |
OtpPage.overrides.OtpChangeChannelButton.description.email | String | Descripción personalizada para enviar OTP por correo electrónico. |
OtpPage.overrides.ContinueAsGuestButton | Objeto | Objeto que define la descripción para el botón "continuar como invitado". |
OtpPage.overrides.ContinueAsGuestButton.description | String | Texto descriptivo para continuar como invitado. |
Updated about 14 hours ago