# 自定义外观 自定义结账页面的颜色、字体、形状等。 # 托管页面 > This is a 托管页面 for when payment-ui is stripe-hosted. View the full page at https://docs.stripe.com/payments/checkout/customization/appearance?payment-ui=stripe-hosted. ## 应用品牌设置 #### 管理平台 您可以将自定义的品牌信息应用到 Checkout。进入[品牌设置](https://dashboard.stripe.com/settings/branding/checkout)： - 上传一个 Logo 或图标 - 自定义 Checkout 页面的背景颜色、按钮颜色、字体和样式 ### 用 Connect 设置品牌信息 针对使用 `on_behalf_of` 的定向收款和平台执行的直接收款，Checkout 使用 Connect 子账户的品牌设置。对于无法访问完整 Stripe 账户管理平台的 Connect 子账户（包括 Express 账户和 Custom 账户），平台可通过 [Accounts](https://docs.stripe.com/api/accounts/object.md#account_object-settings-branding) API 配置品牌设置。 #### API 您可以使用 [branding_settings](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-branding_settings) 参数来自定义 Checkout Session 品牌： - 设置徽标或图标 - 自定义 Checkout 页面的背景颜色、按钮颜色、字体和样式 - 更改品牌名称 默认情况下，我们会将管理平台中设置的自定义品牌用于 Checkout Sessions。如果您在 `branding_settings` 中省略了某个字段，Checkout 会使用管理平台中的默认值。 如果同时传入[徽标](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-branding_settings-logo)和[图标](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-branding_settings-icon)，Checkout 页面将显示徽标，并使用图标作为收藏夹图标。如果只传入`徽标`，Checkout 页面将显示徽标，并使用[品牌设置](https://dashboard.stripe.com/settings/branding/checkout)中的图标作为收藏夹图标。如果只传入`图标`，Checkout 页面将显示图标，并将其作为收藏夹图标。 > [订阅服务](https://docs.stripe.com/receipts.md#invoice-and-subscription-payment-receipts)相关账单，以及通过 Checkout Session 生成的[一次性付款](https://docs.stripe.com/payments/checkout/receipts.md?payment-ui=stripe-hosted#paid-invoices-hosted)相关账单，仍会使用在管理平台中设置的品牌标识。请确保使用的品牌标识具有一致性且能被客户识别，以减少客户困惑，降低拒付风险。 ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "branding_settings[icon][type]=file" \ -d "branding_settings[icon][file]={{FILE_ID}}" \ -d "branding_settings[logo][type]=file" \ -d "branding_settings[logo][file]={{FILE_ID}}" \ -d "branding_settings[display_name]=Powdur" \ -d "branding_settings[font_family]=roboto" \ -d "branding_settings[border_style]=rectangular" \ --data-urlencode "branding_settings[background_color]=#7D8CC4" \ --data-urlencode "branding_settings[button_color]=#A0D2DB" \ --data-urlencode "success_url=https://example.com/success" ``` ### 用 Connect 设置品牌信息 针对使用 `on_behalf_of` 的定向收款和平台执行的直接收款，Checkout 使用 Connect 子账户的品牌设置。对于无法访问完整 Stripe 账户管理平台的 Connect 子账户（包括 Express 账户和 Custom 账户），平台可通过 [Accounts](https://docs.stripe.com/api/accounts/object.md#account_object-settings-branding) API 完成品牌设置。要覆盖 Connect 子账户的品牌设置，请在创建 Checkout Session 时设置 [branding_settings](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-branding_settings)。 ## 更改品牌名称 您可以通过修改[企业详细信息设置](https://dashboard.stripe.com/settings/business-details)中的**企业名称**字段或设置 [branding_settings.display_name](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-branding_settings-display_name)，来更改 Checkout 页面的名称。 您还可以[自定义 Stripe 托管结账页面的域名](https://docs.stripe.com/payments/checkout/custom-domains.md)。 > 确保使用前后一致且客户能识别的企业名称，降低混淆和撤单风险。网络规则通常也要求使用准确一致的企业名称和徽标。 ## 字体兼容性 每个自定义字体都与一个[区域设置子集](https://docs.stripe.com/js/appendix/supported_locales)兼容。您可以通过在创建 Session 时传递区域设置字段来显式设置 Checkout Session 的区域设置，也可以使用默认的 `auto` 设置，让 Checkout 根据客户的浏览器设置选择区域。 下表列出了不支持每种字体的区域设置。这些区域设置中的语言可能超出了给定字体支持的字符范围。在这些情况下，Stripe 会用适当的系统回退字体来呈现 Checkout 页面。如果您选择了 Serif 字体，但区域设置不支持该字体，则 Stripe 将返回到基于 Serif 的字体。 | 字体族 | 不支持的区域 | | --------------- | ---------------------------------------------------------------------------------------------------------- | | Be Vietnam Pro | `bg`, `el`, `ja`, `ko`, `ru`, `th`, `zh`, `zh-HK`, `zh-TW` | | Bitter | `el`, `ja`, `ko`, `th`, `zh`, `zh-HK`, `zh-TW` | | Chakra Petch | `bg`, `el`, `ja`, `ko`, `ru`, `zh`, `zh-HK`, `zh-TW` | | Hahmlet | `bg`, `el`, `ja`, `ko`, `ru`, `th`, `zh`, `zh-HK`, `zh-TW` | | Inconsolata | `bg`, `el`, `ja`, `ko`, `ru`, `th`, `zh`, `zh-HK`, `zh-TW` | | Inter | `ja`, `ko`, `th`, `zh`, `zh-HK`, `zh-TW` | | Lato | `bg`, `cs`, `el`, `hr`, `ja`, `ko`, `lt`, `lv`, `mt`, `ro`, `ru`, `sl`, `th`, `vi`, `zh`, `zh-HK`, `zh-TW` | | Lora | `el`, `ja`, `ko`, `th`, `zh`, `zh-HK`, `zh-TW` | | M PLUS 1 Code | `bg`, `el`, `ko`, `lt`, `lv`, `ru`, `sk`, `sl`, `th`, `tr` | | Montserrat | `el`, `hr`, `ja`, `ko`, `ru`, `th`, `zh`, `zh-HK`, `zh-TW` | | Nunito | `el`, `ja`, `ko`, `th`, `zh`, `zh-HK`, `zh-TW` | | Noto Sans | `ja`, `ko`, `th` | | Noto Serif | `th` | | Open Sans | `ja`, `ko`, `th`, `zh`, `zh-HK`, `zh-TW` | | PT Sans | `el`, `ja`, `ko`, `th`, `vi`, `zh`, `zh-HK`, `zh-TW` | | PT Serif | `el`, `ja`, `ko`, `th`, `vi`, `zh`, `zh-HK`, `zh-TW` | | Pridi | `bg`, `el`, `ja`, `ko`, `ru`, `zh`, `zh-HK`, `zh-TW` | | Raleway | `el`, `ja`, `ko`, `th`, `zh`, `zh-HK`, `zh-TW` | | Roboto | `ja`, `ko`, `zh`, `zh-HK`, `zh-TW` | | Roboto Slab | `ja`, `ko`, `th`, `zh`, `zh-HK`, `zh-TW` | | Source Sans Pro | `bg`, `el`, `ja`, `ko`, `ru`, `th`, `zh`, `zh-HK`, `zh-TW` | | Titillium Web | `bg`, `el`, `ja`, `ko`, `th`, `vi`, `zh`, `zh-HK`, `zh-TW` | | Ubuntu Mono | `ja`, `ko`, `th`, `zh`, `zh-HK`, `zh-TW` | | Zen Maru Gothic | `bg`, `cs`, `el`, `hr`, `ko`, `lt`, `lv`, `pl`, `ro`, `ru`, `sk`, `th`, `vi` | # 嵌入式页面 > This is a 嵌入式页面 for when payment-ui is embedded-form. View the full page at https://docs.stripe.com/payments/checkout/customization/appearance?payment-ui=embedded-form. ## 应用品牌设置 #### 管理平台 您可以将自定义的品牌信息应用到 Checkout。前往[品牌设置](https://dashboard.stripe.com/settings/branding/checkout)以自定义嵌入表单的背景颜色、按钮颜色、字体和形状。 ### 用 Connect 设置品牌信息 针对使用 `on_behalf_of` 的定向收款和平台执行的直接收款，Checkout 使用 Connect 子账户的品牌设置。对于无法访问完整 Stripe 账户管理平台的 Connect 子账户（包括 Express 账户和 Custom 账户），平台可通过 [Accounts](https://docs.stripe.com/api/accounts/object.md#account_object-settings-branding) API 配置品牌设置。 #### API 您可以使用 [branding_settings](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-branding_settings) 参数来自定义 Checkout Session 品牌： - 自定义 Checkout 页面的背景颜色、按钮颜色、字体和样式 - 更改品牌名称 默认情况下，我们会将管理平台中设置的自定义品牌用于 Checkout Sessions。如果您在 `branding_settings` 中省略了某个字段，Checkout 会使用管理平台中的默认值。 > [订阅服务](https://docs.stripe.com/receipts.md#invoice-and-subscription-payment-receipts)相关账单，以及通过 Checkout Session 生成的[一次性付款](https://docs.stripe.com/payments/checkout/receipts.md?payment-ui=stripe-hosted#paid-invoices-hosted)相关账单，仍会使用在管理平台中设置的品牌标识。请确保使用的品牌标识具有一致性且能被客户识别，以减少客户困惑，降低拒付风险。 ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "branding_settings[display_name]=Powdur" \ -d "branding_settings[font_family]=roboto" \ -d "branding_settings[border_style]=rectangular" \ --data-urlencode "branding_settings[background_color]=#7D8CC4" \ --data-urlencode "branding_settings[button_color]=#A0D2DB" \ -d ui_mode=embedded_page \ --data-urlencode "return_url=https://example.com/return" ``` ### 用 Connect 设置品牌信息 针对使用 `on_behalf_of` 的定向收款和平台执行的直接收款，Checkout 使用 Connect 子账户的品牌设置。对于无法访问完整 Stripe 账户管理平台的 Connect 子账户（包括 Express 账户和 Custom 账户），平台可通过 [Accounts](https://docs.stripe.com/api/accounts/object.md#account_object-settings-branding) API 配置品牌设置。要覆盖 Connect 子账户的品牌设置，请在创建 Checkout Session 时设置 [branding_settings](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-branding_settings)。 ## 更改品牌名称 您可以通过修改[企业详细信息设置](https://dashboard.stripe.com/settings/business-details)中的**企业名称**字段或设置 [branding_settings.display_name](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-branding_settings-display_name) 来更改嵌入式表单中的名称。 > 确保使用前后一致且客户能识别的企业名称，降低混淆和撤单风险。网络规则通常也要求使用准确一致的企业名称和徽标。 ## 字体兼容性 每个自定义字体都与一个[区域设置子集](https://docs.stripe.com/js/appendix/supported_locales)兼容。您可以通过在创建 Session 时传递区域设置字段来显式设置 Checkout Session 的区域设置，也可以使用默认的 `auto` 设置，让 Checkout 根据客户的浏览器设置选择区域。 下表列出了不支持每种字体的区域设置。这些区域设置中的语言可能超出了给定字体支持的字符范围。在这些情况下，Stripe 会用适当的系统回退字体来呈现 Checkout 页面。如果您选择了 Serif 字体，但区域设置不支持该字体，则 Stripe 将返回到基于 Serif 的字体。 | 字体族 | 不支持的区域 | | --------------- | ---------------------------------------------------------------------------------------------------------- | | Be Vietnam Pro | `bg`, `el`, `ja`, `ko`, `ru`, `th`, `zh`, `zh-HK`, `zh-TW` | | Bitter | `el`, `ja`, `ko`, `th`, `zh`, `zh-HK`, `zh-TW` | | Chakra Petch | `bg`, `el`, `ja`, `ko`, `ru`, `zh`, `zh-HK`, `zh-TW` | | Hahmlet | `bg`, `el`, `ja`, `ko`, `ru`, `th`, `zh`, `zh-HK`, `zh-TW` | | Inconsolata | `bg`, `el`, `ja`, `ko`, `ru`, `th`, `zh`, `zh-HK`, `zh-TW` | | Inter | `ja`, `ko`, `th`, `zh`, `zh-HK`, `zh-TW` | | Lato | `bg`, `cs`, `el`, `hr`, `ja`, `ko`, `lt`, `lv`, `mt`, `ro`, `ru`, `sl`, `th`, `vi`, `zh`, `zh-HK`, `zh-TW` | | Lora | `el`, `ja`, `ko`, `th`, `zh`, `zh-HK`, `zh-TW` | | M PLUS 1 Code | `bg`, `el`, `ko`, `lt`, `lv`, `ru`, `sk`, `sl`, `th`, `tr` | | Montserrat | `el`, `hr`, `ja`, `ko`, `ru`, `th`, `zh`, `zh-HK`, `zh-TW` | | Nunito | `el`, `ja`, `ko`, `th`, `zh`, `zh-HK`, `zh-TW` | | Noto Sans | `ja`, `ko`, `th` | | Noto Serif | `th` | | Open Sans | `ja`, `ko`, `th`, `zh`, `zh-HK`, `zh-TW` | | PT Sans | `el`, `ja`, `ko`, `th`, `vi`, `zh`, `zh-HK`, `zh-TW` | | PT Serif | `el`, `ja`, `ko`, `th`, `vi`, `zh`, `zh-HK`, `zh-TW` | | Pridi | `bg`, `el`, `ja`, `ko`, `ru`, `zh`, `zh-HK`, `zh-TW` | | Raleway | `el`, `ja`, `ko`, `th`, `zh`, `zh-HK`, `zh-TW` | | Roboto | `ja`, `ko`, `zh`, `zh-HK`, `zh-TW` | | Roboto Slab | `ja`, `ko`, `th`, `zh`, `zh-HK`, `zh-TW` | | Source Sans Pro | `bg`, `el`, `ja`, `ko`, `ru`, `th`, `zh`, `zh-HK`, `zh-TW` | | Titillium Web | `bg`, `el`, `ja`, `ko`, `th`, `vi`, `zh`, `zh-HK`, `zh-TW` | | Ubuntu Mono | `ja`, `ko`, `th`, `zh`, `zh-HK`, `zh-TW` | | Zen Maru Gothic | `bg`, `cs`, `el`, `hr`, `ko`, `lt`, `lv`, `pl`, `ro`, `ru`, `sk`, `th`, `vi` |