決済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は取得したトークンです。
https://secure.xsolla.com/paystation4/?token=TOKEN。- ペイステーション埋め込みを利用します。制限：ゲーム内ブラウザ（WebView）で開くと不具合が発生する場合があります。
- iframe。制限：をゲーム内ブラウザ（WebView）やモバイル版アプリケーションで開くと、不具合が発生する場合があります。
ペイステーション埋め込み
- 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 | string | APIから受信したトークン。 必須。 |
sandbox | boolean | 決済処理をテストするには、trueに設定します。sandbox-secure.xsolla.comがsecure.xsolla.comの代わりに使用されます。 |
lightbox | object | ライトボックスパラメータ（オブジェクト、デスクトップバージョンのみ）。 |
payment_widget_ui.lightbox.width | string | ライトボックスのフレームの高さ。nullの場合、ペイステーションの高さに依存します。既定はnullです。 |
payment_widget_ui.lightbox.height | string | ライトボックスのフレームの高さ。nullの場合、ペイステーションの高さに依存します。既定は100%です。 |
payment_widget_ui.lightbox.zIndex | integer | 配置順序を定義します。既定は1000です。 |
payment_widget_ui.lightbox.overlayOpacity | integer | ウィジェットの背景の不透明度（0 — 完全透明、1 — 完全不透明）。デフォルト値は60%です（.6）。 |
payment_widget_ui.lightbox.overlayBackground | string | オーバーレイの背景色。既定は#000000。 |
payment_widget_ui.lightbox.modal | boolean | trueの場合、ライトボックスフレームを閉じることはできません。既定はfalseです。 |
lightbox.closeByClick | boolean | trueの場合、オーバーレイをクリックするとライトボックスが閉じます。既定はtrueです。 |
lightbox.closeByKeyboard | boolean | trueの場合、ESCを押すとライトボックスが閉じます。既定はtrueです。 |
payment_widget_ui.lightbox.contentBackground | string | フレームの背景色。デフォルトは#ffffff。これらの色の変更は、ペイステーションiframe自体には影響を与えず、それを保持するライトボックスの設定のみに影響を与えることに注意してください。 |
payment_widget_ui.lightbox.contentMargin | string | フレームマージン。既定は10pxです。 |
payment_widget_ui.lightbox.spinner | string | ローディングアニメーションのインジケータの種類。xsollaまたはroundに指定できます。既定はxsollaです。 |
payment_widget_ui.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 | ユーザーはステータスページにいます。支払いに失敗しました。 |
https://secure.xsolla.com/paystation4/?token=TOKEN。https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN。access_tokenパラメータにはプライベートユーザーデータが含まれます。このパラメータを取得するときは、必ずサーバー間通信を使用してください。Iframe
Iframeで決済UIを開くには：
postMessageメカニズムを実装して、決済UIからイベントを受け取ります。- リンク
https://sandbox-secure.xsolla.com/paystation4/?token=TOKENをたどって決済UIを開き、TOKENは受信したトークンです。
潜在的な問題：iframeで決済UIを開いたときに、一部の決済システムで必要な決済確認コードをコピーするボタンが表示されない場合は、iframeにallow=“clipboard-read; clipboard-write; payment”属性を渡します。
例：
- html
<iframe
src="https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN"
width="800"
height="700"
allow="clipboard-read; clipboard-write; payment"
></iframe>
続きを読む
最終更新日: 2024年1月22日誤字脱字などのテキストエラーを見つけましたか？ テキストを選択し、Ctrl+Enterを押します。
