Documentation

Personalización de estilos

Suggest Edits

Personaliza los tus soluciones DEUNA usando CustomStyle.

📘

La personalización se encuentra disponible para todos los widget.

DEUNA permite adaptar visualmente el checkout para alinearlo con la identidad visual de tu marca. Esta guía describe cómo configurar el archivo JSON que controla los estilos del widget, incluyendo colores, tipografías, bordes, textos y vistas específicas.

Funcionamiento de la personalización

  1. Define los elementos a personalizar: identifica las vistas o componentes del checkout que deseas ajustar (ej. botones, campos, resumen de orden, mensajes de error, etc.).
  2. Configura el archivo JSON: incluye los valores de estilo que deseas aplicar. Puedes modificar colores, tipografías, radios de borde, padding, entre otros.
  3. Aplica la configuración:
    • Para estilos base del widget, contacta a tu TPM para su implementación.
    • Para estilos específicos por tipo de orden, puedes incluir el archivo de estilos dentro de la tokenización de cada orden.

📘

Aunque los ejemplos en la documentación están organizados por sección, la configuración final debe enviarse como un archivo JSON consolidado.

Alcance general

Puedes personalizar los siguientes aspectos:

  • Colores del checkout
  • Tipografías
  • Textos, alto y radio de inputs y botones
  • Colores de borde de inputs según estado
  • Activar reset de texto en los inputs
  • Activar validador iconográfico en los inputs
  • Ubicación y tamaño del logo
  • Términos y Condiciones
  • Elementos visuales en vistas específicas (ej: OTP, tarjetas, thank you page, datos de facturación, etc.)

Estilos globales

Colores

Puedes definir colores para:

  • Fondo (primario/secundario)
  • Texto principal
  • Botón de pago (color, hover, texto, activo)

🎨

Los colores deben ser definidos en formato HEX.

{
  "theme": {
    "colors": {
      "primaryTextColor": "#323237",
      "backgroundSecondary": "#FFFFFF",
      "backgroundPrimary": "#FFFFFF",
      "buttonPrimaryFill": "#17171A",
      "buttonPrimaryHover": "#69696E",
      "buttonPrimaryText": "#FFFFFF",
      "buttonPrimaryActive": "#5F529E"
    }
  }
}

Tipografías

Puedes elegir entre las siguientes tipografías compatibles:

  • Roboto
  • Montserrat
  • Open Sans
  • Lato
  • Nunito
  • Heebo
  • Raleway
  • Quicksand
  • Ubuntu
  • Mukta
  • Hind
  • San Francisco

📘

Si deseas usar una tipografía propia, contacta a tu TPM.

{
  "theme": {
    "typography": {
      "primaryFontFamily": "Lato"
    }
  }
}

Radios de inputs y botones

Puedes definir el border-radius en píxeles para inputs y botones:

{
  "theme": {
    "inputs": {
      "borderRadius": "50px"
    },
    "buttons": {
      "borderRadius": "20px"
    }
  }
}

Altura de inputs y botones

Puedes definir una altura personalizada para inputs y botones. Por defecto, la altura es de 40px.

Para una mejor experiencia de usuario, se recomienda usar una altura mínima de 30px y máxima de 60px.

{
  "theme": {
    "buttons": {
      "borderRadius": "20px",
      "heigh": "50px"
    },
    "inputs": {
      "borderRadius": "90px",
      "height": "50px"
    }
  }
}

Colores de borde del input según estado

Se puede seleccionar un color de borde específico para los inputs dependiendo de su estado:

EstadoDefiniciónColor por defecto
DisabledEl input no está habilitado para el usuario, por ende no puede escribir en el input.# B4B4B7
EnabledEl input está habilitado, pero aún no ha sido enfocado o el usuario no ha escrito nada.# D9D9DB
FocusEl usuario está escribiendo o tiene el foco en el input.# 404046
FilledEl input ha sido completado con datos válidos.# 8E8E92
ErrorEl input contiene errores de validación o está incompleto cuando es obligatorio.# E11900

