Personalizaciones del SDK

El SDK para Android de Yuno te permite modificar múltiples estilos, permitiéndote alinear el diseño de los formularios de pago y el flujo de pago con las directrices de tu marca y los principios UX/UI. Aunque la estructura de cada elemento se mantiene uniforme, puedes ajustar los colores, el texto, los botones y mucho más.

Reglas generales

El SDK de Yuno para Android admite temas y estilos XML, que deben definirse dentro de los estilos de la aplicación. Las personalizaciones de Android son un trabajo en progreso y se actualizan continuamente.

Elementos personalizables

En las siguientes secciones se detallan los elementos que se pueden modificar para lograr un estilo personalizado. Algunas personalizaciones no están disponibles en versiones anteriores, por lo que recomendamos utilizar la versión 1.13.0 o superior.

Estilos de fuente
Estilos de botones
Estilos de color
Estilos de texto

Estilos de fuente

Puedes anular las fuentes del SDK de Yuno para Android si quieres usar tu familia de fuentes. Puedes anular los siguientes estilos de fuente:

YunoRegularFont
YunoMediumFont
YunoBoldFont

El siguiente bloque de código presenta un ejemplo de cómo puede configurar el estilo de fuente:

<style name="YunoRegularFont">
    <item name="android:fontFamily">@font/inter_regular</item>
</style>

<style name="YunoMediumFont">
    <item name="android:fontFamily">@font/inter_medium</item>
</style>

<style name="YunoBoldFont">
    <item name="android:fontFamily">@font/inter_bold</item>
</style>

Estilos de botones

Puedes anular los estilos de los botones del SDK de Yuno para Android. Las configuraciones disponibles cambian según la versión del SDK. La siguiente tabla muestra todos los botones disponibles que puedes personalizar según la versión del SDK.

Versiones anteriores a v1.10.0	Versión v1.10.0 y superior	Versión v1.13.0 y superior
`Button.Normal.White`	`Button.Small.NeutralB`	`Button.Normal`
`Button.Normal.Green`	`Button.Normal.NeutralB`	`Button.Small`
`Button.Normal.Purple`	`Button.Normal.Green`	`Button.Normal.NeutralW`
`Button.Normal.Purple.Big`	`Button.Normal.NeutralW.TextGrey4`	`Button.Normal.NeutralW.TextGrey4`
	`Button.Normal.NeutralW`	`Button.Normal.Green`
	`Button.Small`	`Button.Normal.NeutralB`
	`Button.Normal`	`Button.Small.NeutralB`

Para cada estilo, puedes establecer los siguientes atributos:

<style name="Button.Normal" parent="Widget.AppCompat.Button.Colored">
    <item name="android:padding">YOUR OWN DIMEN</item>
    <item name="android:radius">YOUR OWN DIMEN</item>
    <item name="android:textAllCaps">true|false</item>
    <item name="android:textSize">YOUR OWN DIMEN</item>
    <item name="android:fontFamily">YOUR OWN FONT</item>
    <item name="android:foreground">YOUR OWN ATTR</item>
</style>

<style name="Button.Small" parent="Widget.AppCompat.Button.Colored">
    <item name="android:padding">YOUR OWN DIMEN</item>
    <item name="android:radius">YOUR OWN DIMEN</item>
    <item name="android:textAllCaps">true|false</item>
    <item name="android:textSize">YOUR OWN DIMEN</item>
    <item name="android:fontFamily">YOUR OWN FONT</item>
    <item name="android:foreground">YOUR OWN ATTR</item>
</style>

<style name="Button.Normal.NeutralW">
    <item name="android:background">YOUR OWN DRAWABLE</item>
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="Button.Normal.NeutralW.TextGrey4">
    <item name="android:background">YOUR OWN DRAWABLE</item>
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="Button.Normal.TextBlack">
    <item name="android:background">YOUR OWN DRAWABLE</item>
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="Button.Normal.Green">
    <item name="android:background">YOUR OWN DRAWABLE</item>
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="Button.Normal.NeutralB">
    <item name="android:background">YOUR OWN DRAWABLE</item>
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="Button.Small.NeutralB" parent="Button.Small">
    <item name="android:background">YOUR OWN DRAWABLE</item>
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

