Book a Demo

SDK Customizations

Suggest Edits

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:

  • 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 personalize the appearance of Yuno SDK. 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

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 then with their defined Android id.

  • 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 the form is verified by Yuno. 
<TextView
        android:id="@+id/textView_secure_payment" />
  • CustomYunoSwitch: It's a switch component to let the user choose if the card is going to 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 on this button, the SDK submits the form and sends the credit card information to Yuno.
<Button
    android:id="@+id/button_complete_form" />

Updated about 2 months ago