SDK Customizations

Yuno Android SDK enables you to modify styles by changing font, button, and color styles or creating your own card form flow.

Font styles

You can override Yuno Android SDK fonts if you want to use your font family. The font styles you can override are:

• YunoRegularFont
• YunoMediumFont
• YunoBoldFont

An example is presented in the code snippet below:

<style name="YunoRegularFont">
    <item name="android:fontFamily">YOUR REGULAR FONT FILE ( EX: @font/inter_regular.ttf)</item>
</style>

<style name="YunoMediumFont">
	<item name="android:fontFamily">YOUR MEDIUM FONT FILE ( EX: @font/inter_medium.ttf)</item>
</style>

<style name="YunoBoldFont">
	<item name="android:fontFamily">YOUR BOLD FONT FILE ( EX: @font/inter_bold.ttf)</item>
</style>

Button styles

You can override Yuno Android SDK button styles if you want to use your font family. The button styles you can override are:

• Button.Normal.White
• Button.Normal.Green
• Button.Normal.Purple
• Button.Normal.Purple.Big

An example is presented in the code snippet below:

<style name="Button.Normal.Purple">
    <item name="android:background">YOUR OWN COLOR ( EX: HEXCODE OR RESOURCE )</item>
    <item name="android:textColor">YOUR OWN COLOR ( EX: HEXCODE OR RESOURCE )</item>
    <item name="android:fontFamily">YOUR FONT FILE ( EX: @font/inter_regular.ttf)</item>
</style>

Color styles

You can override Yuno Android SDK color styles if you want to use your font family. The color styles you can override are:

• yuno_purple_light

An example is presented in the code snippet below:

<color name="yuno_purple_light">YOUR OWN COLOR ( EX: HEXCODE OR RESOURCE )</color>

Create your own card form flow

To create your card form flow, the first step is to create a new layout resource file called screen_payment_card_form.xml to override the current XML and implement your design. After, you can define your own design while ensuring the use of Yuno Secure Fields components, which ensures that the Yuno SDK can retrieve credit card information during the checkout. Below, you will find all components you can use to change the design:

• CardNumberEditText: Field where the user enters the credit card number.

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

• CardExpiryDateEditText: Field where the user enters the credit card's expiration date.

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

• TextFieldItemView (CVV): Field where the user enters the credit card's verification code (CVV).

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

• TextFieldItemView (card holder's name): Field where the user enters the credit card holder's name.

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

• SpinnerFieldItemView (document type): Where users can choose the type of identification document the credit card holder holds.

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

• TextFieldItemView (document number): Field where the user enters the credit card holder's identification document number.

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

• AppCompatCheckBox: Checkbox, which users can choose whether to save the credit card for future purchases.

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

• Button: Component button used to submit the form and send the credit card information to Yuno.

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