# 自定义外观

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

# iOS

> This is a iOS for when platform is ios. View the full page at https://docs.stripe.com/elements/appearance-api/mobile?platform=ios.

[移动版 Payment Element](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=ios) 支持视觉定制，可以使其与您的应用程序在设计风格上相匹配。布局保持不变，但您可以通过在 [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html) 对象上使用[外观](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV10appearanceAC10AppearanceVvp)属性来修改颜色、字体等。

1. 先开始自定义[字体](https://docs.stripe.com/elements/appearance-api/mobile.md#fonts-ios)
1. 自定义[颜色](https://docs.stripe.com/elements/appearance-api/mobile.md#colors-ios)以匹配您的应用程序
1. 自定义[形状](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-ios)，如边框半径
1. 微调[特定组件](https://docs.stripe.com/elements/appearance-api/mobile.md#specific-ui-components-ios)
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-before-after-example.ad6a9aad238be9b198e9ebbc77ebe1d4.png)

```swift
var configuration = PaymentSheet.Configuration()
// The following code creates the appearance shown in the screenshot abovevar appearance = PaymentSheet.Appearance()
appearance.font.base = UIFont(name: "AvenirNext-Regular", size: UIFont.systemFontSize)!
appearance.cornerRadius = 12
appearance.shadow = .disabled
appearance.borderWidth = 0.5
appearance.colors.background = .white
appearance.colors.primary = UIColor(red: 36/255, green: 36/255, blue: 47/255, alpha: 1)
appearance.colors.textSecondary = .black
appearance.colors.componentPlaceholderText = UIColor(red: 115/255, green: 117/255, blue: 123/255, alpha: 1)
appearance.colors.componentText = .black
appearance.colors.componentBorder = .clear
appearance.colors.componentDivider = UIColor(red: 195/255, green: 213/255, blue: 200/255, alpha: 1)
appearance.colors.componentBackground = UIColor(red: 243/255, green: 248/255, blue: 250/247, alpha: 1)
appearance.primaryButton.cornerRadius = 20
configuration.appearance = appearance
let paymentSheet = PaymentSheet(/* ... */, configuration: configuration)
```

## 字体

通过将 [font.base](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Font.html#/s:6Stripe12PaymentSheetC10AppearanceV4FontV4baseSo6UIFontCvp) 设置为任何大小和粗细的自定义字体的任何变体来自定义字体。移动 Payment Element 使用自定义字体的字体族，但自行决定大小和粗细。

要增大或减小所有文本的大小，请设置 [font.sizeScaleFactor](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Font.html#/s:6Stripe12PaymentSheetC10AppearanceV4FontV15sizeScaleFactor12CoreGraphics7CGFloatVvp)。在显示字体大小之前，我们会将字体大小乘以这个值。如果自定义字体略大于或小于系统字体，这将非常有用。

```swift
var configuration = PaymentSheet.Configuration()
configuration.appearance.font.base = UIFont(name: "CustomFont-Regular", size: UIFont.systemFontSize)
configuration.appearance.font.sizeScaleFactor = 1.15 // Increase the size of all text by 1.15x
```

## 颜色

通过修改 [Appearance.Colors](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV) 中定义的颜色类别来自定义移动 Payment Element 中的颜色。每个颜色类别确定 UI 中一个或多个组件的颜色。例如，[primary](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Colors.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV7primarySo7UIColorCvp) 定义**支付**按钮和所选项目（如**保存此卡**复选框）的颜色。请参阅下图，查看与每个颜色类别关联的一些 UI 元素。
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-colors.2063c1f71eaa17656639098f3f4d29d6.png)

> 若要支持深色模式，请使用 [init(dynamicProvider:)](https://developer.apple.com/documentation/uikit/uicolor/3238041-init) 初始化自定义 UIColors。

## 形状

除字体和颜色外，您还可以自定义整个移动 Payment Element 中使用的[角半径](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV12cornerRadius12CoreGraphics7CGFloatVvp)、[边框宽度](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV11borderWidth12CoreGraphics7CGFloatVvp)和[阴影](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV6shadowAE6ShadowVvp)。
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-shapes.ee37fc31111aa78f26af4045a3857468.png)

## 特定 UI 组件

以上各节介绍了跨多个 UI 组件广泛影响移动 Payment Element 的自定义选项。我们还专门为主按钮（例如**支付**按钮）提供了自定义选项。有关自定义选项的完整列表，请参阅 [Appearance.PrimaryButton](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/PrimaryButton.html)。

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

> 如认为我们需要添加更多自定义选项，[敬请告知](https://github.com/stripe/stripe-ios/issues/new/choose)。


# Android

> This is a Android for when platform is android. View the full page at https://docs.stripe.com/elements/appearance-api/mobile?platform=android.

[移动版 Payment Element](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=android) 支持视觉定制，可以使其与您的应用程序在设计风格上相匹配。布局保持不变，但您可以通过创建带有[外观](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html#-431946322%2FProperties%2F2002900378)对象的 [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html) 对象来修改颜色、字体等。

1. 先开始自定义[字体](https://docs.stripe.com/elements/appearance-api/mobile.md#fonts-android)
1. 自定义[颜色](https://docs.stripe.com/elements/appearance-api/mobile.md#colors-android)以匹配您的应用程序
1. 自定义[形状](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-android)，如边框半径
1. 微调[特定组件](https://docs.stripe.com/elements/appearance-api/mobile.md#specific-ui-components-android)
![](https://b.stripecdn.com/docs-statics-srv/assets/android-appearance-before-after-example.acf584a69eb99f47fe0b5ffab24818b8.png)

```kotlin
// The following code creates the appearance shown in the screenshot aboveval 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](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-typography/index.html#-786783041%2FProperties%2F2002900378) 设置为自定义字体的资源 ID 来自定义字体。移动 Payment Element 使用自定义字体的字体族，但自行决定大小和粗细。

要增大或减小文本大小，请设置 [typography.sizeScaleFactor](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-typography/index.html#1477076499%2FProperties%2F2002900378)。在显示字体大小之前，Stripe 会将字体大小乘以这个值。如果自定义字体略大于或小于系统字体，该设置将非常有用。

```kotlin
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.Builder("Example, Inc.")
    // …
    .appearance(appearance)
    .build()
```

## 颜色

通过修改 [PaymentSheet.Colors](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-colors/index.html) 中定义的颜色类别来自定义移动 Payment Element 中的颜色。每个颜色类别确定 UI 中一个或多个组件的颜色。例如，[primary](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-colors/index.html#1242160296%2FProperties%2F2002900378) 定义**支付**按钮和所选项目（如**保存此卡**复选框）的颜色。请参阅下图，查看与每个颜色类别关联的一些 UI 元素。

> 要支持深色模式，请设置 [appearance.colorsDark](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#945237406%2FProperties%2F2002900378)。您可以通过将 [appearance.colorsDark](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#945237406%2FProperties%2F2002900378) 设置为与 [appearance.colorsLight](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#2092498352%2FProperties%2F2002900378) 相同的值来有效禁用暗色模式
![](https://b.stripecdn.com/docs-statics-srv/assets/android-appearance-colors.413c76aaf01a54c25478cb8d7532c7e7.png)

## 形状

除了自定义字体和颜色外，您还可以通过设置 [appearance.shapes](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#-2108514638%2FProperties%2F2002900378) 来自定义整个移动 Payment Element 中使用的[边框半径](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-shapes/index.html#-1129752289%2FProperties%2F2002900378)和[边框宽度](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-shapes/index.html#495484314%2FProperties%2F2002900378)。
![](https://b.stripecdn.com/docs-statics-srv/assets/android-appearance-shapes.800169ea6a81e0bfdbccbb18bfdf7121.png)

## 特定 UI 组件

以上各节介绍了跨多个 UI 组件广泛影响移动 Payment Element 的自定义选项。我们还专门为主按钮（例如**支付**按钮）提供了自定义选项。有关自定义选项的完整列表，请参阅 [Appearance.PrimaryButton](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-primary-button/index.html)。

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

> 如有其他定制选项的想法，[敬请告知](https://github.com/stripe/stripe-android/issues/new/choose)。


# React Native

> This is a React Native for when platform is react-native. View the full page at https://docs.stripe.com/elements/appearance-api/mobile?platform=react-native.

[移动版 Payment Element](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=react-native) 支持视觉定制，可以使其与您的应用程序在设计风格上相匹配。布局保持不变，但您可以在调用 [initPaymentSheet()](https://stripe.dev/stripe-react-native/api-reference/index.html#initPaymentSheet) 时包含`外观`参数，从而修改颜色、字体等。

1. 先开始自定义[字体](https://docs.stripe.com/elements/appearance-api/mobile.md#fonts-react-native)
1. 自定义[颜色](https://docs.stripe.com/elements/appearance-api/mobile.md#colors-react-native)以匹配您的应用程序
1. 自定义[形状](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-react-native)，如边框半径
1. 微调[特定组件](https://docs.stripe.com/elements/appearance-api/mobile.md#specific-ui-components-react-native)
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-before-after-example.ad6a9aad238be9b198e9ebbc77ebe1d4.png)

```js
// The following code creates the appearance shown in the screenshot aboveconst 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](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#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`。在显示字体大小之前，我们会将字体大小乘以这个值。如果自定义字体略大于或小于系统字体，这将非常有用。

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

## 颜色

通过修改 [Appearance.Colors](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV) 中定义的颜色类别来自定义移动 Payment Element 中的颜色。每个颜色类别确定 UI 中一个或多个组件的颜色。例如，[primary](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Colors.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV7primarySo7UIColorCvp) 定义**支付**按钮和所选项目（如**保存此卡**复选框）的颜色。请参阅下图，查看与每个颜色类别关联的一些 UI 元素。
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-colors.2063c1f71eaa17656639098f3f4d29d6.png)

> 若要支持深色模式，请使用 [init(dynamicProvider:)](https://developer.apple.com/documentation/uikit/uicolor/3238041-init) 初始化自定义 UIColors。

## 形状

除字体和颜色外，您还可以自定义整个移动 Payment Element 中使用的[边框半径](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#AppearanceParams)、[边框宽度](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#AppearanceParams)和[阴影](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#ShadowConfig)。
![](https://b.stripecdn.com/docs-statics-srv/assets/react-native-appearance-shapes.a71c754a951ea02fff121f584953ba33.png)

## 特定 UI 组件

以上部分介绍了跨多个 UI 组件广泛影响移动 Payment Element 的自定义选项。我们还专门为主按钮（例如**支付**按钮）提供了自定义选项。有关自定义选项的完整列表，请参阅 [PrimaryButtonConfig](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#PrimaryButtonConfig)。

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

> 如认为我们需要添加更多自定义选项，[敬请告知](https://github.com/stripe/stripe-react-native/issues/new/choose)。