> ## 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.

# Merchant Portal Cashier カスタマイズ

> Merchant Portal で Cashier のロゴ、テーマスタイル、サブ加盟店スタイル、公開ルール、権限を設定します。

Merchant Portal では、コードを変更せずに Waffo Cashier の既定表示スタイルを設定できます。設定を保存して公開すると、その後に新規作成される注文で最新のスタイルが使用されます。

<Note>
  API パラメータは Portal 設定より優先されます。注文作成リクエストに `paymentInfo.cashierAppearance` が含まれる場合、その注文では API リクエストで渡されたスタイルが使用されます。
</Note>

## 設定ページを開く

<Steps>
  <Step title="Merchant Portal にログイン">
    必要な権限を持つアカウントで Merchant Portal にログインします。
  </Step>

  <Step title="Cashier カスタマイズを開く">
    **Checkout → Cashier Customization** に移動します。
  </Step>

  <Step title="設定を変更">
    左側の設定パネルで、ロゴ、テーマカラー、基本フォントサイズ、角丸を変更します。
  </Step>

  <Step title="Cashier をプレビュー">
    右側のプレビューエリアで Cashier の表示を確認します。
  </Step>
</Steps>

<Frame>
  <img src="https://mintcdn.com/waffo-docs/mrmpI6H8vZr9fPaZ/images/developer-docs/integration/checkout/portal-customization/page-01-image-01.png?fit=max&auto=format&n=mrmpI6H8vZr9fPaZ&q=85&s=1e69bc7c1c43eeb0d13f5a86fbc6a73b" alt="Cashier カスタマイズページの概要" width="1849" height="1207" data-path="images/developer-docs/integration/checkout/portal-customization/page-01-image-01.png" />
</Frame>

## 加盟店ロゴをアップロード

**Features** ページで Cashier ロゴをアップロードします。

| 項目       | 説明                  |
| -------- | ------------------- |
| 対応形式     | `PNG`、`JPG`、`SVG`   |
| 推奨サイズ    | `40 x 40 px`        |
| 未アップロード時 | クリックまたはドラッグしてアップロード |
| アップロード後  | ロゴの差し替えまたは削除が可能     |

<Frame>
  <img src="https://mintcdn.com/waffo-docs/mrmpI6H8vZr9fPaZ/images/developer-docs/integration/checkout/portal-customization/page-02-image-02.png?fit=max&auto=format&n=mrmpI6H8vZr9fPaZ&q=85&s=178e1d96392f8455e9d454a653528b08" alt="ロゴアップロードエリア" width="1834" height="1206" data-path="images/developer-docs/integration/checkout/portal-customization/page-02-image-02.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/waffo-docs/mrmpI6H8vZr9fPaZ/images/developer-docs/integration/checkout/portal-customization/page-02-image-03.png?fit=max&auto=format&n=mrmpI6H8vZr9fPaZ&q=85&s=7a432008acfc00bc472923cd5df102ce" alt="ロゴアップロード後の差し替えと削除の入口" width="1838" height="1199" data-path="images/developer-docs/integration/checkout/portal-customization/page-02-image-03.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/waffo-docs/mrmpI6H8vZr9fPaZ/images/developer-docs/integration/checkout/portal-customization/page-04-image-01.png?fit=max&auto=format&n=mrmpI6H8vZr9fPaZ&q=85&s=f189a04f242849a5f563b04d49c4eaa5" alt="ロゴ設定の説明" width="1834" height="1204" data-path="images/developer-docs/integration/checkout/portal-customization/page-04-image-01.png" />
</Frame>

## Cashier スタイルを設定

**Style** ページで Cashier テーマを設定します。プリセットテーマを適用することも、ブランドガイドラインに合わせて色やスタイルパラメータをカスタマイズすることもできます。

<Frame>
  <img src="https://mintcdn.com/waffo-docs/mrmpI6H8vZr9fPaZ/images/developer-docs/integration/checkout/portal-customization/page-02-image-01.png?fit=max&auto=format&n=mrmpI6H8vZr9fPaZ&q=85&s=09cef515a0ebf8cabadfa1da947e9412" alt="Style ページのテーマ設定" width="1280" height="832" data-path="images/developer-docs/integration/checkout/portal-customization/page-02-image-01.png" />
</Frame>

### 色フィールド

| フィールド                  | 説明                   |
| ---------------------- | -------------------- |
| Primary Color          | ボタンや強調要素に使うプライマリーカラー |
| Background Color       | ページ背景色               |
| Middle Bg Color        | 中央エリアの背景色            |
| Text Color             | メインテキスト色             |
| Secondary Text Color   | セカンダリーテキスト色          |
| Tertiary Text Color    | 第三階層のテキスト色           |
| Danger / Error Color   | 危険またはエラー状態の色         |
| Info Message Box Color | 情報メッセージボックスの色        |

### スタイルパラメータ

| フィールド          | 説明        |
| -------------- | --------- |
| Font Size Base | 基本フォントサイズ |
| Border Radius  | 角丸の大きさ    |

## 結果をプレビュー

設定を変更すると、右側のプレビューエリアに Cashier の表示がリアルタイムで反映されます。国や地域を切り替えて、通貨、言語、決済手段ごとの表示を確認できます。

