指南
状态页面Dashboard预约演示
开始键入搜索...

SDK 定制

通过 Yuno Android SDK，您可以修改多种样式，使支付表单和结账流程的设计符合您的品牌准则和用户体验/用户界面原则。虽然每个元素的结构保持统一，但您可以调整颜色、文本、按钮等。

一般准则

Yuno Android SDK 支持 XML 主题和样式，这些主题和样式应在应用程序的样式中定义。Android 定制工作正在进行中，并会不断更新。

可定制的元素

以下各节详细介绍了可以修改的元素，以实现个性化风格。有些自定义功能在以前的版本中无法使用，因此我们建议使用 1.13.0 或更高版本。

字体样式

如果您想使用自己的字体系列，可以覆盖 Yuno Android SDK 字体。您可以覆盖以下字体样式：

  • YunoRegularFont
  • YunoMediumFont
  • YunoBoldFont

下面的代码块举例说明了如何配置字体样式：

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

按钮样式

您可以覆盖 Yuno Android SDK 按钮样式。可用配置随 SDK 版本的不同而变化。下表列出了您可以根据 SDK 版本自定义的所有可用按钮。

v1.10.0 之前的版本   版本 v1.10.0 及更高         版本 v1.13.0 及更高         
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.BigButton.Normal.NeutralW.TextGrey4Button.Normal.NeutralW.TextGrey4
                           Button.Normal.NeutralW           Button.Normal.Green             
                           Button.Small                     Button.Normal.NeutralB           
                           Button.Normal                   Button.Small.NeutralB           

对于每种样式，您都可以设置以下属性：

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

下面的代码块举例说明了如何配置一个 Button.Normal.NeutralB 按钮。该示例还显示了如何更改按钮字体。

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

色彩风格

您可以覆盖 Yuno Android SDK 的颜色样式，以个性化 SDK 的外观。可用配置随 SDK 版本的不同而变化。下表列出了每个 SDK 版本可覆盖的颜色样式：

v1.10.0 之前的版本版本 v1.10.0 及更高版本 v1.13.0 及更高   
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                 

下面的代码块举例说明了在使用版本等于或高于 v1.13.0 的 SDK 时如何配置颜色：

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

文本样式

您可以覆盖 Yuno Android SDK 的文本样式，以个性化 SDK 的外观。

此功能仅适用于 1.13.0 或更高版本的 SDK。

下表列出了每种文本样式可以使用的所有自定义属性：

文本样式           父母风格     可定制属性
YunoRegularFont                      android:fontFamily   
TextMicro         YunoRegularFontandroid:textSize     
TextSmall         YunoRegularFontandroid:textSize     
TextBody           YunoRegularFontandroid:textSize     
TextSubTitle       YunoRegularFontandroid:textSize     
TextH4             YunoRegularFontandroid:textSize     
TextH3             YunoRegularFontandroid:textSize     
TextH2             YunoRegularFontandroid:textSize     
TextH1             YunoRegularFontandroid:textSize     
TextH1Super       YunoRegularFontandroid:textSize     
TextMicro.NeutralBTextMicro       android:textColor     
TextMicro.NeutralBTextMicro       android:textColorHint
TextSmall.NeutralBTextSmall       android:textColor     
TextSmall.NeutralBTextSmall       android:textColorHint

下面的代码块介绍了如何配置这些自定义文本：

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

创建自己的贺卡表单流程

创建卡片表单流程的第一步是创建一个名为 screen_payment_card_form.xml 来覆盖当前的 XML 并实现您的设计。

创建 screen_payment_card_form.xml 文件，您可以定义自己的设计。您需要使用 Yuno Secure Fields 组件，它能确保 Yuno SDK 在结账时检索到信用卡信息。下面列出了您可以用来更改设计的所有组件：

🚧

更换组件

更改 Yuno Android SDK 组件时，您必须将它们与已定义的 Android id.

v1.10.0 或更高版本

其他组件适用于 Yuno SDK v1.10.0 或更高版本。这些组件在下面的小节中列出。

  • CloseButton:关闭表格的按钮。
<ImageView
        android:id="@+id/imageView_close" />
  • CardNumberEditText:用户可输入信用卡号的字段。
<com.yuno.payments.features.base.ui.views.CardNumberEditText
    android:id="@+id/textField_number" />
  • CardDataStackView:用户可在此输入信用卡有效期和验证码（CVV/CVC）。
<com.yuno.payments.features.base.ui.views.CardDataStackView
    android:id="@+id/cardDataStackView" />
  • TextView 用于凭证卡类型：这是优诺 SDK 在卡被激活时显示的副本。 VOUCHER 类型，必须将其设置在 CVV 字段下方。
