決済UIを開く方法

お知らせ

Xsollaと契約する前に、支払い処理のテストはサンドボックスモードでのみ利用可能です。万が一、エラーが発生した場合は、その説明をご覧ください。

サンドボックスモードで決済インターフェースを開くには、次のURLを使用してください：https://sandbox-secure.xsolla.com/paystation4/?token=ACCESS_TOKEN、ACCESS_TOKENは前のステップで入手したトークンです。

新しいウィンドウ

決済UIを新しいウィンドウで開くには、以下のURLをご利用ください：https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN。TOKENは取得したトークンです。

お知らせ
サンドボックスモードで決済UIを開くには、上記のリンクを使用します。プロジェクト起動後は、こちらのURLをご利用ください：https://secure.xsolla.com/paystation4/?token=TOKEN。
また、他のオプションを使って決済UIを開くこともできます：
  • ペイステーション埋め込みを利用します。制限：ゲーム内ブラウザ（WebView）で開くと不具合が発生する場合があります。
  • iframe。制限：をゲーム内ブラウザ（WebView）やモバイル版アプリケーションで開くと、不具合が発生する場合があります。

ペイステーション埋め込み

注意
この方法では、ゲームキーの販売には対応していません。ゲームキーを販売するには、以下の手順に従ってください。
例：スクリプトの非同期読み込み
Copy
Full screen
Small screen
  • html
<script>
   var options = {
       access_token: 'ACCESS_TOKEN', //TODO use access token, received on previous step
       sandbox: true //TODO please do not forget to remove this setting when going live
   };
   var s = document.createElement('script');
   s.type = "text/javascript";
   s.async = true;
   s.src = "https://static.xsolla.com/embed/paystation/1.0.7/widget.min.js";
   s.addEventListener('load', function (e) {
       XPayStationWidget.init(options);
   }, false);
   var head = document.getElementsByTagName('head')[0];
   head.appendChild(s);
</script>

<button data-xpaystation-widget-open>Buy Credits</button>

ペイステーション埋め込みを使用すると、postMessage経由で決済UIからイベントを取得できます。これらのイベントは分析システムに送信できます。分析システムでイベント処理を設定するには、カスタマーサクセスマネージャーに連絡するか、csm@xsolla.comに電子メールを送信してください。

エクソーラチームは、決済UIのウェブサイトへの統合を簡素化するウィジェットを作成しました。ウィジェットスクリプトはGitHubリポジトリにあります。

スクリプト初期化パラメータ：

パラメータ種類説明文
access_token
stringAPIから受信したトークン。 必須。
sandbox
boolean決済処理をテストするには、trueに設定します。sandbox-secure.xsolla.comがsecure.xsolla.comの代わりに使用されます。
lightbox
objectライトボックスパラメータ（オブジェクト、デスクトップバージョンのみ）。
lightbox.width
stringライトボックスのフレームの高さ。nullの場合、ペイステーションの高さに依存します。既定はnullです。
lightbox.height
stringライトボックスのフレームの高さ。nullの場合、ペイステーションの高さに依存します。既定は100%です。
lightbox.zIndex
integer配置順序を定義します。既定は1000です。
lightbox.overlayOpacity
integerウィジェットの背景の不透明度（0 — 完全透明、1 — 完全不透明）。デフォルト値は60%です（.6）。
lightbox.overlayBackground
stringオーバーレイの背景色。既定は#000000。
lightbox.modal
booleantrueの場合、ライトボックスフレームを閉じることはできません。既定はfalseです。
lightbox.closeByClick
booleantrueの場合、オーバーレイをクリックするとライトボックスが閉じます。既定はtrueです。
lightbox.closeByKeyboard
booleantrueの場合、ESCを押すとライトボックスが閉じます。既定はtrueです。
lightbox.contentBackground
stringフレームの背景色。デフォルトは#ffffff。これらの色の変更は、ペイステーションiframe自体には影響を与えず、それを保持するライトボックスの設定のみに影響を与えることに注意してください。
lightbox.contentMargin
stringフレームマージン。既定は10pxです。
lightbox.spinner
stringローディングアニメーションのインジケータの種類。xsollaまたはroundに指定できます。既定はxsollaです。
lightbox.spinnerColor
stringスピナーの色。既定値はありません。
childWindow
objectペイステーションUIを含む子ウィンドウのオプション。モバイル版でサポートされています。
childWindow.target
stringペイステーションウィンドウを開く場所。_blank、_self、_parentに指定できます。既定は_blankです。

このスクリプトでは、決済インターフェースのイベントを追跡することができます。イベントの種類に応じて、Webページでさまざまな操作を実行できます。

イベントの一覧：

パラメータ説明文
initウィジェットが初期化されました。
openウィジェットが開かれました。
load決済インターフェース（ペイステーション）が読み込まれました。
close決済インターフェース（ペイステーション）が閉じられています。
statusユーザーはステータスページにいます。
status-invoiceユーザーはステータスページにいます。支払いが進行中です。
status-deliveringユーザーはステータスページにいます。支払いが完了しました。支払い通知が送信されました。
status-doneユーザーはステータスページにいます。支払いはユーザーのアカウントに振り込まれます。
status-troubledユーザーはステータスページにいます。支払いに失敗しました。
決済UIのオープンを初期化する場合は、次のリンクを使用してください。https://secure.xsolla.com/paystation4/?token=TOKEN。
お知らせ
https://のプレフィックスが付いたリンクは、決済画面を開くときにのみ使用する必要があります。
テストには次のURLを使用してください。https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN。
注意
access_tokenパラメータにはプライベートユーザーデータが含まれます。このパラメータを取得するときは、必ずサーバー間通信を使用してください。

Iframe

Iframeで決済UIを開くには：

  1. postMessageメカニズムを実装して、決済UIからイベントを受け取ります。
  2. リンクhttps://sandbox-secure.xsolla.com/paystation4/?token=TOKENをたどって決済UIを開き、TOKEN は受信したトークンです。

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

答えたくない

ご意見ありがとうございました！

続きを読む

お役立ちリンク

APIリファレンス 決済UIイベント
最終更新日: 2024年1月22日

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

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