> ## Documentation Index
> Fetch the complete documentation index at: https://waffo.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# チェックアウトページのカスタマイズ（ブランディング、カラー、ロゴ）

> Waffo チェックアウトページのブランディング方法：Portal 内で Customization がどこにあるか、設定できるすべてのカラーとサイズ、注文作成時にフォントサイズを制御するフィールド、注文パラメーターが Portal 設定を上書きする仕組み、MID と SubMID の設定、複数ロゴとロゴ ID、ライブプレビューとその制限、チームの誰が変更を保存できるか。

このページでは、Waffo ホスト型チェックアウトページの見た目（カラー、フォント、ロゴ、マーチャント名）を扱います。
決済手段が表示される*順序*は別の設定であり、チェックアウト決済手段表示ルールのページで扱っています。
注文のライフサイクル全体でページが何をするか（再オープンされたリンク、処理中の状態、結果のリダイレクト）は、
チェックアウトページのライフサイクルと領収書のページで扱っています。

## Waffo チェックアウトの見た目はどこで設定しますか？

Merchant Portal で **Checkout → Customization** を開きます。このページには 3 つのタブと、その横にライブプレビューがあります。

| タブ | 内容 |
| - | - |
| **Features** | マーチャントロゴのアップロードとロゴ一覧 |
| **Style** | テーマとカラー、テキスト情報（ヘッダーレイアウトとフォントサイズ）、および貴社アカウントで有効化されている場合は金額表示 |
| **Cashier Ranking** | 国ごとの決済手段の表示順、および国別グループ化のスイッチ |

3 つのタブすべてにわたる変更はローカルにステージングされ、**Save** を押したときにまとめて確定されます。

## 実際に変更できるカラーとサイズは何ですか？

Style タブには、ワンクリックの出発点として 4 つのプリセットテーマ（**Default**、**Yellow**、**Dark**、**Green**）があり、
さらに次の個別コントロールがあります。

| コントロール | 対象 | 範囲 |
| - | - | - |
| `colorPrimary` | プライマリ/ブランドカラー — ボタンとアクセント | 任意の色 |
| `colorBackground` | ページ背景 | 任意の色 |
| `colorCard` | カード背景 | 任意の色 |
| `colorText` | プライマリテキスト | 任意の色 |
| `colorTextSecondary` | セカンダリテキスト | 任意の色 |
| `colorTextTertiary` | ターシャリテキスト | 任意の色 |
| `colorDanger` | エラーテキストとエラー状態 | 任意の色 |
| `colorInfo` | 情報/通知ブロック | 任意の色 |
| `colorBorder` | 枠線と区切り線 | 任意の色 |
| `fontSizeBase` | ページの基本フォントサイズ | 12〜24 px |
| `buttonRadius` | ボタンの角丸半径 | 0 px 以上 |

**Text Information** では、さらにヘッダーの先頭を **Order Description** にするか **Merchant Name** にするかを選び、
それぞれのフォントサイズ（14〜24 px）を設定します。

**Amount Display** セクション — どの通貨を主たる金額として表示するか、および主/副金額のフォントサイズ — は、
有効化されたアカウントにのみ表示されます。表示されない場合は、貴社アカウントでは有効化されていません。

プリセットテーマを選ぶとカラーとサイズは置き換えられますが、Text Information と Amount Display の選択は維持されます。

## 注文作成時にチェックアウトページのフォントサイズを制御するフィールドはどれですか？

`paymentInfo.cashierAppearance` です。これは `variables` オブジェクトを含む **JSON 文字列**で、基本フォントサイズは
その中の `fontSizeBase` キーです。

```json theme={null}
{
  "variables": {
    "fontSizeBase": "18px",
    "colorPrimary": "#2749F8",
    "buttonRadius": "24px",
    "headerDisplay": {
      "primaryDisplay": "orderDesc",
      "orderDescFontSize": "18px",
      "merchantNameFontSize": "14px"
    }
  }
}
```

キーは上の表に挙げたものとまったく同じで、サイズは `px` 単位を付けた文字列です。知っておくべき 2 つの動作：

* 値は**有効な JSON** である必要があります。不正な文字列は破棄され、注文は作成されます。その場合は Portal の設定で
  レンダリングされるだけで、理由を示すエラーはありません。
* 送信したキーのみが適用されます。省略したものはすべて Portal の設定、次にシステムデフォルトにフォールバックします。

## Portal のスタイルがチェックアウトページに反映されません。何が優先されますか？