<TextView
    android:id="@+id/textView_voucher_copy"
    android:visibility="gone" />
  • TextFieldItemView for card holder's name（持卡人姓名）：用户可输入信用卡持卡人姓名的字段。
<com.yuno.payments.features.base.ui.views.TextFieldItemView
    android:id="@+id/textField_name" />
  • SpinnerFieldItemView 用于选择身份证件类型：选择器：信用卡持卡人可在此选择身份证件类型。
<com.yuno.payments.features.base.ui.views.SpinnerFieldItemView
    android:id="@+id/spinner_document_type" />
  • TextFieldItemView 用于输入身份证号码：用户可在此输入信用卡持有人的身份证件号码。
<com.yuno.payments.features.base.ui.views.TextFieldItemView
    android:id="@+id/textField_user_document" />
  • PhoneInformationView 客户电话号码：用户可根据需要输入电话号码的字段。除了提供 Android id必须具备 gone 知名度。
<com.yuno.payments.features.base.ui.views.PhoneInformationView
    android:id="@+id/layout_phone_information"
		android:visibility="gone" />
  • Installments:显示卡分期付款旋转器的组件。除了提供 Android id必须具备 gone 的可见性，您需要添加 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's TextView:显示 Yuno 已验证表格的文字。
<TextView
        android:id="@+id/textView_secure_payment" />
  • CustomYunoSwitch:这是一个开关组件，可让用户选择将卡用作信用卡还是借记卡。除了提供 Android id必须具备 gone 知名度。
<com.yuno.payments.features.base.ui.views.CustomYunoSwitch
                android:id="@+id/switch_cardType"
                android:visibility="gone" />
  • CustomYunoSwitch:显示开关工作原理的工具提示。除了提供 Android id必须具备 gone 可见性。Yuno 建议将此组件安装在开关旁边。
<ImageView
                android:id="@+id/switch_tooltip"
                android:src="@drawable/ic_thin_info"
                android:visibility="gone"/>
  • AppCompatCheckBox:复选框：用户可以用来选择是否为将来的购物保存信用卡。
<androidx.appcompat.widget.AppCompatCheckBox
android:id="@+id/checkBox_save_card" />
  • Button:它验证信用卡表单并继续付款流程。当用户点击该按钮时，SDK 会提交表单并将信用卡信息发送给 Yuno。
<Button
    android:id="@+id/button_complete_form" />

适用于 v1.10.0 及更高版本的组件

以下配置仅适用于 SDK v1.10.0 及更高版本。

  • TextFieldItemView 用于输入客户地址：它用于在需要时输入客户地址。确保在指定的 Android 系统中使用。 id (@+id/textField_address) 并设置为 gone 默认情况下是可见的。
<com.yuno.payments.features.base.ui.views.TextFieldItemView
    android:id="@+id/textField_address"
    android:visibility="gone" />
  • TextFieldItemView 用于客户所在州：它允许客户在需要时输入自己的状态。必须与已定义的 Android id (@+id/textField_state)，并应具有 gone 作为默认可见性。
<com.yuno.payments.features.base.ui.views.TextFieldItemView
    android:id="@+id/textField_state"
    android:visibility="gone" />
  • TextFieldItemView 用于输入客户的城市： 用于输入客户所在城市。应与提供的 Android id (@+id/textField_city)，并保持默认的可见度设置为 gone.
<com.yuno.payments.features.base.ui.views.TextFieldItemView
    android:id="@+id/textField_city"
    android:visibility="gone" />
  • TextFieldItemView 客户邮政编码：客户可在此处输入邮政编码。确保使用指定的 Android id (@+id/textField_zip_cod)，并具有 gone 默认情况下是可见的：
<com.yuno.payments.features.base.ui.views.TextFieldItemView
    android:id="@+id/textField_zip_code"
    android:visibility="gone" />
  • SpinnerFieldItemView 客户的国家：该 SpinnerFieldItemView 可在必要时选择客户所在国家。它必须与已定义的 Android id (@+id/spinner_country) ，默认可见度应为 gone.
<com.yuno.payments.features.base.ui.views.SpinnerFieldItemView
    android:id="@+id/spinner_country"
    android:visibility="gone" />
  • SpinnerFieldItemView 客户性别：用于在需要时选择客户的性别。确保与已定义的 Android 一起使用 id (@+id/spinner_gender) 并设置为 gone 默认情况下是可见的。
<com.yuno.payments.features.base.ui.views.SpinnerFieldItemView
    android:id="@+id/spinner_gender"
    android:visibility="gone" />

地址自动补全

商家可在Android SDK中启用或禁用地址自动完成功能。启用时，SDK将根据邮政编码查询自动填充地址字段；禁用时，用户需手动输入所有地址信息。

约 1 个月前已更新