決済ウィジェットの表示を設定する
プラットフォームに決済ウィジェットインターフェイスを追加するには、ウィジェットライブラリを追加する必要があります。また、ウィジェットの高さやイベント処理を調整することで、ユーザーエクスペリエンスを向上させることができます。
決済ウィジェットライブラリを追加する
お知らせ
サンドボックスモードで決済ウィジェットを開くには、以下の説明を参照してください。
スクリプトによるセットアップ
プラットフォームのウェブページにスクリプトを追加します。スクリプトの初期化パラメータに、前の統合ステップで取得した認証トークンを渡します。スクリプトは、ページがロードされるたびに実行されます。Copy
<script>
var s = document.createElement('script');
s.type = "text/javascript";
s.async = true;
s.src = "https://static.xsolla.com/payouts/v0/_bundles/santorelli.min.js";
s.addEventListener('load', function () {
const widget = new XPayoutsWidget.Widget({
token: '<auth token>',
theme: 'black',
size: 'fixed'
});
widget.show('<container_id>');
widget.addEventListener('load', () => {
console.log('loaded');
});
}, false);
var head = document.getElementsByTagName('head')[0];
head.appendChild(s);
</script>
npm-パッケージを使用してセットアップする
npm install @xsolla/payouts-sdkコマンドを実行し、ウィジェットライブラリをセットアップします。- お使いのプラットフォームのサイトに、ライブラリへのリンクを追加します。リクエストの中で、前の統合ステップで取得した認証トークンを渡します。
Copy
import {Widget} from '@xsolla/payouts-sdk';
const widget = new Widget({
token: '<auth token>',
theme: 'black',
size: 'fixed'
});
widget.show('<container_id>');
widget.addEventListener('load', () => {
console.log('loaded');
});
追加設定
高さ
初期化コードで以下のパラメータを渡すことで、決済ウィジェットの高さを調整することができます：| パラメータ | 種類 | 説明文 |
|---|---|---|
| string | 決済ウィジェットの高さ：
|
イベント処理中
以下のイベントの処理をセットアップできます：
loaded— iframeに読み込まれるウィジェット。tokenExpired— トークンの有効期限。requestWithdrawal— 払い戻しが成功したリクエスト。heightResize— ウィジェットの高さ変更。イベントは、size==‘auto’パラメータが渡された場合にのみ処理されます。
イベント処理セットアップの例：
Copy
widget.addEventListener('tokenExpired', () => {
console.log('tokenExpired');
});
widget.addEventListener('heightResize', ({ height }) => {
console.log(`height resize to: ${height}`);
});
widget.addEventListener('requestWithdrawal', ({ amount }) => {
console.log(`success request withdrawal, amount: ${amount}`);
});
進捗状況
誤字脱字などのテキストエラーを見つけましたか？ テキストを選択し、Ctrl+Enterを押します。
