Personnalisations du SDK

Le SDK Android de Yuno vous permet de modifier de nombreux styles pour aligner la conception des formulaires de paiement et du flux de paiement avec l'identité de votre marque et vos principes UX/UI. Bien que la structure de chaque élément reste uniforme, vous pouvez ajuster les couleurs, les polices, les boutons, et bien plus encore.

Directives Générales

Le SDK Android de Yuno prend en charge les thèmes et styles XML, qui doivent être définis dans les ressources de styles de votre application. Les personnalisations Android sont en cours d'évolution et sont continuellement mises à jour.

Éléments personnalisables

Les sections suivantes détaillent les éléments qui peuvent être modifiés pour obtenir un style personnalisé. Certaines personnalisations ne sont pas disponibles dans les versions antérieures ; il est donc recommandé d'utiliser la version 1.13.0 ou une version plus récente.

Styles de Police
Styles de Bouton
Styles de Couleur
Styles de texte

Styles de Police

Vous pouvez remplacer les polices de Yuno Android SDK si vous souhaitez utiliser votre propre famille de polices. Vous pouvez surcharger les styles de police suivants :

YunoRegularFont
YunoMediumFont
YunoBoldFont

Le bloc de code suivant présente un exemple de configuration du style de police :

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

Styles de Bouton

Vous pouvez remplacer les styles de boutons du SDK Android de Yuno. Les configurations disponibles varient en fonction de votre version du SDK. Le tableau suivant liste tous les boutons disponibles que vous pouvez personnaliser :

Versions avant v1.10.0	Version v1.10.0 et supérieure	Version v1.13.0 et supérieure
`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`

Pour chaque style, vous pouvez définir les attributs suivants :

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

L'exemple suivant montre comment configurer le bouton Button.Normal.NeutralB , y compris la modification de sa police :

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

Styles de Couleur

Vous pouvez remplacer les styles de couleurs du SDK Android de Yuno pour personnaliser l'apparence du SDK. Les configurations disponibles varient en fonction de votre version du SDK. Le tableau suivant présente les styles de couleur que vous pouvez surcharger pour chaque version du SDK :

Versions avant v1.10.0	Version v1.10.0 et supérieure	Version v1.13.0 et supérieure
`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`

Le bloc de code suivant présente un exemple de configuration des couleurs lors de l'utilisation du SDK avec une version égale ou supérieure à v1.13.0 :

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

Styles de texte

Vous pouvez remplacer les styles de texte du SDK Android de Yuno pour personnaliser l'apparence du SDK.

Cette fonctionnalité n'est disponible que pour la version SDK 1.13.0 ou supérieure.

Le tableau suivant liste tous les attributs de personnalisation que vous pouvez utiliser pour chaque style de texte:

Style de Texte	Style parent	Attributs Personnalisables
`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`

Le bloc de code suivant présente comment vous pouvez configurer ces personnalisations de texte :

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

Créer votre propre flux de formulaire de carte

La première étape de la création de votre flux de formulaires de carte consiste à créer un nouveau fichier de ressources de mise en page appelé screen_payment_card_form.xml pour remplacer le XML actuel et implémenter votre design.

Après avoir créé ce fichier screen_payment_card_form.xml vous pouvez définir votre propre design. Vous devez utiliser les composants Yuno Secure Fields qui garantissent que le SDK Yuno peut récupérer les informations de carte de crédit pendant le paiement. Vous trouverez ci-dessous une liste de tous les composants que vous pouvez utiliser pour modifier le design :

🚧
Modification des Composants
Lors de la modification des composants du SDK Android de Yuno, vous devez les utiliser avec leur id.

v1.10.0 ou supérieur

Des composants supplémentaires sont disponibles pour la version v1.10.0 ou supérieure du Yuno SDK. Ces composants sont énumérés dans la sous-section ci-dessous.

CloseButton: Bouton pour fermer le formulaire.

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

CardNumberEditText: Champ de saisie du numéro de carte de crédit.

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

CardDataStackView: Champ dans lequel l'utilisateur peut saisir la date d'expiration de la carte de crédit et le code de vérification (CVV/CVC).

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

