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:
Changing components
When changing the Yuno Android SDK components, you must use then with their defined id
.
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" />
Updated 3 months ago