Documentación

Personalización CustomStyle

Suggest Edits

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

PropiedadObjetoDescripción
VoucherPage.{PROCESSOR_NAME}.overrides.Header.props.titlestringTítulo personalizado para la página.
VoucherPage.{PROCESSOR_NAME}.overrides.Header.props.subtitlestringSubtítulo personalizado para la página.
VoucherPage.{PROCESSOR_NAME}.overrides.Header.props.descriptionstringDescripción personalizada para la página.
VoucherPage.{PROCESSOR_NAME}.overrides.Header.props.referenceTitlestringTitulo de la referencia personalizada para la página.
VoucherPage.{PROCESSOR_NAME}.overrides.Header.props.payBeforestringTexto de la fecha de pago personalizada para la página.
VoucherPage.{PROCESSOR_NAME}.overrides.Footer.props.seeOrderSummaystringTexto que define la descripción para el botón de ir al resumen de la orden.
VoucherPage.{PROCESSOR_NAME}.overrides.Footer.props.downloadReferencestringTexto que define la descripción para el botón de descargar referencia.
VoucherPage.{PROCESSOR_NAME}.overrides.Footer.props.showPoweredByDeunabooleanDefine 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