# デザインをカスタマイズする Checkout ページの色、フォント、形状などをカスタマイズします。 # 完全ホスト型ページ > 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)に移動します。 - ロゴまたはアイコンをアップロードする - Checkout ページの背景色、ボタンの色、フォント、形状をカスタマイズする ### Connect でのブランディング ダイレクト支払いおよび`on_behalf_of`を使用したデスティネーション支払いを実行するプラットフォームの場合、Checkout は連結アカウントのブランド設定を使用します。Stripe ダッシュボードの全機能を利用できない連結アカウント (Express アカウントとカスタムアカウントを含む) の場合は、[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 はダッシュボードのデフォルト値を適用します。 [logo](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-branding_settings-logo) と [icon](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-branding_settings-icon) の両方を渡すと、Checkout ページにロゴが表示され、そのアイコンがファビコンとして使用されます。`logo` のみを渡すと、Checkout ページにロゴが表示され、Checkout には [Branding Settings](https://dashboard.stripe.com/settings/branding/checkout) のアイコンがファビコンとして使用されます。`icon` のみを渡すと、決済ページにアイコンが表示され、そのアイコンもファビコンとして使用されます。 > [サブスクリプション](https://docs.stripe.com/receipts.md#invoice-and-subscription-payment-receipts) の請求書とチェックアウトセッションからの [1 回限りの支払い](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は連結アカウントのブランド設定を使用します。Stripe ダッシュボードの全機能を利用できない連結アカウント (Express アカウントとカスタムアカウントを含む) の場合は、[Accounts](https://docs.stripe.com/api/accounts/object.md#account_object-settings-branding) API を使用してブランド設定を行うことができます。連結アカウントのブランド設定を上書きするには、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) を設定します。 また、Stripe がオンラインで提供する Checkout ページの[ドメイン名もカスタマイズ](https://docs.stripe.com/payments/checkout/custom-domains.md)できます。 > 混乱やチャージバックのリスクを減らすため、必ず顧客が認識できる一貫性のあるビジネス名を使用してください。ネットワークルールでは、通常、正確で一貫性のあるビジネス名とロゴを使用する必要があります。 ## フォントの互換性 各カスタムフォントは、[ロケールのサブセット](https://docs.stripe.com/js/appendix/supported_locales)と互換性があります。セッションの作成時にロケールフィールドを渡して Checkout セッションのロケールを明示的に設定することも、顧客のブラウザー設定に基づいてロケールが選択される Checkout のデフォルトの `auto` 設定を使用することもできます。 次の表は、各フォントでサポートされていないロケールの一覧です。これらのロケールの言語は、特定のフォントがサポートしている文字の範囲外になる可能性があります。そのような場合、Stripe は、Checkout ページを適切なシステムのフォールバックフォントで表示します。たとえば、選択した Serif フォントがロケールでサポートされていない場合、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-page. View the full page at https://docs.stripe.com/payments/checkout/customization/appearance?payment-ui=embedded-page. ## ブランディングを適用する #### ダッシュボード Checkout にカスタムのブランド設定を適用できます。[ブランディング設定](https://dashboard.stripe.com/settings/branding/checkout)に移動して、埋め込みフォームの背景色、ボタンの色、フォント、形状をカスタマイズします。 ### Connect でのブランディング ダイレクト支払いおよび`on_behalf_of`を使用したデスティネーション支払いを実行するプラットフォームの場合、Checkout は連結アカウントのブランド設定を使用します。Stripe ダッシュボードの全機能を利用できない連結アカウント (Express アカウントとカスタムアカウントを含む) の場合は、[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) の請求書とチェックアウトセッションからの [1 回限りの支払い](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 は連結アカウントのブランド設定を使用します。Stripe ダッシュボードの全機能を利用できない連結アカウント (Express アカウントとカスタムアカウントを含む) の場合は、[Accounts](https://docs.stripe.com/api/accounts/object.md#account_object-settings-branding) API を使用してブランド設定を行うことができます。連結アカウントのブランド設定を上書きするには、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)と互換性があります。セッションの作成時にロケールフィールドを渡して Checkout セッションのロケールを明示的に設定することも、顧客のブラウザー設定に基づいてロケールが選択される Checkout のデフォルトの `auto` 設定を使用することもできます。 次の表は、各フォントでサポートされていないロケールの一覧です。これらのロケールの言語は、特定のフォントがサポートしている文字の範囲外になる可能性があります。そのような場合、Stripe は、Checkout ページを適切なシステムのフォールバックフォントで表示します。たとえば、選択した Serif フォントがロケールでサポートされていない場合、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` |