Para una experiencia de usuario clara, recomendamos mantener un color rojo para el estado Error.

 theme: {
    colors: {
    inputBorder: '#D9D9DB', // Estado por defecto (enabled)
    inputBorderError: '#F1998E', // Estado error
    inputEnhancerFill: '#1AE1D7', // Estado active (foco)
    inputBorderPositive: '#66D19E', // Estado exitoso (success)
    },
  },

Ejemplo

Activar reset de texto en inputs

Puedes colocar un botón de reset en todos los campos de texto. Por defecto, esta configuración está apagada. Actúa como un shortcut para borrar todo el texto del campo sin mantener pulsado backspace.

 theme: {
    inputs: {
      inputMode: 'clearable' // 'validated' | 'clearable' | 'none'
    },
  },

Activar validador iconográfico en inputs de texto

Puedes activar un validador iconográfico en inputs de texto. Por defecto, esta configuración está apagada. Consiste en un ícono dentro del input, alineado a la derecha, dependiendo del estado:

  • Filled: Check ✅
  • Error: Exclamación ❗️

No se puede activar el reset de texto y el validador iconográfico a la vez.

 theme: {
    inputs: {
      inputMode: 'validated' // 'validated' | 'clearable' | 'none'
    },
  }

*ogo del comercio

Hace referencia a configuraciones disponibles para el logo

  • Cambiar logo
  • Cambiar ubicación del logo: centro o izquierda
  • Cambiar tamaño del logo

Default: Logo de 100px ubicado a la izquierda del widget

Logo del comercio@2x.png

    "HeaderPattern": {
            "overrides": {
                "Logo": {
                    "props": {
                        "url": "https://upload.wikimedia.org/wikipedia/commons/f/f8/Logo_del_Gobierno_de_M%C3%A9xico_%282018%29.png",
                        "position": "center",
                        "style": {
	                        "min-width": "150px"
                        }
                    }
                }
            }
        }

Personalizaciones por sección

Vista OTP (código de verificación)

Esta vista aparece cuando se requiere que el usuario valide su identidad mediante un código enviado por email. Es parte del flujo de autenticación. La vista OTP es opcional.

Puedes personalizar:

  • Encabezado
  • Botones de cambio de canal (SMS/email)
  • Opción "Continuar como invitado"
{
  "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"
        }
      }
    }
  }
}

Vista de pago con tarjetas

Corresponde al formulario principal donde el usuario ingresa los datos de su tarjeta para completar la compra.

Puedes personalizar:

  • Título y subtítulo de la sección: editar textos u ocultarlos
  • Labels de campos (ej. número de tarjeta, nombre, cuotas)
  • Texto del botón de pago
  • UpperTag / LowerTag (avisos informativos) [no disponibles en Payment Link]
  • Mensajes legales y links a términos y condiciones
{
  "PaymentMethodsPattern": {
    "translations": {
      "es": {
        "inputs": {
          "card": {
            "securityCode": {
              "label": "CVV"
            },
            "installment": {
              "label": "Cuotas",
              "pay_by": "Paga en",
              "first_pay": "Primer pago",
              "without_interest": "Sin interés ",
              "without_installments": "Sin cuotas",
              "loading": "Validando cuotas..."
            },
            "cardHolder": {
              "label": "Nombre como aparece en la tarjeta",
              "placeholder": "Ej. Juan Zapata"
            },
            "cardNumber": {
              "label": "Número de tarjeta",
              "placeholder": "0000 0000 0000 0000"
            },
            "expirationDate": {
              "label": "Fecha expiración",
              "placeholder": "MM / YY"
            }
          }
        },
        "paymentMethods": {
          "info": {
            "card": {
              "title": "tarjeta crédito o débito",
              "subtitle": "Por favor, ingresa los datos de tu tarjeta"
            }
          }
        }
      }
    },
    "props": {
      "hideTitleForCreditCard": true
    }
  }
}