El siguiente bloque de código presenta un ejemplo de cómo se puede configurar un Button.Normal.NeutralB Botón. El ejemplo también muestra cómo puedes cambiar la fuente del botón.

<style name="Button.Normal.NeutralB">
    <item name="android:background">#000000</item>
    <item name="android:textColor">#FFFFFF</item>
    <item name="android:fontFamily">@font/inter_regular.ttf</item>
</style>

Estilos de color

Puedes anular los estilos de color del SDK de Yuno para Android para personalizar la apariencia del SDK. Las configuraciones disponibles cambian según la versión del SDK. La siguiente tabla presenta los estilos de color que puedes anular para cada versión del SDK:

Versiones anteriores a v1.10.0	Versión v1.10.0 y superior	Versión v1.13.0 y superior
`yuno_purple_light`	`neutral_b`	`on_focus_outlined_text_view`
	`neutral_b_60_alpha`	`primary_4`
	`neutral_w`	`primary_5`
	`neutral_w_30_alpha`	`secondary_1`
	`grey_0`	`secondary_2`
	`grey_1`	`secondary_3`
	`grey_2`	`secondary_4`
	`grey_3`	`secondary_5`
	`grey_4`	`secondary_6`
	`grey_5`	`tertiary_1`
	`primary_1`	`tertiary_2`
	`primary_2`	`tertiary_3`
	`primary_3`	`tertiary_4`

El siguiente bloque de código presenta un ejemplo de cómo se pueden configurar los colores al utilizar el SDK con una versión igual o superior a v1.13.0:

<color name="neutral_b">#fff000</color>
<color name="on_focus_outlined_text_view">#282A30</color>

Estilos de texto

Puede anular los estilos de texto del SDK de Yuno Android para personalizar la apariencia del SDK.

Esta función solo está disponible para la versión 1.13.0 o superior del SDK.

La siguiente tabla enumera todos los atributos de personalización que puede utilizar para cada estilo de texto:

Estilo de texto	Estilo de los padres	Atributos personalizables
`YunoRegularFont`		`android:fontFamily`
`TextMicro`	`YunoRegularFont`	`android:textSize`
`TextSmall`	`YunoRegularFont`	`android:textSize`
`TextBody`	`YunoRegularFont`	`android:textSize`
`TextSubTitle`	`YunoRegularFont`	`android:textSize`
`TextH4`	`YunoRegularFont`	`android:textSize`
`TextH3`	`YunoRegularFont`	`android:textSize`
`TextH2`	`YunoRegularFont`	`android:textSize`
`TextH1`	`YunoRegularFont`	`android:textSize`
`TextH1Super`	`YunoRegularFont`	`android:textSize`
`TextMicro.NeutralB`	`TextMicro`	`android:textColor`
`TextMicro.NeutralB`	`TextMicro`	`android:textColorHint`
`TextSmall.NeutralB`	`TextSmall`	`android:textColor`
`TextSmall.NeutralB`	`TextSmall`	`android:textColorHint`

El siguiente bloque de código presenta cómo puedes configurar estas personalizaciones de texto:

<style name="YunoRegularFont">
    <item name="android:fontFamily">YOUR OWN FONT</item>
</style>

<style name="TextMicro" parent="YunoRegularFont">
    <item name="android:textSize">YOUR OWN DIMEN</item>
</style>

<style name="TextSmall" parent="YunoRegularFont">
    <item name="android:textSize">YOUR OWN DIMEN</item>
</style>

<style name="TextBody" parent="YunoRegularFont">
    <item name="android:textSize">YOUR OWN DIMEN</item>
</style>

<style name="TextSubTitle" parent="YunoRegularFont">
    <item name="android:textSize">YOUR OWN DIMEN</item>
</style>

<style name="TextH4" parent="YunoRegularFont">
    <item name="android:textSize">YOUR OWN DIMEN</item>
</style>

<style name="TextH3" parent="YunoRegularFont">
    <item name="android:textSize">YOUR OWN DIMEN</item>
</style>

