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

使い方

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

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

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

注意
トークンで渡されたテーマ設定は、アドミンページで指定された設定よりも優先されます。

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

お知らせ
1つのプロジェクトでカスタムテーマを作成し、このアドミンページのすべてのプロジェクトでそのテーマを使用することができます。
  1. アドミンページでプロジェクトを開き、ペイステーション > UIテーマセクションに移動します。
  1. 新しいテーマを作成する」をクリックします。
  2. 鉛筆アイコンをクリックして、テーマ名を変更します。
  1. UI要素の色を変更するには、「」タブを開きます。サーフェス、テキスト、コントロールのカラーパレット、および状態通知に表示される色を変更することができます。
  1. フォントサイズを設定するには、「タイポグラフィ」タブに移動します。対応するフィールドを使用して、以下のUI要素のフォントサイズを変更します:
フィールドUI要素
Title 1決済状況ページの見出し。
Title 2合計金額。
Title 3セクション見出し(例:カード決済)。
Title 4現在は使用していません。
本文L
  • サブセクション見出し
  • 現金支払いの指示の見出し
  • ボタンコピー
  • 合計コピー
本文M
  • プロジェクト名(プロジェクトロゴがない場合に表示されます)
  • ツールチップと説明のテキスト
  • 決済状況ページのメッセージ
  • 決済方法のリストのテキスト(モバイル版のドロップダウンリスト)
マイナーテキスト
  • ユーザー名
  • 法律文書
  • カート内の情報(例: 商品名、VAT金額)
見出し現在は使用していません。
  1. UI要素のボーダー幅とコーナー半径を設定するには、「ボーダー」タブで変更します。
お知らせ
最大ボーダー幅 - 3 px。
最大コーナー半径 - 16 px。
  1. ゲームロゴが決済UIにどのように表示されるかを確認するには、「プレビュー」セクションで、「ロゴを表示する」ボックスをチェックします。決済UIでのゲームロゴの表示を設定するには、必要なパラメータをトークンに渡します
  1. モバイル版とデスクトップ版の決済UIでテーマがどのように表示されるかを確認するには、「プレビュー」セクションでタブを切り替えます。
注意
プレビューモードではボタンやリンクが機能しません。
  1. 決済UIの異なる状態を確認するには、「カード決済」、「決済方法」、「決済状況」のタブを切り替えてください。
  1. 公開する」をクリックします。
  2. このテーマをアドミンページのすべてのプロジェクトに適用するには、開いたモーダルウィンドウで「デフォルトとして設定」トグルを「オン」に設定します。テーマがトークンで渡されるプロジェクトには影響しません。
  3. 公開する」をクリックします。
注意
テーマが公開された後は、いつでも編集できます。このテーマは、デフォルトテーマとして設定するか、トークン設定を使用して有効にしない限り、決済UIに適用されません。
UIテーマタブで、特定のテーマのブロック内の「•••」をクリックすると、以下のクイックアクションが利用できます:
  • カスタマイズ — カスタマイザを開いて変更します。
  • 編集 — テーマ名を変更し、「デフォルトとして設定」を「オン」または「オフ」に設定します。
  • 複製 — テーマを複製して、それに基づいて新しいテーマを作成します。
  • テーマを削除します。

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

レイアウトを変更

決済UIのレイアウトを変更して、決済UIをゲームのインターフェースに合わせることができます。これを行うには、トークンを作成する時にsettings.ui.layoutパラメータを渡します。このパラメータには次の値を指定できます:
  • embed — この場合、決済UIはゲーム内で開きます。決済UIのパディングは、他のインターフェイス要素に合わせて端がカットされます。
  • column_reverse — この場合、決済UIの列の順序が変更されます:決済方法に関する情報は左側に表示され、注文に関する情報は右側に表示されます。
  • embed_column_reverse — この場合、ゲーム内で決済UIが開き、決済UIの列の順序が変更されます:決済方法に関する情報は左側に、注文に関する情報は右側に表示されます。

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

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

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

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

  • カスタマイザのテーマ名の下。
注意
トークンで渡されたテーマ設定は、アドミンページで指定された設定よりも優先されます。

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

  1. パブリッシャー アカウントで「ペイステーション > 設定 > カスタマイズ」セクションに画像をアップロードします。

お知らせ
最大ファイルサイズ:1 MB。
サポートされている形フォーマット:JPEG、PNG、SVG。

  1. トークンを作成するリクエストで、settings.ui.desktop.header.is_visiblesettings.ui.desktop.header.visible_logoパラメータでtrueを渡します。

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

この記事は役に立ちましたか?
ありがとうございます!
改善できることはありますか? メッセージ
申し訳ありません
この記事が参考にならなかった理由を説明してください。 メッセージ
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。
このページを評価する
このページを評価する
改善できることはありますか?

答えたくない

ご意見ありがとうございました!
最終更新日: 2024年1月22日

誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。

問題を報告する
当社は常にコンテンツを見直しています。お客様のご意見は改善に役立ちます。
フォローアップ用のメールをご提供してください
ご意見ありがとうございました!