Vista de tarjetas guardadas (usuarios autenticados)

Se muestra cuando un usuario autenticado tiene tarjetas previamente almacenadas y puede elegir entre ellas para completar su compra.

Puedes personalizar:

  • Textos de botones
  • Mensajes de expiración o advertencias
  • Confirmación de eliminación
{
  "UserCardPattern": {
    "translations": {
      "es": {
        "addNewCard": {
          "info": "Agregar una tarjeta"
        },
        "moreOptions": {
          "payWith": "Tarjeta seleccionada"
        },
        "paymentMethods": {
          "expiredCard": "Tarjeta expirada",
          "confirmDeleteMethodTitle": "Eliminar esta tarjeta",
          "confirmDeleteMethod": "Ten en cuenta que al eliminarla no podrás restaurarla."
        }
      }
    }
  }
}

Thank you page

Pantalla de confirmación de compra que aparece al finalizar el proceso si no se redirige a otro sitio.

Puedes personalizar:

  • Título de agradecimiento
  • Estados de la orden (succeeded, pending, denied)
  • Texto de los botones: "Guardar comprobante", "Volver al comercio"
"ThankYouView": {
  "translations": {
    "es": {
      "thankYouPage": {
        "status": {
          "succeeded": "¡Gracias por tu compra!",
          "pending": "Procesando...",
          "denied": "Pago rechazado"
        }
      }
    }
  },
  "overrides": {
    "Body": {
      "props": {
        "title": "Resumen de tu pedido"
      }
    },
    "Actions": {
      "props": {
        "hideDownloadAction": false,
        "hideBackToCommerceAction": false,
        "downloadText": "Guardar comprobante",
        "backText": "Volver a la tienda"
      }
    }
  }
}

Voucher Page

Pantalla de instrucciones para pagos con métodos alternativos (por ejemplo, pagos en efectivo o transferencias).

Puedes personalizar:

  • Título, subtítulo, descripción
  • Mensajes de referencia y fecha límite de pago
  • Texto de botones
  • Mostrar/ocultar branding DEUNA

Ejemplo OXXO:


"VoucherPage": {
  "OXXO_PAY": {
    "overrides": {
      "Header": {
        "props": {
          "title": "Pago con OXXO",
          "subtitle": "Presenta este código en tienda",
          "referenceTitle": "Referencia de pago",
          "payBefore": "Pagar antes del 20/06"
        }
      },
      "Footer": {
        "props": {
          "downloadReference": "Descargar Voucher",
          "showPoweredByDeuna": false}
      }
    }
  }
}

Vista de información del usuario

Formulario inicial donde se solicitan datos básicos del comprador, como nombre, email, teléfono y documento de identidad. Esta vista es opcional y solo disponible para payment link y checkout completo.

Permite personalizar los campos relacionados a:

  • Título de la sección
  • Labels de todos los campos
 {
  "UserInfoPattern": {
    "title": "Title custom style",
    "translations": {
      "es": {
        "inputs": {
          "email": {
            "label": "email style"
          },
          "firstName": {
            "label": "label style"
          },
          "lastName": {
            "label": "lastName style"
          },
          "phone": {
            "label": "phone style"
          },
          "identityDocument": {
            "label": {
              "CO": "Cédula / Doc de identidad",
              "CL": "RUT/DNI",
              "EC": "Cédula / Doc de identidad",
              "MX": "Número de RFC",
              "BR": "Registro Geral",
              "AR": "DNI / Doc de identidad",
              "UY": "Cédula / Doc de identidad"
            }
          }
        }
      }
    }
  }
}

Vista de datos de facturación

Formulario para capturar datos de facturación, en caso de ser requeridos por el comercio o la regulación. Es una vista opcional disponible en payment link, payment widget y checkout completo.

Permite personalizar:

  • Título de la sección
  • Labels de todos los campos (puedes ver el detalle aquí)

📘

