Personalizações do SDK

O SDK Yuno para Android permite modificar vários estilos, o que possibilita alinhar o design dos formulários de pagamento e o fluxo de checkout com as diretrizes da sua marca e os princípios de UX/UI. Embora a estrutura de cada elemento permaneça uniforme, você pode ajustar cores, texto, botões e muito mais.

Diretrizes gerais

O Yuno Android SDK suporta temas e estilos XML, que devem ser definidos nos estilos de seu aplicativo. As personalizações do Android são um trabalho em andamento e são continuamente atualizadas.

Elementos personalizáveis

As seções a seguir detalham os elementos que podem ser modificados para obter um estilo personalizado. Algumas personalizações não estão disponíveis em versões anteriores, portanto, recomendamos o uso da versão 1.13.0 ou superior.

Estilos de fonte
Estilos de botões
Estilos de cores
Estilos de texto

Estilos de fonte

Você pode substituir as fontes do Yuno Android SDK se quiser usar sua própria família de fontes. Você pode substituir os seguintes estilos de fonte:

YunoRegularFont
YunoMediumFont
YunoBoldFont

O bloco de código a seguir apresenta um exemplo de como você pode configurar o estilo da fonte:

<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 botões

Você pode substituir os estilos de botão do SDK do Android Yuno. As configurações disponíveis mudam de acordo com a versão do SDK. A tabela a seguir lista todos os botões disponíveis que você pode personalizar, considerando a versão do SDK.

Versões anteriores à v1.10.0	Versão v1.10.0 e superior	Versão v1.13.0 e 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, você pode definir os seguintes 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>

O bloco de código a seguir apresenta um exemplo de como você pode configurar um Button.Normal.NeutralB botão. O exemplo também mostra como você pode alterar a fonte do botão.

<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 cores

Você pode substituir os estilos de cores do Yuno Android SDK para personalizar a aparência do SDK. As configurações disponíveis mudam de acordo com a versão do SDK. A tabela a seguir apresenta os estilos de cores que podem ser substituídos para cada versão do SDK:

Versões anteriores à v1.10.0	Versão v1.10.0 e superior	Versão v1.13.0 e 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`

O bloco de código a seguir apresenta um exemplo de como você pode configurar as cores ao usar o SDK com uma versão igual ou superior à v1.13.0:

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

Estilos de texto

Você pode substituir os estilos de texto do Yuno Android SDK para personalizar a aparência do SDK.

Esse recurso só está disponível para a versão 1.13.0 ou superior do SDK.

A tabela a seguir lista todos os atributos de personalização que você pode usar para cada estilo de texto:

Estilo de texto	Estilo dos pais	Atributos personalizáveis
`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`

O bloco de código a seguir apresenta como você pode configurar essas personalizações 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>

Crie seu próprio fluxo de formulário de cartão

A primeira etapa para criar seu fluxo de formulário de cartão é criar um novo arquivo de recurso de layout chamado screen_payment_card_form.xml para substituir o XML atual e implementar seu design.

Depois de criar o screen_payment_card_form.xml você pode definir seu próprio design. Você precisa usar os componentes Yuno Secure Fields, que garantem que o Yuno SDK possa recuperar informações de cartão de crédito durante o checkout. Abaixo, você encontrará uma lista de todos os componentes que podem ser usados para alterar o design:

🚧
Modificação de componentes
Ao alterar os componentes do SDK do Android da Yuno, você deve usá-los com seus respectivos Android id.

v1.10.0 ou superior

Componentes adicionais estão disponíveis para a versão v1.10.0 ou superior do Yuno SDK. Esses componentes estão listados na subseção abaixo.

CloseButton: Botão para fechar o formulário.

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

CardNumberEditText: Campo em que o usuário pode inserir o número do cartão de crédito.

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

CardDataStackView: Campo em que o usuário pode inserir a data de validade do cartão de crédito e o código de verificação (CVV/CVC).

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

TextView para o tipo de cartão Voucher: Esta é uma cópia que o Yuno SDK mostra quando o cartão é VOUCHER você deve defini-lo abaixo do campo CVV.

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

TextFieldItemView para o nome do titular do cartão: campo em que o usuário pode inserir o nome do titular do cartão de crédito.

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

SpinnerFieldItemView para o tipo de documento de identificação: Um seletor em que o titular do cartão de crédito pode escolher o tipo de documento de identificação.

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

TextFieldItemView para o número do documento de identificação: Campo onde o usuário pode inserir o número do documento de identificação do titular do cartão de crédito.

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

PhoneInformationView para o número de telefone do cliente: Campo onde o usuário pode inserir seu número de telefone, se necessário. Além de fornecer o Android idé necessário ter gone visibilidade.

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

Installments: Componente que mostra o spinner das parcelas do cartão. Além de fornecer o componente Android idé necessário ter gone e você precisa adicionar a visibilidade ShimmerFrameLayout dependência: 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's TextView: Um texto para mostrar que Yuno verificou o formulário.

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

CustomYunoSwitch: É um componente de troca que permite que o usuário escolha se o cartão será usado como crédito ou débito. Além de fornecer o Android idé necessário ter gone visibilidade.

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

CustomYunoSwitch: Uma dica de ferramenta para mostrar como a chave funciona. Além de fornecer o Android idé necessário ter gone visibilidade. A Yuno recomenda posicionar esse componente próximo ao interruptor.

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

AppCompatCheckBox: Uma caixa de seleção que os usuários podem usar para escolher se desejam salvar o cartão de crédito para compras futuras.

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

Button: Ele valida o formulário do cartão e continua o processo de pagamento. Quando o usuário clica nesse botão, o SDK envia o formulário e envia as informações do cartão de crédito para a Yuno.

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

Componentes disponíveis para a versão 1.10.0 e posteriores

As configurações a seguir estão disponíveis apenas para o SDK v1.10.0 e superior.

TextFieldItemView para o endereço do cliente: É usado para inserir o endereço do cliente quando necessário. Certifique-se de que ele seja utilizado com seu Android especificado id (@+id/textField_address) e está definido para ter gone visibilidade por padrão.

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

TextFieldItemView para o estado do cliente: Permite que o cliente insira seu estado, se necessário. Deve ser usado com o Android definido id (@+id/textField_state) e deve ter gone como a visibilidade padrão.

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

TextFieldItemView para a cidade do cliente: É designado para a entrada da cidade do cliente. Ela deve ser usada com o Android fornecido id (@+id/textField_city) e manter uma configuração de visibilidade padrão de gone.

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

TextFieldItemView para o código postal do cliente: É aqui que o cliente pode inserir seu código postal. Certifique-se de que ele seja implementado usando o Android especificado id (@+id/textField_zip_cod) e tem gone visibilidade por padrão:

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

SpinnerFieldItemView para o país do cliente: Esse SpinnerFieldItemView seleciona o país do cliente quando necessário. Ele deve ser utilizado com o Android id (@+id/spinner_country) e deve ter uma visibilidade padrão de gone.

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

SpinnerFieldItemView para o gênero do cliente: É usado para selecionar o gênero do cliente, se necessário. Certifique-se de que ele seja usado com seu Android definido id (@+id/spinner_gender) e é definido como gone visibilidade por padrão.

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

Preenchimento automático de endereço

Os comerciantes podem ativar ou desativar a funcionalidade de preenchimento automático de endereços no SDK do Android. Quando ativada, o SDK preenche automaticamente os campos de endereço com base na pesquisa do código postal. Quando desativada, os usuários devem inserir manualmente todas as informações de endereço.