Propiedades de estilo personalizado
Consulte los objetos CustomStyle compatibles, las rutas de propiedades, los tipos de valores y sus efectos en los widgets de DEUNA.
En esta página
Utilice esta página como referencia de campos al construir un CustomStyle objeto. Las propiedades se agrupan según la parte del widget que afectan, para que pueda revisar una área de implementación a la vez.
Tema y controles compartidos#
| Propiedad | Tipo | Descripción |
|---|---|---|
theme | Object | Configuración global de color, tipografía, campos de entrada y botones. |
theme.typography.primaryFontFamily | String | Fuente principal para widgets. |
theme.colors.primaryTextColor | String | Color del texto principal. |
theme.colors.backgroundSecondary | String | Color de fondo secundario, por ejemplo, en la vista de OTP. |
theme.colors.backgroundPrimary | String | Color de fondo primario. |
theme.colors.buttonPrimaryFill | String | Color de relleno del botón principal. |
theme.colors.buttonPrimaryHover | String | Color del botón principal al pasar el cursor. |
theme.colors.buttonPrimaryActive | String | Color del botón principal al estar activo. |
theme.colors.inputBorder | String | Color del borde de la entrada en el estado predeterminado. |
theme.colors.inputBorderError | String | Color del borde de la entrada en el estado de error. |
theme.colors.inputEnhancerFill | String | Color de fondo del potenciador de la entrada en el estado de enfoque. |
theme.colors.inputBorderPositive | String | Color del borde de la entrada en el estado de éxito. |
theme.buttons.borderRadius | String | Radio de borde para botones. |
theme.inputs.borderRadius | String | Radio del borde para campos de entrada. |
theme.inputs.inputMode | String | Comportamiento de entrada: validated, clearableo none. |
Encabezado y contenido contextual#
| Propiedad | Tipo | Descripción |
|---|---|---|
HeaderPattern | Object | Sobreescrituras del componente de encabezado. |
HeaderPattern.overrides | Object | Contiene las sobreescrituras del componente de encabezado. |
HeaderPattern.overrides.Logo | Object | Configuración del componente de logotipo. |
HeaderPattern.overrides.Logo.props.url | String | URL del logotipo que se muestra en el encabezado. |
HeaderPattern.overrides.Logo.props.style | Object | Dimensiones e estilos en línea para el logotipo. |
HeaderPattern.overrides.Logo.props.position | String | Alineación del logotipo: left o center. |
CardInfoPattern | Object | Contenido de información de tarjeta. |
CardInfoPattern.title | String | Título de la sección de información de la tarjeta. |
CardInfoPattern.subtitle.content | String | Contenido de subtítulo. |
UpperTagPattern | Object | Etiqueta informativa que se muestra debajo del encabezado del widget. |
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 | Object | Estilos como color de texto, sombra de la caja, margen superior y color de fondo. |
LowerTagPattern | Object | Etiqueta informativa que se muestra sobre el texto legal y el botón de pago. |
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 | Object | Estilos como color de texto, sombra de la caja y color de fondo. |
Tarjetas guardadas#
| Propiedad | Tipo | Descripción |
|---|---|---|
UserCardPattern | Object | Traducciones y configuraciones para la gestión de tarjetas guardadas. |
UserCardPattern.translations.en | Object | Traducciones al inglés para los componentes de tarjetas guardadas. |
UserCardPattern.translations.en.addNewCard.info | String | Texto para la opción "añadir nueva tarjeta". |
UserCardPattern.translations.en.moreOptions.payWith | String | Texto para la opción "pagar con". |
UserCardPattern.translations.en.paymentMethods.seeAllMyCards | String | Texto para ver todas las tarjetas guardadas. |
UserCardPattern.translations.en.paymentMethods.expiredCard | String | Texto que indica una tarjeta caducada. |
UserCardPattern.translations.en.paymentMethods.warningExpiredCard | String | Advertencia que solicita al cliente seleccionar un método de pago válido. |
UserCardPattern.translations.en.paymentMethods.confirmDeleteMethodTitle | String | Título de confirmación de eliminación de tarjeta. |
UserCardPattern.translations.en.paymentMethods.deleteMainText | String | Texto principal para la acción de eliminación. |
UserCardPattern.translations.en.paymentMethods.confirmDeleteMethodAccept | String | Texto del botón de confirmación. |
UserCardPattern.translations.en.paymentMethods.confirmDeleteMethodCancel | String | Texto del botón de cancelación. |
UserCardPattern.translations.en.paymentMethods.confirmDeleteMethod | String | Mensaje que explica que la eliminación es irreversible. |
Formulario de método de pago#
| Propiedad | Tipo | Descripción |
|---|---|---|
PaymentMethodsPattern | Object | Traducciones y configuraciones para los campos de entrada de método de pago. |
PaymentMethodsPattern.translations.inputs.card.cardNumber.label | String | Etiqueta del campo de número de tarjeta. |
PaymentMethodsPattern.translations.en.inputs.card.cardNumber.placeholder | String | Indicación del campo de número de tarjeta. |
PaymentMethodsPattern.translations.en.inputs.card.cardHolder.label | String | Etiqueta del campo de nombre del titular de la tarjeta. |
PaymentMethodsPattern.translations.en.inputs.card.cardHolder.placeholder | String | Indicación del campo de nombre del titular de la tarjeta. |
PaymentMethodsPattern.translations.en.inputs.card.expirationDate.label | String | Etiqueta del campo de fecha de vencimiento. |
PaymentMethodsPattern.translations.en.inputs.card.expirationDate.placeholder | String | Indicación del campo de fecha de vencimiento. |
PaymentMethodsPattern.translations.en.inputs.card.securityCode.label | String | Etiqueta del campo de código de seguridad. |
PaymentMethodsPattern.translations.en.inputs.card.installment.label | String | Etiqueta del campo de número de cuotas. |
PaymentMethodsPattern.translations.en.inputs.card.installment.pay_by | String | Texto que introduce el número de cuotas. |
PaymentMethodsPattern.translations.en.inputs.card.installment.first_pay | String | Texto del primer pago. |
PaymentMethodsPattern.translations.es.inputs.card.installment.without_interest | String | Texto de "sin intereses". |
PaymentMethodsPattern.translations.en.inputs.card.installment.without_installments | String | Texto de "sin cuotas". |
PaymentMethodsPattern.translations.en.inputs.card.installment.loading | String | Texto que se muestra mientras se validan las cuotas. |
PaymentMethodsPattern.translations.en.inputs.paymentMethods.info.card.title | String | Título del formulario de tarjeta personalizado. |
PaymentMethodsPattern.translations.en.inputs.paymentMethods.info.card.subtitle | String | Subtítulo del formulario de tarjeta personalizado. |
cardHolder | Object | Configuración del campo de nombre del titular de la tarjeta. |
cardHolder.label | String | Etiqueta del campo de nombre del titular de la tarjeta personalizado. |
installment | Object | Etiquetas de los campos de cuotas. |
installment.label | String | Etiqueta del campo de cuotas personalizado. |
installment.withoutInstallments | String | Texto que se muestra cuando las cuotas no están disponibles. |
Texto legal y acción de pago#
| Propiedad | Tipo | Descripción |
|---|---|---|
TermsConditionsPattern | Object | Configuración de términos y privacidad. |
TermsConditionsPattern.showForGuest | Boolean | Mostrar el texto legal a usuarios invitados. |
TermsConditionsPattern.showForAuth | Boolean | Mostrar el texto legal a usuarios autenticados. |
TermsConditionsPattern.legalMessage | String | Mensaje legal personalizado. |
TermsConditionsPattern.connectorText | String | Conector entre enlaces legales. |
TermsConditionsPattern.hideCompanyDisclaimer | Boolean | Ocultar la exención de responsabilidad de la empresa. |
TermsConditionsPattern.termsAndConditionsUrl | String | URL de los Términos y Condiciones. |
TermsConditionsPattern.privacyPolicyUrl | String | URL de la política de privacidad. |
PaymentButtonPattern | Object | Configuración de etiquetas, contenido y estilo del botón de pago. |
PaymentButtonPattern.label | String | Texto del botón de pago. |
PaymentButtonPattern.showOrderTotal | Boolean | Mostrar el total del pedido en el formulario de pago. |
PaymentButtonPattern.styles | Object | Estilos del botón de pago. |
PaymentButtonPattern.styles.padding | String | Relleno del botón de pago. |
PaymentButtonPattern.styles.borderRadius | String | Radio de borde del botón de pago. |
PoweredByPattern | Object | Configuración del aviso "Powered by". |
PoweredByPattern.hide | Boolean | Ocultar la marca "Powered by DEUNA". |
PoweredByPattern.hidetext | Boolean | Ocultar el texto "Powered by". |
PoweredByPattern.url | String | URL del logotipo de reemplazo. |
PoweredByPattern.imageStyle | Object | Dimensiones y estilos del logotipo de reemplazo. |
Páginas de resultado#
| Propiedad | Tipo | Descripción |
|---|---|---|
ThankYouView | Object | Traducciones y configuraciones de la página de "Gracias". |
ThankYouView.translations.en.thankYouPage.status.succeeded | String | Mensaje que se muestra después de un pago exitoso. |
ThankYouView.translations.en.thankYouPage.status.pending | String | Mensaje que se muestra mientras el pago está pendiente. |
ThankYouView.translations.en.thankYouPage.status.denied | String | Mensaje que se muestra después de un pago rechazado. |
ThankYouView.overrides.Body.props.title | String | Título del cuerpo de la página de "Gracias". |
ThankYouView.overrides.Actions.props.hideDownloadAction | Boolean | Ocultar la acción de descarga de la factura. |
ThankYouView.overrides.Actions.props.hideBackToCommerceAction | Boolean | Ocultar la acción de volver a la tienda. |
ThankYouView.overrides.Actions.props.downloadText | String | Texto del botón de descarga de la factura. |
ThankYouView.overrides.Actions.props.backText | String | Texto del botón de volver a la tienda. |
VoucherPage | Object | Configuración de la página de vales para métodos de pago alternativos. |
VoucherPage.apmName.overrides.Header.props.title | String | Título de la cabecera del vale. |
VoucherPage.apmName.overrides.Header.props.subtitle | String | Subtítulo de la cabecera del vale. |
VoucherPage.apmName.overrides.Header.props.referenceTitle | String | Etiqueta de referencia de pago. |
VoucherPage.apmName.overrides.Header.props.payBefore | String | Texto de la fecha límite de pago. |
VoucherPage.apmName.overrides.Footer.props.downloadReference | String | Texto del botón de descarga del vale. |
VoucherPage.apmName.overrides.Footer.props.showPoweredByDeuna | Boolean | Mostrar la etiqueta "Powered by DEUNA". |
Vista del código de verificación#
| Propiedad | Tipo | Descripción |
|---|---|---|
OtpPage | Object | Sobreescrituras del componente de página de OTP. |
OtpPage.overrides | Object | Contiene opciones de personalización para el componente OTP. |
OtpPage.overrides.Header | Object | Opciones de configuración para el encabezado OTP. |
OtpPage.overrides.Header.props | Object | Propiedades del encabezado OTP. |
OtpPage.overrides.Header.props.url | String | URL del logotipo que se muestra en la página OTP. |
OtpPage.overrides.Headings | Object | Configuración del encabezado OTP. |
OtpPage.overrides.Headings.title | String | Título de la página OTP. |
OtpPage.overrides.Headings.description | String | Descripción de la página OTP. |
OtpPage.overrides.OtpChangeChannelButton | Object | Configuración del botón "Cambiar de canal". |
OtpPage.overrides.OtpChangeChannelButton.description | Object | Descripciones de los canales SMS y correo electrónico. |
OtpPage.overrides.OtpChangeChannelButton.description.sms | String | Descripción del canal SMS. |
OtpPage.overrides.OtpChangeChannelButton.description.email | String | Descripción del canal de correo electrónico. |
OtpPage.overrides.ContinueAsGuestButton | Object | Configuración del botón "Continuar como invitado". |
OtpPage.overrides.ContinueAsGuestButton.description | String | Descripción del botón "Continuar como invitado". |
Información de facturación#
| Propiedad | Tipo | Descripción |
|---|---|---|
BillingPatternX | Object | Estructura de entrada de datos de facturación y traducciones. |
BillingPatternX.translations.en.title | String | Título de la sección de facturación. |
BillingPatternX.translations.en.addBillingData.error | String | Error de datos de facturación faltantes. |
BillingPatternX.translations.en.addBillingData.optionalTag | String | Etiqueta para campos opcionales. |
BillingPatternX.translations.en.addBillingData.title | String | Título "Añadir información de facturación". |
BillingPatternX.translations.en.billingSummary.dni | String | Etiqueta de documento en el resumen de facturación. |
BillingPatternX.translations.en.billingSummary.update | String | Texto "Actualizar información". |
BillingPatternX.translations.en.billingView.cancel | String | Texto "Cancelar". |
BillingPatternX.translations.en.billingView.save | String | Texto "Guardar". |
BillingPatternX.translations.en.billingView.title | String | Título para la entrada de datos de facturación. |
BillingPatternX.translations.en.billingWithSameData.title | String | Texto "Usar los mismos datos de facturación". |
BillingPatternX.translations.en.inputs.companyBilling.label | String | Etiqueta "Entidad legal". |
BillingPatternX.translations.en.inputs.companyBilling.name.label | String | Etiqueta "Nombre de la empresa". |
BillingPatternX.translations.en.inputs.companyBilling.activity.label | String | Etiqueta "Actividad comercial". |
BillingPatternX.translations.en.inputs.companyBilling.address.label | String | Etiqueta "Dirección fiscal". |
BillingPatternX.translations.en.inputs.companyBilling.city.label | String | Etiqueta "Ciudad". |
BillingPatternX.translations.es.inputs.companyBilling.email.label | String | Etiqueta "Correo electrónico". |
BillingPatternX.translations.en.inputs.companyBilling.identityDocument.label | String | Etiqueta "Registro fiscal". |
BillingPatternX.translations.en.inputs.companyBilling.phone.label | String | Etiqueta "Teléfono de contacto". |
BillingPatternX.translations.en.inputs.personBilling.label | String | Etiqueta para identificación de persona física. |
BillingPatternX.translations.en.inputs.personBilling.firstName.label | String | Etiqueta para el nombre. |
BillingPatternX.translations.en.inputs.personBilling.lastName.label | String | Etiqueta para el apellido. |
BillingPatternX.translations.en.inputs.personBilling.city.label1 | String | Etiqueta para ciudad alternativa. |
BillingPatternX.translations.en.inputs.personBilling.stateName.label1 | String | Etiqueta para provincia. |
BillingPatternX.translations.en.inputs.personBilling.zipCode.label | String | Etiqueta para código postal. |
BillingPatternX.translations.en.inputs.errors.inputRequired | String | Mensaje de error para campo obligatorio. |
BillingPatternX.translations.en.inputs.errors.invalidEmail | String | Mensaje de error para correo electrónico inválido. |
BillingPatternX.translations.en.inputs.personBilling.identityDocument.label.AR | String | Etiqueta para documento de identidad argentino. |
BillingPatternX.translations.en.inputs.personBilling.identityDocument.invalidByCountry.AR | String | Mensaje de error para documento de identidad argentino inválido. |
Información del usuario#
| Propiedad | Tipo | Descripción |
|---|---|---|
UserInfoPattern | Object | Estructura de entrada de información del cliente y traducciones. |
UserInfoPattern.title | String | Título de la sección de información del cliente. |
UserInfoPattern.translations.inputs.email.label | String | Etiqueta para el campo de correo electrónico. |
UserInfoPattern.translations.en.inputs.firstName.label | String | Etiqueta para el campo de nombre. |
UserInfoPattern.translations.en.inputs.lastName.label | String | Etiqueta para el campo de apellido. |
UserInfoPattern.translations.en.inputs.phone.label | String | Etiqueta para el campo de teléfono. |
UserInfoPattern.translations.en.inputs.identityDocument.label.CO | String | Etiqueta para documento de identidad colombiano. |
UserInfoPattern.translations.en.inputs.identityDocument.label.CL | String | Etiqueta para documento de identidad chileno. |
UserInfoPattern.translations.en.inputs.identityDocument.label.EC | String | Etiqueta para documento de identidad ecuatoriano. |
UserInfoPattern.translations.en.inputs.identityDocument.label.MX | String | Etiqueta para documento de identidad mexicano. |
UserInfoPattern.translations.en.inputs.identityDocument.label.BR | String | Etiqueta para documento de identidad brasileño. |
UserInfoPattern.translations.en.inputs.identityDocument.label.AR | String | Etiqueta para documento de identidad argentino. |
UserInfoPattern.translations.es.inputs.identityDocument.label.UY | String | Etiqueta para documento de identidad uruguayo. |