決済UIを開く
決済UIを開く方法は3つあります:
Xsollaと契約する前に、支払い処理のテストはサンドボックスモードでのみ利用可能です。万が一、エラーが発生した場合は、その説明をご覧ください。
サンドボックスモードで決済インターフェースを開くには、次のURLを使用してください。https://sandbox-secure.xsolla.com/
。
決済ステーション埋め込み
例:スクリプトの非同期読み込み
- 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からのイベントを取得することができます。これらのイベントを分析システムに送信できます。イベント処理を分析システムで設定するには、担当のアカウントマネージャー、またはEメールでam@xsolla.comまでお問い合わせください。
ウェブサイトに決済UIを簡単に実装するには、当社のCDNからスクリプトをダウンロードしてください。このURLを使用して、あなたのウェブサイトにスクリプトを統合します。詳細については、GitHubリポジトリをご覧ください。
スクリプト初期化パラメータ:
パラメータ | 種類 | 説明文 |
---|---|---|
access_token | string | APIから受信したトークン。 必須。 |
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)。既定は.6 です。 |
lightbox.overlayBackground | string | オーバーレイの背景色。既定は#000000 。 |
lightbox.modal | boolean | true の場合、ライトボックスフレームを閉じることはできません。既定はfalse です。 |
lightbox.closeByClick | boolean | true の場合、オーバーレイをクリックするとライトボックスが閉じます。既定は true です。 |
lightbox.closeByKeyboard | boolean | true の場合、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
。
テストを試したいときは次のURLをご使用くださいhttps://sandbox-secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN
。
Iframe
お客様側で次のメカニズムを実装してください:
- デバイスの種類(デスクトップまたはモバイル)を指定し、トークンのsettings.ui.versionパラメータ内で送信する。
- postMessage経由で決済UIからイベントを受け取る。こちらのイベントは分析システムに送信できます。分析システムでイベント処理を設定する場合は、アカウントマネージャーにご連絡いただくか、am@xsolla.comまでメールでお問い合わせ下さい。
Iframeで決済UIを開く場合は、次のリンクを使用してください:https://secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN
、ACCESS_TOKEN
は前のステップで入手したトークンです。テストする場合は、次のURLをご使用ください:https://sandbox-secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN
。
新しいウィンドウ
新しいウィンドウで決済インターフェース開くには、次のリンクを使用してください:https://secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN
、ACCESS_TOKEN
は前のステップで入手したトークンです。テストする場合は、次のURLをご使用ください:https://sandbox-secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN
。
誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。