スタイルは次の順序で解決されます（上が最優先）。

| 優先度 | ソース |
| - | - |
| 1 | 注文で送信された値（`paymentInfo.cashierAppearance`、および下記のブランドフィールド） |
| 2 | Portal の **Checkout → Customization** 設定 |
| 3 | Waffo のシステムデフォルト |

マージは**キーごと**であり、全か無かではありません。`colorPrimary` のみを設定した `cashierAppearance` は、
他のすべてのキーについて Portal の値を維持します。したがって、1 つのカラーだけがおかしく残りは正しく見える場合は、
Portal を確認する前に、連携が注文で何を送信しているかを確認してください。

同じ優先順位が 2 つのブランドフィールドにも適用されます。

| フィールド | 効果 |
| - | - |
| `brandInfo.cashierDisplayName` | そのチェックアウトセッションについて、設定済みのマーチャント表示名を上書き。最大 128 文字 |
| `brandInfo.cashierLogoUrl` | そのチェックアウトセッションについて、設定済みのロゴを上書き。最大 512 文字 |

## 新しいスタイルを保存しました。どの注文に影響しますか？

設定は**チェックアウトページがレンダリングされるとき**に読み込まれ、注文作成時に固定されるわけではありません。実際には：

* 顧客がすでに開いているチェックアウトページは影響を受けません。再読み込みされるまで、読み込み時の内容で
  レンダリングし続けます。
* 保存後に開かれたチェックアウトページは、保存前に作成された注文のページも含め、新しい設定を取り込みます。

Portal スタイルの注文ごとのスナップショットはありません。後の Portal 編集にかかわらず特定の注文が特定の見た目を
維持する必要がある場合は、注文自体にスタイルを送信してください。

## SubMID ごとに独自の見た目を設定できますか？

はい。Customization ページには貴社の SubMID を一覧表示する **Configuration Scope** カードがあり、1 つのスイッチで制御されます。

| `Apply MID config to all SubMIDs` | 動作 |
| - | - |
| **オン** | SubMID 一覧は非表示。1 つの設定を維持 |
| **オフ** | 各 SubMID がステータスタグと独自のアクションとともに一覧表示 |

スイッチがオフの場合、各 SubMID 行には **Using MID config** または **Customized** のいずれかが表示されます。
**Edit** はその SubMID を同じ 3 つのタブで開きます。編集しているのは MID ではなくその SubMID であり、ヘッダーに
そのことが表示されます。**Reset**（カスタマイズ済みの SubMID にのみ表示され、確認を伴う）はその SubMID 独自のロゴと
スタイルを削除し、Using MID config に戻します。

人々を驚かせる 2 つの詳細：

* **Using MID config** の SubMID を開くと、出発点として MID のスタイルが表示されますが、MID のロゴは表示され**ません**。
  何も変更しなければ、SubMID は Using MID config のままです。黙ってカスタマイズ済みに変換されることはありません。
* 利用可能な決済手段を持つ SubMID のみが一覧表示されます。

## 複数のロゴをアップロードするには？ロゴ ID はどこから来ますか？

**Features** タブでロゴをアップロードします。ページが強制するルール：

| ルール | 詳細 |
| - | - |
| 形式 | **PNG、JPG、JPEG** のみ — SVG は拒否されます |
| 推奨サイズ | 40 × 40 px |
| デフォルトロゴ | 最初にアップロードしたロゴが自動的にデフォルトになります。**Set as default** で他の任意のロゴに移せます |
| 削除 | デフォルトを削除すると、残りの最初のロゴがデフォルトに昇格します |
| ロゴ ID | アップロード時ではなく、**保存時**に Waffo が割り当てます |

ID の形式は安定しており予測可能です。

| レベル | 形式 | 例 |
| - | - | - |
| MID | `logo_M{n}` | `logo_M1`、`logo_M2` |
| SubMID | `logo_S{SubMID の末尾 3 桁}_{n}` | `logo_S417_1`、`logo_S417_2` |

ID は貴社アカウント内で一意であり、ロゴが一度保存されるとその ID は再利用されません。

## ロゴは 3 つしかないのに最新のものが logo\_M5 です。バグですか？

いいえ。シーケンス番号はその MID または SubMID でこれまでに使われた最大の番号から割り当てられ、削除されたロゴも
その番号を保持します。`logo_M2` と `logo_M3` を削除して新しいロゴをアップロードすると `logo_M4` になります。
欠番は設計上恒久的なので、連携にハードコードした ID が別の画像を指し始めることはありません。

