自定义外观

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

移动版 Payment Element 支持视觉定制，可以使其与您的应用程序在设计风格上相匹配。布局保持不变，但您可以在调用 initPaymentSheet() 时包含外观参数，从而修改颜色、字体等。

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

// The following code creates the appearance shown in the screenshot above
const customAppearance = {
 font: {
   family:
     Platform.OS === 'android' ? 'avenirnextregular' : 'AvenirNext-Regular',
 },
 shapes: {
   borderRadius: 12,
   borderWidth: 0.5,
 },
 primaryButton: {
   shapes: {
    borderRadius: 20,
   },
 },
 colors: {
   primary: '#fcfdff',
   background: '#ffffff',
   componentBackground: '#f3f8fa',
   componentBorder: '#f3f8fa',
   componentDivider: '#000000',
   primaryText: '#000000',
   secondaryText: '#000000',
   componentText: '#000000',
   placeholderText: '#73757b',
 },
};

const { error } = await initPaymentSheet({
 ...
 appearance: customAppearance,
});

字体

通过将 FontConfig 传入 font 并设置 family 来自定义字体。在 iOS 上，family 的值应该是 Font Book 中的“PostScript 名称”。在 Android 上，将 .ttf 或 .otf 文件从 android/app/src/main/assets/font/<your-font> 复制到 android/app/src/main/res/font/<your-font> 并使用字体文件的名称（仅包含小写的字母数字字符）。移动 Payment Element 使用自定义字体的字体族，但自行决定大小和粗细。

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

...
const appearance: AppearanceParams = {
   font: {
     family: Platform.OS === 'android' ? 'avenirnextregular' : 'AvenirNext-Regular',
     scale: 1.15,
   },
 },

颜色

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

注意

若要支持深色模式，请使用 init(dynamicProvider:) 初始化自定义 UIColors。

形状

除字体和颜色外，您还可以自定义整个移动 Payment Element 中使用的边框半径、边框宽度和阴影。

特定 UI 组件

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

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

注意

如认为我们需要添加更多自定义选项，敬请告知。