決済UIテーマのカスタマイズ

使い方

決済UIに以下の2つのデフォルトテーマが用意されています：ライトとダーク。カスタマイザを使用せずにテーマを切り替えるには、トークンを取得するときに、settings.ui.themeパラメータでライトテーマの場合は63295a9a2e47fab76f7708e1を、ダークテーマの場合は63295aab2e47fab76f7708e3を渡します。

決済UIをゲームデザインに合わせるために、カスタムテーマを作成し、以下の特性を設定することができます：

• UI要素の色
• フォントサイズ
• UI要素のボード幅と角の半径
• レイアウト
• ゲームのロゴの表示

カスタムテーマは、アドミンページのすべてのプロジェクトのデフォルトテーマとして使用することができます。個々のゲームに異なるテーマを指定したい場合は、トークンでこれらの設定を渡します。

アドミンページでカスタマイズを構成する

1. アドミンページでプロジェクトを開き、ペイステーション > UIテーマセクションに移動します。

2. 「新しいテーマを作成する」をクリックします。
3. 鉛筆アイコンをクリックして、テーマ名を変更します。

4. UI要素の色を変更するには、「色」タブを開きます。サーフェス、テキスト、コントロールのカラーパレット、および状態通知に表示される色を変更することができます。

5. フォントサイズを設定するには、「タイポグラフィ」タブに移動します。対応するフィールドを使用して、以下のUI要素のフォントサイズを変更します：

6. UI要素のボーダー幅とコーナー半径を設定するには、「ボーダー」タブで変更します。

7. ゲームロゴが決済UIにどのように表示されるかを確認するには、「プレビュー」セクションで、「ロゴを表示する」ボックスをチェックします。決済UIでのゲームロゴの表示を設定するには、必要なパラメータをトークンに渡します。

8. モバイル版とデスクトップ版の決済UIでテーマがどのように表示されるかを確認するには、「プレビュー」セクションでタブを切り替えます。

9. 決済UIの異なる状態を確認するには、「カード決済」、「決済方法」、「決済状況」のタブを切り替えてください。

10. 「公開する」をクリックします。
11. このテーマをアドミンページのすべてのプロジェクトに適用するには、開いたモーダルウィンドウで「デフォルトとして設定」トグルを「オン」に設定します。テーマがトークンで渡されるプロジェクトには影響しません。
12. 「公開する」をクリックします。

UIテーマタブで、特定のテーマのブロック内の「•••」をクリックすると、以下のクイックアクションが利用できます：

• カスタマイズ — カスタマイザを開いて変更します。
• 編集 — テーマ名を変更し、「デフォルトとして設定」を「オン」または「オフ」に設定します。
• 複製 — テーマを複製して、それに基づいて新しいテーマを作成します。
• テーマを削除します。

API経由でカスタマイズを構成する

レイアウトを変更

決済UIのレイアウトを変更して、決済UIをゲームのインターフェースに合わせることができます。これを行うには、トークンを作成する時にsettings.ui.layoutパラメータを渡します。このパラメータには次の値を指定できます：

• embed — この場合、決済UIはゲーム内で開きます。決済UIのパディングは、他のインターフェイス要素に合わせて端がカットされます。

• column_reverse — この場合、決済UIの列の順序が変更されます：決済方法に関する情報は左側に表示され、注文に関する情報は右側に表示されます。

• embed_column_reverse — この場合、ゲーム内で決済UIが開き、決済UIの列の順序が変更されます：決済方法に関する情報は左側に、注文に関する情報は右側に表示されます。

決済方法の表示を構成する

決済UIを開いたときの決済方法の表示方法を構成するには、トークンに以下のパラメータを渡します：

• is_payment_methods_list_modeは、決済UIを開いたときに、ユーザーの国で利用可能な決済方法のリストを表示することができます。

• settings.ui.gp_quick_payment_buttonは、決済UIでのGoogle Payの決済方法の表示を設定します。このパラメータには以下の値を指定できます：
  • true — この場合、決済UIの上部にGoogle Payによるクイック決済のボタンが表示されます。

• • false（デフォルト） — この場合、決済方法の一覧にGoogle PayがPayRankのアルゴリズムに従って表示されます。

カスタムUIテーマ設定をトークンで渡す

カスタム設定を特定のゲームに適用するには、トークン作成時にsettings.ui.themeパラメータで、公開されているカスタムテーマのIDを渡します。

テーマIDを見つけることができます：

• UIテーマタブのすべてのテーマのリスト。

• カスタマイザのテーマ名の下。

ゲームのロゴの表示

決済UIにゲームのロゴを表示するには：

1. アドミンページでプロジェクトを開き、「ペイステーション > 設定」セクションに画像をアップロードしてください。

2. トークンを作成するリクエストでは、 settings.ui.desktop.header.is_visibleとsettings.ui.desktop.header.visible_logoパラメータでtrueを渡します。統合シナリオに応じて、トークンを作成するためにサーバー側またはクライアント側メソッドを呼び出すことができます。

決済UIにゲームロゴを表示する例：

最終更新日: 2024年10月3日