## ロゴ ID を使わずに注文で直接ロゴを渡せますか？

はい。両方とも**同じフィールド** `brandInfo.cashierLogoUrl` に入れます。プレフィックスで振り分けられます。

| 値の先頭 | 扱い | 動作 |
| - | - | - |
| `http://` または `https://` | ロゴ **URL** | その画像がこのチェックアウトセッションで使用される |
| `logo_` | ロゴ **ID** | 一致するアップロード済みロゴが使用される |
| それ以外 | 無効 | 黙って破棄され、注文は作成される |

ロゴ URL はロゴ ID より優先されるため、URL を渡すとそのセッションについて Portal のロゴ一覧は完全に上書きされます
（Portal の*スタイル*設定は引き続き適用されます）。使用可能なロゴが見つからない場合のフォールバック：

* 存在しない ID、または削除されたロゴの ID → **デフォルト**ロゴが使用される。
* ロゴがまったく渡されない → **デフォルト**ロゴが使用される。
* バリデーションを通らない URL → 破棄され、同じフォールバックが適用される。
* どこにもロゴが設定されていない → ロゴは表示されない。

## ロゴだけ、または名前だけの場合、ヘッダーには何が表示されますか？

4 つの組み合わせがあり、すべてサポートされています。

| ロゴ | マーチャント表示名 | ヘッダーの表示 |
| - | - | - |
| あり | あり | 左にロゴ、その横に名前 |
| あり | なし | ロゴのみ |
| なし | あり | 名前のみ |
| なし | なし | マーチャント識別ブロックなし — ページは金額から始まる |

表示される名前は常に**チェックアウト表示名**（注文、SubMID、MID の順）です。KYB で登録された法人名はここでは
使用されません。開示の脚注に関する唯一の例外については、チェックアウトページのライフサイクルと領収書のページを参照してください。

## ライブプレビューはどの程度正確ですか？

プレビューはフォームの横に実際のチェックアウトページをレンダリングするため、カラー、サイズ、ロゴ、ヘッダーレイアウト、
決済手段の並び順はすべて編集と同時に更新されます。その下に Mobile / Desktop の切り替えがあり、プレビューは
**Cashier Ranking** タブで選択した国に従い、Portal のインターフェース言語でレンダリングされます。

差異をバグとして報告する前に知っておくべき 2 つの制限：

* プレビューは**注文ごとの利用可否**を知ることができません。実際のチェックアウトページは、一時的に利用できない決済手段や
  特定の注文に適用されない決済手段をグレーアウトまたは除外しますが、プレビューはそうしないため、実際の購入者には
  やや少ない選択肢が表示されることがあります。
* プレビューと実際のチェックアウトは、**1 つのフラットな一覧に表示できる決済手段の数の上限**を共有しています。
  国別グループ化をオフにして重複排除後の一覧がその上限を超えると、プレビューも実際のページも国別グループ化に
  フォールバックします。上限を超えた時点で、Portal は正確な件数とともに警告します。

## チームの誰がこれらの設定を変更できますか？

保存は、チェックアウトカスタマイズ編集権限 1 つで制御されます。この権限のないアカウントではページ全体が**読み取り専用**に
なります。プリセットボタン、カラーピッカー、スライダー、スイッチ、ドラッグハンドル、アップロードはすべて無効化され、
Save ボタンはなく、SubMID 一覧では **Edit** の代わりに **Detail** が表示されます。ページ自体は閲覧可能です。

Portal のロールセットの定義に基づくロール別：

| ロール | Customization ページ |
| - | - |
| Super Admin | 閲覧と保存 |
| Admin | 閲覧と保存 |
| General | 閲覧のみ |
| Read-only | 閲覧のみ |
| Developer | 閲覧のみ |
| Dispute Manager | アクセス不可 |

## カスタマイズの変更に Waffo の承認は必要ですか？

いいえ。保存は即時かつセルフサービスで、審査ステップはありません。保存が拒否された場合、それは入力した値の
バリデーションの問題であり、承認の問題ではありません。

***

期待どおりにレンダリングされませんか？ 注文 ID と、注文でスタイルを送信している場合は送信した正確な
`cashierAppearance` 文字列を添えて[サポートにお問い合わせください](mailto:support@waffo.com)。
最も一般的な原因は、注文レベルの値が Portal を黙って上書きしていることです。


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.