<style name="TextH2" parent="YunoRegularFont">
    <item name="android:textSize">YOUR OWN DIMEN</item>
</style>

<style name="TextH1" parent="YunoRegularFont">
    <item name="android:textSize">YOUR OWN DIMEN</item>
</style>

<style name="TextH1Super" parent="YunoRegularFont">
    <item name="android:textSize">YOUR OWN DIMEN</item>
</style>

<style name="TextMicro.NeutralB" parent="TextMicro">
    <item name="android:textColor">YOUR OWN COLOR</item>
    <item name="android:textColorHint">YOUR OWN COLOR</item>
</style>

<style name="TextSmall.NeutralB" parent="TextSmall">
    <item name="android:textColor">YOUR OWN COLOR</item>
    <item name="android:textColorHint">YOUR OWN COLOR</item>
</style>

<style name="TextBody.NeutralB" parent="TextBody">
    <item name="android:textColor">YOUR OWN COLOR</item>
    <item name="android:textColorHint">YOUR OWN COLOR</item>
</style>

<style name="TextSubTitle.NeutralB" parent="TextSubTitle">
    <item name="android:textColor">YOUR OWN COLOR</item>
    <item name="android:textColorHint">YOUR OWN COLOR</item>
</style>

<style name="TextH4.NeutralB" parent="TextH4">
    <item name="android:textColor">YOUR OWN COLOR</item>
    <item name="android:textColorHint">YOUR OWN COLOR</item>
</style>

<style name="TextH3.NeutralB" parent="TextH3">
    <item name="android:textColor">YOUR OWN COLOR</item>
    <item name="android:textColorHint">YOUR OWN COLOR</item>
</style>

<style name="TextH2.NeutralB" parent="TextH2">
    <item name="android:textColor">YOUR OWN COLOR</item>
    <item name="android:textColorHint">YOUR OWN COLOR</item>
</style>

<style name="TextH1.NeutralB" parent="TextH1">
    <item name="android:textColor">YOUR OWN COLOR</item>
    <item name="android:textColorHint">YOUR OWN COLOR</item>
</style>

<style name="TextH1Super.NeutralB" parent="TextH1Super">
    <item name="android:textColor">YOUR OWN COLOR</item>
    <item name="android:textColorHint">YOUR OWN COLOR</item>
</style>

<style name="TextMicro.Grey5" parent="TextMicro">
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="TextSmall.Grey5" parent="TextSmall">
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="TextBody.Grey5" parent="TextBody">
    <item name="android:textColor">YOUR OWN COLOR</item>
    <item name="android:textColorHint">YOUR OWN COLOR</item>
</style>

<style name="TextSubTitle.Grey5" parent="TextSubTitle">
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="TextH4.Grey5" parent="TextH4">
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="TextH3.Grey5" parent="TextH3">
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="TextH2.Grey5" parent="TextH2">
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="TextH1.Grey5" parent="TextH1">
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="TextH1Super.Grey5" parent="TextH1Super">
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="TextMicro.NeutralW" parent="TextMicro">
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="TextSmall.NeutralW" parent="TextSmall">
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="TextBody.NeutralW" parent="TextBody">
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="TextSubTitle.NeutralW" parent="TextSubTitle">
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="TextSubTitle.Grey.Bold" parent="TextSubTitleBold">
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="TextSmall.Black.Light" parent="TextSmall">
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="TextH4.NeutralW" parent="TextH4">
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="TextH3.NeutralW" parent="TextH3">
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="TextH2.NeutralW" parent="TextH2">
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="TextH1.NeutralW" parent="TextH1">
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="TextH1Super.NeutralW" parent="TextH1Super">
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="TextSmall.Primary4" parent="TextSmall">
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="TextH1.Primary4">
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="TextBody.Primary1" parent="TextBody">
    <item name="android:textColor">YOUR OWN COLOR</item>
    <item name="android:textColorHint">YOUR OWN COLOR</item>
</style>

<style name="TextSmall.Primary1" parent="TextSmall">
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="TextSubTitle.Primary1" parent="TextSubTitle">
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="TextSmall.Grey4" parent="TextSmall">
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="TextSubTitle.Grey4" parent="TextSubTitle">
    <item name="android:textColor">YOUR OWN COLOR</item>
