自定义外观

使用 Appearance API 自定义您的移动集成。

移动 Payment Element 支持视觉自定义，使您可以匹配应用程序的设计。布局保持一致，但您可以通过用外观对象创建 PaymentSheet.Configuration 对象来修改颜色、字体等。

先开始自定义字体
自定义颜色以匹配您的应用程序
自定义形状，如边框半径
微调特定组件

// The following code creates the appearance shown in the screenshot above
val appearance = PaymentSheet.Appearance(
   colorsLight = PaymentSheet.Colors(
       primary = Color(red = 36, green = 36, blue = 47),
       surface = Color.White,
       component = Color(red = 243, green = 248, blue = 245),
       componentBorder = Color.Transparent,
       componentDivider = Color.Black,
       onComponent = Color.Black,
       subtitle = Color.Black,
       placeholderText = Color(red = 115, green = 117, blue = 123),
       onSurface = Color.Black,
       appBarIcon = Color.Black,
       error = Color.Red,
   ),
   shapes = PaymentSheet.Shapes(
       cornerRadiusDp = 12.0f,
       borderStrokeWidthDp = 0.5f
   ),
   typography = PaymentSheet.Typography.default.copy(
       fontResId = R.font.avenir_next
   ),
   primaryButton = PaymentSheet.PrimaryButton(
   shape = PaymentSheet.PrimaryButtonShape(
       cornerRadiusDp = 20f
   ),
)

// ...

paymentSheet.presentWithPaymentIntent(
   clientSecret,
   PaymentSheet.Configuration(
       merchantDisplayName = merchantName,
       appearance = appearance
   )
)

字体

通过将 typography.fontResId 设置为自定义字体的资源 ID 来自定义字体。移动 Payment Element 使用自定义字体的字体族，但自行决定大小和粗细。

要增大或减小文本大小，请设置 typography.sizeScaleFactor。在显示字体大小之前，Stripe 会将字体大小乘以这个值。如果自定义字体略大于或小于系统字体，该设置将非常有用。

val appearance = PaymentSheet.Appearance(
    // …
    typography = PaymentSheet.Typography.default.copy(
        sizeScaleFactor = 1.15f, // Increase the size of all text by 1.15x
        fontResId = R.font.myFont,
    ),
)
val configuration = PaymentSheet.Configuration(
    // …
    appearance = appearance
)

颜色

通过修改 PaymentSheet.Colors 中定义的颜色类别来自定义移动 Payment Element 中的颜色。每个颜色类别确定 UI 中一个或多个组件的颜色。例如，primary 定义支付按钮和所选项目（如保存此卡复选框）的颜色。请参阅下图，查看与每个颜色类别关联的一些 UI 元素。

注意

要支持深色模式，请设置 appearance.colorsDark。您可以通过将 appearance.colorsDark 设置为与 appearance.colorsLight 相同的值来有效禁用暗色模式

形状

除了自定义字体和颜色外，您还可以通过设置 appearance.shapes 来自定义整个移动 Payment Element 中使用的边框半径和边框宽度。

特定 UI 组件

以上各节介绍了跨多个 UI 组件广泛影响移动 Payment Element 的自定义选项。我们还专门为主按钮（例如支付按钮）提供了自定义选项。有关自定义选项的完整列表，请参阅 Appearance.PrimaryButton。

特定 UI 组件的自定义选项优先于其他值。例如，appearance.primaryButton.shapes.cornerRadius 会覆盖 appearance.shapes.cornerRadius 的值。

注意

如有其他定制选项的想法，敬请告知。