Mira las propiedades descritas en este archivo JSON:

 {
  "UserInfoPattern": {
    "title": "Title custom style",
    "translations": {
      "es": {
        "inputs": {
          "email": {
            "label": "email style"
          },
          "firstName": {
            "label": "label style"
          },
          "lastName": {
            "label": "lastName style"
          },
          "phone": {
            "label": "phone style"
          },
          "identityDocument": {
            "label": {
              "CO": "Cédula / Doc de identidad",
              "CL": "RUT/DNI",
              "EC": "Cédula / Doc de identidad",
              "MX": "Número de RFC",
              "BR": "Registro Geral",
              "AR": "DNI / Doc de identidad",
              "UY": "Cédula / Doc de identidad"
            }
          }
        }
      }
    }
  }
}

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": "#5a51be",
      "backgroundSecondary": "#FFFFFF",
      "backgroundPrimary": "#e8e1fd",
      "buttonPrimaryFill": "#6fccb8",
      "buttonPrimaryHover": "#0033cc",
      "buttonPrimaryActive": "#ff0000",
      "inputBorder": "#D9D9DB",
      "inputBorderError": "#F1998E",
      "inputEnhancerFill": "#1AE1D7",
      "inputBorderPositive": "#66D19E"
    },
    "typography": {
      "primaryFontFamily": "Lobster"
    },
    "buttons": {
      "borderRadius": "4px"
    },
    "inputs": {
      "borderRadius": "4px"
    }
  },
  "HeaderPattern": {
    "overrides": {
      "Logo": {
        "props": {
          "url": "https://live.staticflickr.com/6164/6144091654_cbc351c8e2_b.jpg",
          "position": "center",
          "style": {
            "min-width": "100px"
          }
        }
      }
    }
  },
  "OtpPage": {
    "overrides": {
      "Header": {
        "props": {
          "overrides": {
            "Logo": {
              "props": {
                "url": "https://cdn.stg.deuna.io/explore-deuna/assets/explore-deuna-icon.svg"
              }
            }
          }
        }
      },
      "Headings": {
        "props": {
          "title": "Verificación en curso",
          "description": "Introduce el código que te hemos enviado para continuar."
        }
      },
      "OtpChangeChannelButton": {
        "props": {
          "description": {
            "sms": "Recibir código en tu correo",
            "email": "Recibir código por SMS"
          }
        }
      },
      "OtpResendButton": {
        "props": {
          "description": "Solicitar nuevo código"
        }
      },
      "ContinueAsGuestButton": {
        "props": {
          "description": "Seguir sin ingresar código"
        }
      },
      "OtpPattern": {
        "props": {
          "timeout": 3
        }
      }
    }
  },
  "PaymentMethodsPattern": {
    "translations": {
      "es": {
        "paymentMethods": {
          "info": {
            "card": {
              "title": "tarjeta crédito o débito",
              "subtitle": "Por favor, ingresa los datos de tu tarjeta"
            }
          }
        },
        "inputs": {
          "identityNumber": {
            "label": "Número de identificaciónxxxx"
          },
          "identityDocument": {
            "label": {
              "CO": "CO: Documento de identidad",
              "CL": "CL: RUT/DNI",
              "EC": "EC: Cédula / Documento de identidad",
              "MX": "MX: Identificación oficial",
              "BR": "BR: CPF/CNPJ del titular",
              "AR": "AR: DNI o documento equivalente",
              "UY": "UY: Cédula de identidad"
            }
          },
          "cardNumber": {
            "label": "Número de la tarjeta"
          },
          "cardHolder": {
            "label": "Nombre como aparece en la tarjeta"
          },
          "expirationDate": {
            "label": "Vencimiento de la tarjeta"
          },
          "securityCode": {
            "label": "Código de seguridad"
          },
          "installment": {
            "label": "Elige el número de cuotas",
            "withoutInstallments": "Pago en una sola exhibición"
          }
        }
      }
    }
  },
  "TermsConditionsPattern": {
    "showForGuest": true,
    "showForAuth": false,
    "legalMessage": "Al continuar, aceptas nuestras condiciones de uso.",
    "connectorText": "y",
    "hideCompanyDisclaimer": false,
    "termsAndConditionsUrl": "https://www.example.com/terms",
    "privacyPolicyUrl": "https://www.example.com/privacy"
  },
  "PaymentButtonPattern": {
    "label": "Completar pago por",
    "showOrderTotal": true
  },
  "PoweredByPattern": {
    "url": "https://images-staging.getduna.com/checkout_modular/banco-azteca-powered-by-deuna.svg",
    "hideText": true,
    "hide": false,
    "imageStyle": {
      "filter": "grayscale(100%)",
      "width": "90%",
      "height": "auto"
    }
  },
  "UserCardPattern": {
    "translations": {
      "es": {
        "addNewCard": {
          "info": "Añadir una nueva tarjeta"
        },
        "moreOptions": {
          "payWith": "Usar tarjeta seleccionada"
        },
        "paymentMethods": {
          "seeAllMyCards": "Mostrar todas mis tarjetas",
          "expiredCard": "Esta tarjeta ya no es válida",
          "warningExpiredCard": "Selecciona otro método de pago",
          "confirmDeleteMethodTitle": "¿Eliminar tarjeta?",
          "deleteMainText": "Eliminar tarjeta",
          "confirmDeleteMethodAccept": "Sí, eliminar",
          "confirmDeleteMethodCancel": "No, cancelar",
          "confirmDeleteMethod": "Una vez eliminada, esta tarjeta no podrá recuperarse."
        }
      }
    }
  }
}

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.
PaymentMethodsPattern.translations.es Objeto Objeto que define traducciones y configuraciones para campos de entrada de tarjeta.
PaymentMethodsPattern.translations.es.inputs.identityDocument.label.{iso2_country_code} Objeto Etiquetas personalizadas para los documentos de identidad en diferentes países.
PaymentMethodsPattern.translations.es.inputs.identityDocument.label.CO String Etiqueta para Colombia: Cédula / Doc de identidad.
PaymentMethodsPattern.translations.es.inputs.identityDocument.label.CL String Etiqueta para Chile: RUT/DNI.
PaymentMethodsPattern.translations.es.inputs.identityDocument.label.EC String Etiqueta para Ecuador: Cédula / Doc de identidad.
PaymentMethodsPattern.translations.es.inputs.identityDocument.label.MX String Etiqueta para México: Número de RFC.
PaymentMethodsPattern.translations.es.inputs.identityDocument.label.BR String Etiqueta para Brasil: CPF/CNPJ del titular.
PaymentMethodsPattern.translations.es.inputs.identityDocument.label.AR String Etiqueta para Argentina: DNI / Doc de identidad.
PaymentMethodsPattern.translations.es.inputs.identityDocument.label.UY String Etiqueta para Uruguay: Cédula / Doc de identidad.
PaymentMethodsPattern.translations.es.inputs.cardNumber.label String Etiqueta personalizada para el campo del número de tarjeta.
PaymentMethodsPattern.translations.es.inputs.cardHolder Objeto Objeto que define la etiqueta para el campo del nombre del titular de la tarjeta.
PaymentMethodsPattern.translations.es.inputs.cardHolder.label String Etiqueta personalizada para el campo del nombre del titular de la tarjeta.
PaymentMethodsPattern.translations.es.paymentMethods.info Object Objeto que define traducciones y configuraciones para el header de los métodos de pago.
PaymentMethodsPattern.translations.es.paymentMethods.info.title String Título del header de los métodos de pago.
PaymentMethodsPattern.translations.es.paymentMethods.info.subtitle String Subtítulo del del métodos de pago.
installment Objeto Objeto que define la etiqueta para el campo de cuotas.
PaymentMethodsPattern.translations.es.inputs.installment.label String Etiqueta personalizada para el campo de cuotas.
PaymentMethodsPattern.translations.es.inputs.installment.without_installments 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.
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 7 hours ago