Merchant Portal では、コードを変更せずに Waffo Cashier の既定表示スタイルを設定できます。設定を保存して公開すると、その後に新規作成される注文で最新のスタイルが使用されます。
API パラメータは Portal 設定より優先されます。注文作成リクエストに paymentInfo.cashierAppearance が含まれる場合、その注文では API リクエストで渡されたスタイルが使用されます。
設定ページを開く
Merchant Portal にログイン
必要な権限を持つアカウントで Merchant Portal にログインします。
Cashier カスタマイズを開く
Checkout → Cashier Customization に移動します。
設定を変更
左側の設定パネルで、ロゴ、テーマカラー、基本フォントサイズ、角丸を変更します。
Cashier をプレビュー
右側のプレビューエリアで Cashier の表示を確認します。
加盟店ロゴをアップロード
Features ページで Cashier ロゴをアップロードします。
| 項目 | 説明 |
|---|
| 対応形式 | PNG、JPG、SVG |
| 推奨サイズ | 40 x 40 px |
| 未アップロード時 | クリックまたはドラッグしてアップロード |
| アップロード後 | ロゴの差し替えまたは削除が可能 |
Cashier スタイルを設定
Style ページで Cashier テーマを設定します。プリセットテーマを適用することも、ブランドガイドラインに合わせて色やスタイルパラメータをカスタマイズすることもできます。
色フィールド
| フィールド | 説明 |
|---|
| 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 の表示がリアルタイムで反映されます。国や地域を切り替えて、通貨、言語、決済手段ごとの表示を確認できます。
一部のスタイルフィールドは、現在のプレビューですぐに表示されない場合があります。これは通常、設定が失敗したという意味ではありません。Cashier のページ構造は、国、地域、またはプロダクトタイプによって異なります。現在のプレビュー画面に対象要素が含まれていない場合、そのスタイル変更は表示されません。別の国、地域、またはプロダクトタイプに切り替えて確認してください。
サブ加盟店スタイルを設定
アカウントにサブ加盟店（SubMID）がある場合、メイン加盟店（MID）の設定は既定ですべてのサブ加盟店に適用されます。
サブ加盟店に個別スタイルを設定するには、次の手順を実行します。
統一設定を無効化
Apply MID config to all SubMIDs をオフにします。
サブ加盟店を編集
サブ加盟店リストで Edit をクリックします。
スタイルを設定
メイン加盟店と同じ方法で Features と Style を設定します。
設定を保存
保存後、そのサブ加盟店のステータスは Customized と表示されます。
統一設定を再度有効化すると、既存のサブ加盟店カスタムスタイルは削除され、すべてのサブ加盟店が再びメイン加盟店設定を使用します。
保存して公開
ページ上の変更は現在のプレビューにのみ適用され、実際の注文には自動適用されません。
Save & Publish をクリックすると、次のように動作します。
- 現在の設定が保存されます。
- その後に新規作成される注文で最新設定が使用されます。
設定を変更しても Save & Publish をクリックしない場合、実際の注文では前回保存された設定が引き続き使用されます。
| ロール | 設定の表示 | 変更と保存 |
|---|
| Super Admin | 対応 | 対応 |
| Admin | 対応 | 対応 |
| General | 対応 | 非対応 |
| Read-only | 対応 | 非対応 |
| Dev | 対応 | 非対応 |
| Dispute Manager | 非対応 | 非対応 |
