设置支付小组件的显示
要在平台上添加支付小组件界面，需添加小组件库。您还可以调整小组件高度和事件处理来改善用户体验。
添加支付小组件库
注：
要在沙盒模式下打开支付小组件，请参阅说明。
使用脚本进行设置
将脚本添加到平台的网站页面。在脚本初始化参数中传入上一集成步骤中获得的授权令牌。每次加载该页面时会运行脚本。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-package进行设置
- 运行
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。
