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. The button styles you can override are listed in the table below. Note that the available configurations change depending on your SDK version.

Versions before v1.10.0	Version v1.10.0 and higher
`Button.Normal.White` `Button.Normal.Green` `Button.Normal.Purple` `Button.Normal.Purple.Big`	`Button.Small.NeutralB` `Button.Normal.NeutralB` `Button.Normal.Green` `Button.Normal.NeutralW.TextGrey4` `Button.Normal.NeutralW` `Button.Small` `Button.Normal`

An example is presented in the code snippet below:

<style name="Button.Normal.NeutralB">
    <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 personalize the appearance of Yuno SDK. The color styles you can override are presented in the following table. Note that the available configurations change depending on your SDK version.

Versions before v1.10.0	Version v1.10.0 and higher
`yuno_purple_light`	`neutral_b` `neutral_b_60_alpha` `neutral_w` `neutral_w_30_alpha` `grey_0` `grey_1` `grey_2` `grey_3` `grey_4` `grey_5` `primary_1` `primary_2` `primary_3` `primary_4` `primary_5` `secondary_1` `secondary_2` `secondary_3` `secondary_4` `secondary_5` `secondary_6` `tertiary_1` `tertiary_2` `tertiary_3` `tertiary_4`

An example is presented in the code snippet below:

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

Create your own card form flow

The first step to creating your card form flow is to create a new layout resource file called screen_payment_card_form.xml to override the current XML and implement your design.

After creating the screen_payment_card_form.xml file, you can define your own design. You need to use the Yuno Secure Fields components, which ensures that the Yuno SDK can retrieve credit card information during the checkout. Below, you will find a list of all the components you can use to change the design:

Changing components

When changing the Yuno Android SDK components, you must use them with their defined Android id.

v1.10.0 or higher

Additional components are available for the Yuno SDK version v1.10.0 or higher. These components are listed at the subsection below .

CloseButton: Button to close the form.

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

CardNumberEditText: Field where the user can enter the credit card number.

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

CardDataStackView: Field where the user can enter the credit card's expiration date and verification code (CVV/CVC).

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

TextView for Voucher card type: This is a copy Yuno SDK shows when the card is VOUCHER type, you must set it below the CVV field.

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

TextFieldItemView for card holder's name: Field where the user can enter the credit card holder's name.

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

SpinnerFieldItemView for identification document type: A selector where the credit card holder can choose their identification document type.

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

TextFieldItemView for identification document number: Field where the user can enter the credit card holder's identification document number.

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

PhoneInformationView for customer's phone number: Field where the user can enter his phone number if required. In addition to providing the Android id, it's required to have gone visibility.

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

Installments: Component that shows the spinner of card installments. In addition to providing the Android id, it's required to have gone visibility, and you need to add the ShimmerFrameLayout dependency: 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: A text to show that Yuno verified the form.

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

CustomYunoSwitch: It's a switch component that lets the user choose if the card will be used as credit or debit. In addition to providing the Android id, it's required to have gone visibility.

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

CustomYunoSwitch: A tooltip to show how the switch works. In addition to providing the Android id, it's required to have gone visibility. Yuno recommends positioning this component next to the switch.

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

AppCompatCheckBox: A check box users can use to choose whether to save the credit card for future purchases.

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

Button: It validates the card form and continues the payment process. When the user clicks this button, the SDK submits the form and sends the credit card information to Yuno.

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

Components available for v1.10.0 and higher

The following configurations are only available for SDK v1.10.0 and higher.

TextFieldItemView for customer's address: It is used to input the customer's address when required. Ensure it is utilized with its specified Android id (@+id/textField_address) and is set to have gone visibility by default.

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

TextFieldItemView for customer's state: It allows the customer to enter their state if needed. It must be used with the defined Android id (@+id/textField_state) and should have gone as the default visibility.

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

TextFieldItemView for customer's city: It is designated for the input of the customer's city. It should be used with the provided Android id (@+id/textField_city) and maintain a default visibility setting of gone.

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

TextFieldItemView for customer's zip code: This is where the customer can input their zip code. Ensure it is implemented using the specified Android id (@+id/textField_zip_cod) and has gone visibility by default:

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

SpinnerFieldItemView for customer's country: This SpinnerFieldItemView selects the customer's country when necessary. It must be utilized with the defined Android id (@+id/spinner_country) and should have a default visibility of gone.

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

SpinnerFieldItemView for customer's gender: It is used to select the customer's gender if required. Ensure it is used with its defined Android id (@+id/spinner_gender) and is set to gone visibility by default.

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