<Frame>
  <img src="https://mintcdn.com/waffo-docs/mrmpI6H8vZr9fPaZ/images/developer-docs/integration/checkout/portal-customization/page-04-image-04.png?fit=max&auto=format&n=mrmpI6H8vZr9fPaZ&q=85&s=2c7bd2d33dedb8dbee079ce6d81adbff" alt="国や地域ごとのプレビュー結果" width="1280" height="832" data-path="images/developer-docs/integration/checkout/portal-customization/page-04-image-04.png" />
</Frame>

<Note>
  一部のスタイルフィールドは、現在のプレビューですぐに表示されない場合があります。これは通常、設定が失敗したという意味ではありません。Cashier のページ構造は、国、地域、またはプロダクトタイプによって異なります。現在のプレビュー画面に対象要素が含まれていない場合、そのスタイル変更は表示されません。別の国、地域、またはプロダクトタイプに切り替えて確認してください。
</Note>

## サブ加盟店スタイルを設定

アカウントにサブ加盟店（SubMID）がある場合、メイン加盟店（MID）の設定は既定ですべてのサブ加盟店に適用されます。

<Frame>
  <img src="https://mintcdn.com/waffo-docs/mrmpI6H8vZr9fPaZ/images/developer-docs/integration/checkout/portal-customization/page-04-image-02.png?fit=max&auto=format&n=mrmpI6H8vZr9fPaZ&q=85&s=06aebcc730b5d40c7061a41c0cb16475" alt="統一設定を無効化した後のサブ加盟店リスト" width="1280" height="838" data-path="images/developer-docs/integration/checkout/portal-customization/page-04-image-02.png" />
</Frame>

サブ加盟店に個別スタイルを設定するには、次の手順を実行します。

<Steps>
  <Step title="統一設定を無効化">
    **Apply MID config to all SubMIDs** をオフにします。
  </Step>

  <Step title="サブ加盟店を編集">
    サブ加盟店リストで **Edit** をクリックします。
  </Step>

  <Step title="スタイルを設定">
    メイン加盟店と同じ方法で **Features** と **Style** を設定します。
  </Step>

  <Step title="設定を保存">
    保存後、そのサブ加盟店のステータスは **Customized** と表示されます。
  </Step>
</Steps>

1 つのサブ加盟店を個別設定しても、他のサブ加盟店には影響しません。

<Frame>
  <img src="https://mintcdn.com/waffo-docs/mrmpI6H8vZr9fPaZ/images/developer-docs/integration/checkout/portal-customization/page-04-image-03.png?fit=max&auto=format&n=mrmpI6H8vZr9fPaZ&q=85&s=0c25039f6feab0ab4a46b2a3ff811b46" alt="サブ加盟店の個別設定ページ" width="1833" height="1202" data-path="images/developer-docs/integration/checkout/portal-customization/page-04-image-03.png" />
</Frame>

サブ加盟店をメイン加盟店設定に戻すには、サブ加盟店リストで **Reset** をクリックして確認します。

<Frame>
  <img src="https://mintcdn.com/waffo-docs/mrmpI6H8vZr9fPaZ/images/developer-docs/integration/checkout/portal-customization/page-05-image-01.png?fit=max&auto=format&n=mrmpI6H8vZr9fPaZ&q=85&s=ec0675f1290d3d1325020c0a2768efae" alt="サブ加盟店設定のリセット" width="1280" height="834" data-path="images/developer-docs/integration/checkout/portal-customization/page-05-image-01.png" />
</Frame>

<Warning>
  統一設定を再度有効化すると、既存のサブ加盟店カスタムスタイルは削除され、すべてのサブ加盟店が再びメイン加盟店設定を使用します。
</Warning>

<Frame>
  <img src="https://mintcdn.com/waffo-docs/mrmpI6H8vZr9fPaZ/images/developer-docs/integration/checkout/portal-customization/page-05-image-02.png?fit=max&auto=format&n=mrmpI6H8vZr9fPaZ&q=85&s=cc6f2fd2ddefa9a3877501a483188850" alt="統一設定を再度有効化する前の確認" width="1280" height="841" data-path="images/developer-docs/integration/checkout/portal-customization/page-05-image-02.png" />
</Frame>

## 保存して公開

ページ上の変更は現在のプレビューにのみ適用され、実際の注文には自動適用されません。

**Save & Publish** をクリックすると、次のように動作します。

1. 現在の設定が保存されます。
2. その後に新規作成される注文で最新設定が使用されます。

設定を変更しても **Save & Publish** をクリックしない場合、実際の注文では前回保存された設定が引き続き使用されます。

<Frame>
  <img src="https://mintcdn.com/waffo-docs/mrmpI6H8vZr9fPaZ/images/developer-docs/integration/checkout/portal-customization/page-06-image-01.png?fit=max&auto=format&n=mrmpI6H8vZr9fPaZ&q=85&s=20e7e9644af6970e97eb4d11d62fa8ac" alt="Save and Publish ボタン" width="1280" height="837" data-path="images/developer-docs/integration/checkout/portal-customization/page-06-image-01.png" />
</Frame>

## 権限

| ロール             | 設定の表示 | 変更と保存 |
| --------------- | ----- | ----- |
| Super Admin     | 対応    | 対応    |
| Admin           | 対応    | 対応    |
| General         | 対応    | 非対応   |
| Read-only       | 対応    | 非対応   |
| Dev             | 対応    | 非対応   |
| Dispute Manager | 非対応   | 非対応   |
