サブスクリプションUIを開く

決済UIを開く方法は3つあります:

Note
サンドボックスモードで決済インターフェースを開くには、次のURLを使用してください。https://sandbox-secure.xsolla.com/

Pay Station Embed

Notice
この方法では、ゲームキーの販売には対応していません。ゲームキーを販売するには、以下の手順に従ってください。

例:スクリプトの非同期読み込み

Copy
Full screen
Small screen
<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>

Pay Station Embedでは、postMessage経由で決済UIからのイベントを取得することができます。これらのイベントを分析システムに送信できます。イベント処理を分析システムで設定するには、担当のアカウントマネージャー、またはEメールでam@xsolla.comまでお問い合わせください。

ウェブサイトに決済UIを簡単に実装するには、当社のCDNからスクリプトをダウンロードしてください。このURLを使用して、あなたのウェブサイトにスクリプトを統合します。詳細については、GitHub リポジトリをご覧ください。

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

パラメータ種類説明文
access_token
stringAPIから受信したトークン。 必須。
sandbox
boolean決済処理をテストするには、trueに設定します:sandbox-secure.xsolla.comsecure.xsolla.com用されます。
lightbox
objectライトボックスパラメータ(オブジェクト、デスクトップバージョンのみ)。
lightbox.width
stringライトボックスのフレーム幅。nullの場合、決済ステーションの幅に依存します。既定はnullです。
lightbox.height
stringライトボックスのフレームの高さ。nullの場合、決済ステーションの高さに依存します。既定は100%です。
lightbox.zIndex
integer配置順序を定義します。既定は1000です。
lightbox.overlayOpacity
integerオーバーレイ不透明度(0〜1)。既定は.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/paystation3/?access_token=ACCESS_TOKEN

Note
決済UIを開く場合にのみ、https://プレフィックス付きのリンクを使用する必要があります。

テストを試したいときは次のURLをご使用くださいhttps://sandbox-secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN

Notice
パラメータaccess_tokenには、プライベートなユーザーデータが含まれています。このパラメータを取得する際には、必ずサーバ間通信を使用するようにしてください。

Iframe

お客様側で次のメカニズムを実装してください:

  • デバイスの種類(デスクトップまたはモバイル)を指定し、トークンのsettings.ui.versionパラメータ内で送信する。
  • postMessage経由で決済UIからイベントを受け取る。こちらのイベントは分析システムに送信できます。分析システムでイベント処理を設定する場合は、アカウントマネージャーにご連絡いただくか、am@xsolla.comまでメールでお問い合わせ下さい。

Iframeで決済UIを開く場合は、次のリンクを使用してください:https://secure.xsolla.com/paystation3/?access_token=ACCESS_TOKENACCESS_TOKENは前のステップで入手したトークンです。テストする場合は、次のURLをご使用ください:https://sandbox-secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN

新しいウィンドウ

新しいウィンドウで決済インターフェース開くには、次のリンクを使用してください:https://secure.xsolla.com/paystation3/?access_token=ACCESS_TOKENACCESS_TOKENは前のステップで入手したトークンです。テストする場合は、次のURLをご使用ください:https://sandbox-secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN

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

答えたくない

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

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

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