TextView pour le type de carte Voucher : Il s'agit d'une copie que Yuno SDK affiche lorsque la carte est VOUCHER vous devez le placer sous le champ CVV.

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

TextFieldItemView pour le nom du titulaire de la carte : champ dans lequel l'utilisateur peut saisir le nom du titulaire de la carte de crédit.

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

SpinnerFieldItemView pour le type de document d'identification : Sélecteur permettant au titulaire de la carte de crédit de choisir son type de document d'identification.

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

TextFieldItemView pour le numéro du document d'identification : Champ dans lequel l'utilisateur peut saisir le numéro du document d'identification du titulaire de la carte de crédit.

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

PhoneInformationView Champ permettant à l’utilisateur de saisir son numéro de téléphone, si nécessaire. En plus de fournir idAndroid, il est obligatoire de définir la visibilité sur gone par défaut.

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

Installments: Composant qui affiche la liste déroulante des paiements échelonnés. En plus de fournir idAndroid, il est obligatoire de définir la visibilité sur gone , et d’ajouter la dépendance suivante : ShimmerFrameLayout - 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 TextView: Un texte affichant que Yuno a vérifié le formulaire.

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

CustomYunoSwitch: Il s'agit d'un composant de commutation qui permet à l'utilisateur de choisir si la carte sera utilisée comme carte de crédit ou de débit. En plus de fournir idAndroid, il est obligatoire de définir la visibilité sur gone par défaut.

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

CustomYunoSwitch: Une info-bulle (tooltip) affichant des informations sur le fonctionnement de commutateur. En plus de fournir l' idAndroid, il est obligatoire de définir la visibilité sur gone par défaut. Yuno recommande de positionner ce composant à côté de l'interrupteur.

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

AppCompatCheckBox: Une case à cocher que les utilisateurs peuvent utiliser pour choisir de sauvegarder la carte de crédit pour de futurs achats.

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

Button: Il valide le formulaire de carte et poursuit le processus de paiement. Lorsque l'utilisateur clique sur ce bouton, le SDK soumet le formulaire et envoie les informations de carte de crédit à Yuno.

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

Composants Disponibles pour v1.10.0 et Supérieur

Les configurations suivantes sont uniquement disponibles pour le SDK v1.10.0 et supérieur.

TextFieldItemView pour l'adresse du client : Il est utilisé pour saisir l'adresse du client lorsque cela est nécessaire. Il doit être utilisé avec son id (@+id/textField_address) Android spécifié et sa visibilité par défaut doit être gone par défaut.

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

TextFieldItemView pour l'état du client : Il permet au client d'entrer son état si nécessaire. Il doit être utilisé avec l' id (@+id/textField_state) Android défini et doit avoir la visibilité gone par défaut.

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

TextFieldItemView pour la ville du client : Il est destiné à la saisie de la ville du client. Il doit être utilisé avec l' id (@+id/textField_city) Android fourni et doit maintenir un paramètre de visibilité par défaut de gone.

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

TextFieldItemView pour le code postal du client : C'est ici que le client peut saisir son code postal. Assurez-vous qu'il est implémenté en utilisant l' id (@+id/textField_zip_cod) Android spécifié et qu'il a la visibilité gone par défaut :

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

SpinnerFieldItemView pour le pays du client : Ce composant SpinnerFieldItemView sélectionne le pays du client lorsque cela est nécessaire. Il doit être utilisé avec l' id (@+id/spinner_country) eAndroid défini et doit avoir une visibilité par défaut de gone.

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

SpinnerFieldItemView pour le sexe du client : Il est utilisé pour sélectionner le sexe du client si nécessaire. Assurez-vous qu'il est utilisé avec son id (@+id/spinner_gender) Android défini et qu'il est réglé sur la visibilité gone par défaut.

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

Saisie automatique d'adresse

Les commerçants peuvent activer ou désactiver la fonctionnalité de saisie automatique des adresses dans le SDK Android. Lorsqu'elle est activée, le SDK remplit automatiquement les champs d'adresse en fonction de la recherche du code postal. Lorsqu'elle est désactivée, les utilisateurs doivent saisir manuellement toutes les informations relatives à l'adresse.