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

使い方

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

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

  • UI要素の色
  • フォントサイズ
  • 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でテーマがどのように表示されるかを確認するには、「プレビュー」セクションでタブを切り替えます。

注意
プレビューモードではボタンやリンクが機能しません。

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

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

注意
テーマが公開された後は、いつでもテーマの編集に戻ることができます。このテーマは、デフォルトテーマとして設定するか、トークン設定を使用して有効にしない限り、決済UIに適用されません。

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

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

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

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

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

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

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

注意
トークンで渡されたテーマ設定は、パブリッシャーアカウントで設定された設定よりも優先されます。
この記事は役に立ちましたか?
ありがとうございます!
改善できることはありますか? メッセージ
申し訳ありません
この記事が参考にならなかった理由を説明してください。 メッセージ
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。
このページを評価する
このページを評価する
改善できることはありますか?

答えたくない

ご意見ありがとうございました!
最終更新日: 2023年3月21日

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

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