</style>

<style name="TextSmall.NuPay" parent="TextSmall">
    <item name="android:textColor">#3A1866</item>
    <item name="android:textColorHint">YOUR OWN COLOR</item>
</style>

Cree su propio flujo de formulario de tarjeta

El primer paso para crear el flujo de formulario de su tarjeta es crear un nuevo archivo de recursos de diseño llamado screen_payment_card_form.xml para anular el XML actual e implementar su diseño.

Después de crear el screen_payment_card_form.xml , puede definir su propio diseño. Debe utilizar los componentes Yuno Secure Fields, lo que garantiza que el SDK de Yuno pueda recuperar la información de la tarjeta de crédito durante el pago. A continuación, encontrará una lista de todos los componentes que puede utilizar para cambiar el diseño:

🚧
Cambio de componentes
Al cambiar los componentes del SDK de Yuno Android, debes usarlos con su versión de Android definida. id.

v1.10.0 o superior

Hay componentes adicionales disponibles para la versión v1.10.0 o superior del SDK de Yuno. Estos componentes se enumeran en la subsección siguiente.

CloseButton: Botón para cerrar el formulario.

<ImageView
        android:id="@+id/imageView_close" />

CardNumberEditText: Campo donde el usuario puede ingresar el número de tarjeta de crédito.

<com.yuno.payments.features.base.ui.views.CardNumberEditText
    android:id="@+id/textField_number" />

CardDataStackView: Campo donde el usuario puede ingresar la fecha de vencimiento de la tarjeta de crédito y el código de verificación (CVV/CVC).

<com.yuno.payments.features.base.ui.views.CardDataStackView
    android:id="@+id/cardDataStackView" />

TextView para el tipo de tarjeta de cupón: esta es una copia que el SDK de Yuno muestra cuando la tarjeta es VOUCHER , debe configurarlo debajo del campo CVV.

<TextView
    android:id="@+id/textView_voucher_copy"
    android:visibility="gone" />

TextFieldItemView para nombre del titular de la tarjeta: Campo donde el usuario puede ingresar el nombre del titular de la tarjeta de crédito.

<com.yuno.payments.features.base.ui.views.TextFieldItemView
    android:id="@+id/textField_name" />

SpinnerFieldItemView por tipo de documento de identificación: Un selector donde el titular de la tarjeta de crédito puede elegir su tipo de documento de identificación.

<com.yuno.payments.features.base.ui.views.SpinnerFieldItemView
    android:id="@+id/spinner_document_type" />

TextFieldItemView para número de documento de identificación: Campo donde el usuario puede ingresar el número de documento de identificación del titular de la tarjeta de crédito.

<com.yuno.payments.features.base.ui.views.TextFieldItemView
    android:id="@+id/textField_user_document" />

PhoneInformationView para número de teléfono del cliente: Campo donde el usuario puede ingresar su número de teléfono si lo requiere. Además de proporcionar el Android id, se requiere tener gone visibilidad.

<com.yuno.payments.features.base.ui.views.PhoneInformationView
    android:id="@+id/layout_phone_information"
		android:visibility="gone" />

Installments: Componente que muestra el spinner de cuotas de la tarjeta. Además de proporcionar el Android id, se requiere tener gone visibilidad, y es necesario agregar el ShimmerFrameLayout dependencia: implementation 'com.facebook.shimmer:shimmer:0.5.0'.

<LinearLayout
  android:id="@+id/container_installments"
  android:orientation="vertical">

  <com.yuno.payments.features.base.ui.views.SpinnerFieldItemView
  android:id="@+id/spinner_installments"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:visibility="gone"
  app:spinner_title="@string/payment.form_installments" />

  <com.facebook.shimmer.ShimmerFrameLayout
  android:id="@+id/shimmer_installments"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:foregroundGravity="center"
  android:visibility="gone">

  <include layout="@layout/shimmer_component_field" />
  </com.facebook.shimmer.ShimmerFrameLayout>

</LinearLayout>

