Propiedades de estilo personalizado
Definiciones de propiedad
A continuación se muestra una descripción detallada de los componentes editables y personalizables:
| Propiedad | Object | Descripción |
|---|---|---|
| tema | Object | Objeto que define la configuración global del tema para colores y estilos. |
| theme.typography.primaryFontFamily | String | Fuente principal para widgets. |
| theme.colors.primaryTextColor | String | Color primario del texto. |
| theme.colors.backgroundSecondary | String | Color de fondo secundario (por ejemplo, en la vista 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 mouse. |
| theme.colors.buttonPrimaryActive | String | Color del botón principal al hacer clic. |
| theme.colors.inputBorder | String | Color del borde de entrada en estado predeterminado. |
| theme.colors.inputBorderError | String | Color del borde de entrada en estado de error. |
| theme.colors.inputEnhancerFill | String | Color de fondo de la entrada cuando está enfocada (activa). |
| theme.colors.inputBorderPositive | String | Color del borde de la entrada cuando se realiza correctamente. |
| theme.buttons.borderRadius | String | Radio de borde para botones. |
| theme.inputs.borderRadius | String | Radio del borde para campos de entrada. |
| theme.inputs.inputMode | String | Modo de entrada: validado (validador iconográfico), borrable (restablecimiento de texto) o ninguno. |
| Patrón de encabezado | Object | Objeto que define anulaciones para el encabezado. |
| HeaderPattern.overrides | Object | Contiene anulaciones específicas para componentes de encabezado. |
| HeaderPattern.overrides.Logo | Object | Objeto que define propiedades para el componente del logotipo. |
| 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 qué alineación mostrar el logotipo, izquierda o centro. |
| TarjetaInfoPatrón | Object | 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. |
| Patrón de etiqueta superior | Object | Objeto que define una etiqueta superior personalizada y 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 | Estilo de la etiqueta superior, como color (color del texto), sombra del cuadro, margen superior y color de fondo. |
| Patrón de tarjeta de usuario | Object | Objeto que define traducciones y configuraciones para la gestión de tarjetas de usuario. |
| UserCardPattern.translations.en | Object | Traducciones al español para componentes de gestión de tarjetas de usuario. |
| UserCardPattern.translations.en.addNewCard.info | String | Texto para la opción "Agregar nueva tarjeta". |
| UserCardPattern.translations.en.moreOptions.payWith | String | Texto para la opción "Pagar con". |
| UserCardPattern.translations.en.paymentMethods.seeAllMyCards | String | Envía un mensaje de 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 | Mensaje de advertencia para seleccionar un método de pago válido. |
| UserCardPattern.translations.en.paymentMethods.confirmDeleteMethodTitle | String | Título del método de confirmación de eliminación de la tarjeta. |
| UserCardPattern.translations.en.paymentMethods.deleteMainText | String | Texto principal para la opción de eliminar. |
| UserCardPattern.translations.en.paymentMethods.confirmDeleteMethodAccept | String | Texto para el botón aceptar en la confirmación de eliminación. |
| UserCardPattern.translations.en.paymentMethods.confirmDeleteMethodCancel | String | Texto para el botón cancelar en la confirmación de eliminación. |
| UserCardPattern.translations.en.paymentMethods.confirmDeleteMethod | String | Mensaje indicando que la eliminación es irreversible. |
| PaymentMethodsPattern | Object | Objeto que define traducciones y configuraciones para campos de entrada relacionados con métodos de pago. |
| PaymentMethodsPattern.translations.inputs.card.cardNumber.label | String | Etiqueta para el campo del número de tarjeta: "Número de tarjeta". |
| PaymentMethodsPattern.translations.en.inputs.card.cardNumber.placeholder | String | Texto de ayuda para el campo número de tarjeta: "0000 0000 0000 0000 0000 0000". |
| PaymentMethodsPattern.translations.en.inputs.card.cardHolder.label | String | Etiqueta para el campo de nombre del titular de la tarjeta: "Nombre tal como aparece en la tarjeta". |
| PaymentMethodsPattern.translations.en.inputs.card.cardHolder.placeholder | String | Texto de ayuda para el campo del nombre del titular de la tarjeta: "por ejemplo, Juan Zapata". |
| PaymentMethodsPattern.translations.en.inputs.card.expirationDate.label | String | Etiqueta para el campo de fecha de vencimiento: "Fecha de vencimiento". |
| PaymentMethodsPattern.translations.en.inputs.card.expirationDate.placeholder | String | Texto de ayuda para la fecha de vencimiento: "MM/AA". |
| PaymentMethodsPattern.translations.en.inputs.card.securityCode.label | String | Etiqueta para código de seguridad: "CVV". |
| PaymentMethodsPattern.translations.en.inputs.card.installment.label | String | Etiqueta para el campo de tarifa: "Tarifas". |
| PaymentMethodsPattern.translations.en.inputs.card.installment.pay_by | String | Texto para indicar pago a plazos: "Paga en" Texto para indicar pago a plazos: "Paga en". |
| PaymentMethodsPattern.translations.en.inputs.card.installment.first_pay | String | Texto para indicar primer pago: "Primer pago". |
| PaymentMethodsPattern.translations.es.inputs.card.installment.without_interest | String | Texto para indicar sin interés: "Sin interés". |
| PaymentMethodsPattern.translations.en.inputs.card.installment.without_installments | String | Texto a indicar sin cuotas: "Sin cuotas". |
| PaymentMethodsPattern.translations.en.inputs.card.installment.loading | String | Texto que se muestra durante la validación de cuotas: "Validando cuotas..." Texto para indicar que no hay cuota: "Sin cuota |
| PaymentMethodsPattern.translations.en.inputs.paymentMethods.info.card.title | String | Título personalizado para la tarjeta: "Título personalizado". |
| PaymentMethodsPattern.translations.en.inputs.paymentMethods.info.card.subtitle | String | Subtítulo personalizado para la tarjeta: "Subtítulo personalizado". |
| cardHolder | Object | Objeto que define la etiqueta para el campo de nombre del titular de la tarjeta. |
| cardHolder.label | String | Etiqueta personalizada para el campo de nombre del titular de la tarjeta. |
| pago a plazos | Object | Objeto que define la etiqueta para el campo de cuota. |
| installment.label | String | Etiqueta personalizada para el campo de pago a plazos. |
| installment.withoutInstallments | String | Texto para indicar que no hay cuotas. |
| Patrón de etiqueta inferior | Object | Objeto que define una etiqueta inferior personalizada y se muestra en el área inferior del widget encima de los términos y condiciones 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 | Estilo de la etiqueta superior, como color (color del texto), sombra del cuadro y color de fondo. |
| TermsConditionsPattern | Object | Objeto que define la configuración de términos y condiciones. |
| TermsConditionsPattern.showForGuest | Boolean | Indica si se muestran términos y condiciones para los 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 del conector en los términos y condiciones. |
| TermsConditionsPattern.hideCompanyDisclaimer | Boolean | Indica si el aviso legal de la empresa está oculto. |
| 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 | Object | 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 el total del pedido se muestra en el formulario. |
| PaymentButtonPattern.styles | Object | Estilos del botón de pago, como relleno y radio del borde. |
| PaymentButtonPattern.styles.padding | String | Relleno del botón de pago. |
| PaymentButtonPattern.styles.borderRadius | String | Radio del borde del botón de pago. |
| Desarrollado por patrón | Object | Objeto que define el estilo y configuración del aviso legal Power by DEUNA. |
| PoweredByPattern.hide | Boolean | Indica si el flag "Powered by DEUNA" está oculto. |
| PoweredByPattern.hidetext | Boolean | Indica si el indicador "Desarrollado por" está oculto. |
| PoweredByPattern.url | String | URL del logotipo que se mostrará en Power by. |
| PoweredByPattern.imageStyle | Object | Estilo del logo de Power By, ancho y alto. |
| GraciasVer | Object | Objeto que define traducciones y configuraciones para la vista de agradecimiento después de un pago. |
| ThanksYouView.translations.en.thankYouPage.status.succeeded | String | Mensaje mostrado cuando el pago fue exitoso. |
| ThankYouView.translations.en.thankYouPage.status.pending | String | Mensaje que se muestra mientras se procesa el pago. |
| ThankYouView.translations.en.thankYouPage.status.denied | String | Mensaje mostrado cuando se denegó el pago. |
| ThankYouView.overrides.Body.props.title | String | Título que se muestra en el cuerpo de la vista de agradecimiento. |
| ThankYouView.overrides.Actions.props.hideDownloadAction | Boolean | Define si se oculta la opción de descargar el recibo. |
| ThankYouView.overrides.Actions.props.hideBackToCommerceAction | Boolean | Define si se oculta la opción de regresar a la tienda. |
| ThankYouView.overrides.Actions.props.downloadText | String | Texto del botón para guardar el recibo. |
| ThankYouView.overrides.Actions.props.backText | String | Texto del botón para volver a la tienda. |
| Página de vales | Object | Objeto que define la configuración de la página del comprobante para diferentes métodos de pago. |
| VoucherPage.apmName.overrides.Header.props.title | String | Título principal que se muestra en el encabezado del bono para OXXO. |
| VoucherPage.apmName.overrides.Header.props.subtitle | String | Subtítulo que indica la acción para presentar el código en tienda. |
| VoucherPage.apmName.overrides.Header.props.referenceTitle | String | Texto que identifica el campo de referencia del pago. |
| VoucherPage.apmName.overrides.Header.props.payBefore | String | Plazo para realizar el pago. |
| VoucherPage.OapmName.overrides.Footer.props.downloadReference | String | Texto del botón para descargar el bono. |
| VoucherPage.apmName.overrides.Footer.props.showPoweredByDeuna | Boolean | Indica si se muestra la etiqueta "Powered by Deuna". |
| OtpPágina | Object | Objeto que define anulaciones para la página OTP. |
| OtpPage.overrides | Object | Contiene anulaciones específicas de componentes de la página OTP. |
| OtpPage.overrides.Header | Object | Objeto que define anulaciones relacionadas con el encabezado para la página OTP. |
| OtpPage.overrides.Header.props | Object | Propiedades del encabezado, como la URL del logotipo. |
| OtpPage.overrides.Header.props.url | String | URL del logotipo que se mostrará en la página OTP. |
| OtpPage.overrides.Headings | Object | Objeto que define el título y la descripción de la página OTP. |
| OtpPage.overrides.Headings.title | String | Título personalizado para la página OTP. |
| OtpPage.overrides.Headings.description | String | Texto descriptivo de la página OTP. |
| OtpPage.overrides.OtpChangeChannelButton | Object | Objeto que define la descripción del botón de cambio de canal OTP. |
| OtpPage.overrides.OtpChangeChannelButton.description | Object | 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 | Object | Objeto que define la descripción del botón "continuar como invitado". |
| OtpPage.overrides.ContinueAsGuestButton.description | String | Texto descriptivo para continuar como invitado. |
| Patrón de facturaciónX | Object | Objeto que define la estructura de entrada de los datos de facturación. |
| BillingPatternX.translations.en.title | String | Título principal de la sección de facturación. |
| BillingPatternX.translations.en.addBillingData.error | String | Mensaje de error al no completar los datos de facturación. |
| BillingPatternX.translations.en.addBillingData.optionalTag | String | Etiqueta para indicar campos no obligatorios. |
| BillingPatternX.translations.en.addBillingData.title | String | Título para agregar información de facturación. |
| BillingPatternX.translations.en.billingSummary.dni | String | Etiqueta para documento en resumen de facturación. |
| BillingPatternX.translations.en.billingSummary.update | String | Texto para modificar la información. |
| BillingPatternX.translations.en.billingView.cancel | String | Texto para cancelar la acción. |
| BillingPatternX.translations.en.billingView.save | String | Envía un mensaje de texto para guardar los cambios de facturación. |
| BillingPatternX.translations.en.billingView.title | String | Título para la vista de entrada de datos de facturación. |
| BillingPatternX.translations.en.billingWithSameData.title | String | Envía un mensaje de texto para utilizar los mismos datos de facturación. |
| BillingPatternX.translations.en.inputs.companyBilling.label | String | Etiqueta para la entidad jurídica. |
| BillingPatternX.translations.en.inputs.companyBilling.name.label | String | Etiqueta para el nombre de la empresa. |
| BillingPatternX.translations.en.inputs.companyBilling.activity.label | String | Etiqueta por giro de negocio o actividad. |
| BillingPatternX.translations.en.inputs.companyBilling.address.label | String | Etiqueta para dirección fiscal. |
| BillingPatternX.translations.en.inputs.companyBilling.city.label | String | Etiqueta para ciudad. |
| BillingPatternX.translations.es.inputs.companyBilling.email.label | String | Etiqueta para correo electrónico. |
| BillingPatternX.translations.en.inputs.companyBilling.identityDocument.label | String | Etiqueta para registro fiscal. |
| BillingPatternX.translations.en.inputs.companyBilling.phone.label | String | Etiqueta para número de teléfono de contacto. |
| BillingPatternX.translations.en.inputs.personBilling.label | String | Etiqueta para 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 apellido. |
| BillingPatternX.translations.en.inputs.personBilling.city.label1 | String | Etiqueta alternativa 1 para ciudad. |
| 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 para el campo requerido. |
| BillingPatternX.translations.en.inputs.errors.invalidEmail | String | Mensaje para correo electrónico no válido. |
| BillingPatternX.translations.en.inputs.personBilling.identityDocument.label.AR | String | Etiqueta para documento de identidad del país (Argentina). |
| BillingPatternX.translations.en.inputs.personBilling.identityDocument.invalidByCountry.AR | String | Error por país: ID no válido (Argentina). |
| Patrón de información de usuario | Object | Objeto que define la estructura de entrada para los datos del usuario. |
| UserInfoPattern.title | String | Título personalizado para la sección de datos del usuario. |
| UserInfoPattern.translations.inputs.email.label | String | Etiqueta personalizada para el campo de correo electrónico. |
| UserInfoPattern.translations.en.inputs.firstName.label | String | Etiqueta personalizada para el campo de nombre. |
| UserInfoPattern.translations.en.inputs.lastName.label | String | Etiqueta personalizada para el campo de apellido. |
| UserInfoPattern.translations.en.inputs.phone.label | String | Etiqueta personalizada para el campo del teléfono. |
| UserInfoPattern.translations.en.inputs.identityDocument.label.CO | String | Etiqueta para Colombia: Cédula / Doc de identidad. |
| UserInfoPattern.translations.en.inputs.identityDocument.label.CL | String | Etiqueta para Chile: RUT/DNI. |
| UserInfoPattern.translations.en.inputs.identityDocument.label.EC | String | Etiqueta para Ecuador: Cédula / Doc de identidad. |
| UserInfoPattern.translations.en.inputs.identityDocument.label.MX | String | Etiqueta para México: Número RFC. |
| UserInfoPattern.translations.en.inputs.identityDocument.label.BR | String | Etiqueta para Brasil: Registro General. |
| UserInfoPattern.translations.en.inputs.identityDocument.label.AR | String | Etiqueta para Argentina: DNI / Doc de Identidad. |
| UserInfoPattern.translations.es.inputs.identityDocument.label.UY | String | Etiqueta para Uruguay: Cédula / Doc de identidad. |