yuno TextView: Un texto para mostrar que Yuno verificó el formulario.

<TextView
        android:id="@+id/textView_secure_payment" />

CustomYunoSwitch: Es un componente de cambio que permite al usuario elegir si la tarjeta se utilizará como crédito o débito. Además de proporcionar el Android id, se requiere tener gone visibilidad.

<com.yuno.payments.features.base.ui.views.CustomYunoSwitch
                android:id="@+id/switch_cardType"
                android:visibility="gone" />

CustomYunoSwitch: información sobre herramientas para mostrar cómo funciona el interruptor. Además de proporcionar el Android id, se requiere tener gone visibilidad. Yuno recomienda colocar este componente al lado del interruptor.

<ImageView
                android:id="@+id/switch_tooltip"
                android:src="@drawable/ic_thin_info"
                android:visibility="gone"/>

AppCompatCheckBox: casilla de verificación que los usuarios pueden utilizar para elegir si desean guardar la tarjeta de crédito para futuras compras.

<androidx.appcompat.widget.AppCompatCheckBox
android:id="@+id/checkBox_save_card" />

Button: Valida el formulario de la tarjeta y continúa el proceso de pago. Cuando el usuario hace clic en este botón, el SDK envía el formulario y envía la información de la tarjeta de crédito a Yuno.

<Button
    android:id="@+id/button_complete_form" />

Componentes disponibles para v1.10.0 y superiores

Las siguientes configuraciones solo están disponibles para SDK v1.10.0 y superiores.

TextFieldItemView para la dirección del cliente: Se utiliza para ingresar la dirección del cliente cuando sea necesario. Asegúrese de que se utiliza con su Android especificado id (@+id/textField_address) y está previsto que tenga gone visibilidad por defecto.

<com.yuno.payments.features.base.ui.views.TextFieldItemView
    android:id="@+id/textField_address"
    android:visibility="gone" />

TextFieldItemView para el estado del cliente: Permite al cliente ingresar su estado si es necesario. Debe usarse con el Android definido. id (@+id/textField_state) y debe tener gone como visibilidad predeterminada.

<com.yuno.payments.features.base.ui.views.TextFieldItemView
    android:id="@+id/textField_state"
    android:visibility="gone" />

TextFieldItemView para la ciudad del cliente: Está destinado a la introducción de la ciudad del cliente. Debe utilizarse con el sistema operativo Android id (@+id/textField_city) y mantener una configuración de visibilidad predeterminada de gone.

<com.yuno.payments.features.base.ui.views.TextFieldItemView
    android:id="@+id/textField_city"
    android:visibility="gone" />

TextFieldItemView para el código postal del cliente: Aquí es donde el cliente puede ingresar su código postal. Asegúrese de que se implemente utilizando el Android especificado id (@+id/textField_zip_cod) y tiene gone visibilidad por defecto:

<com.yuno.payments.features.base.ui.views.TextFieldItemView
    android:id="@+id/textField_zip_code"
    android:visibility="gone" />

SpinnerFieldItemView para el país del cliente: este SpinnerFieldItemView selecciona el país del cliente cuando es necesario. Debe utilizarse con el Android definido. id (@+id/spinner_country) y debe tener una visibilidad predeterminada de gone.

<com.yuno.payments.features.base.ui.views.SpinnerFieldItemView
    android:id="@+id/spinner_country"
    android:visibility="gone" />

SpinnerFieldItemView para el género del cliente: Se utiliza para seleccionar el género del cliente si es necesario. Asegúrese de que se utiliza con su Android definido. id (@+id/spinner_gender) y está configurado en gone visibilidad por defecto.

<com.yuno.payments.features.base.ui.views.SpinnerFieldItemView
    android:id="@+id/spinner_gender"
    android:visibility="gone" />

Autocompletar dirección

Los comerciantes pueden habilitar o deshabilitar la función de autocompletar direcciones en el SDK de Android. Cuando está habilitada, el SDK rellena automáticamente los campos de dirección basándose en la búsqueda del código postal. Cuando está deshabilitada, los usuarios deben introducir manualmente toda la información de la dirección.