如何打开支付UI
注：
签署与艾克索拉的协议之前，只支持在沙盒模式下测试支付过程。如遇到错误，请参阅错误描述。
要以沙盒模式打开支付UI，请使用下列URL：https://sandbox-secure.xsolla.com/paystation4/?token=ACCESS_TOKEN，其中ACCESS_TOKEN是在上一步中获得的令牌。
新建窗口
要在新窗口中打开支付UI，请使用以下URL：https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN，其中TOKEN是获得的令牌。
注：
使用上面的链接在沙盒模式下打开支付UI。项目发布后，请使用此URL：
https://secure.xsolla.com/paystation4/?token=TOKEN。- 使用Pay Station Embed。缺点：在游戏内浏览器(WebView)中打开可能会有问题。
- 在iframe中打开。缺点：在游戏内浏览器(WebView)或应用程序的移动版本中打开可能会有问题。
Pay Station Embed
注意
此支付UI打开方式不支持销售游戏密钥。要销售游戏密钥，请按照说明进行操作。
Copy
- 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>
Pay Station Embed允许通过postMessage获取支付UI事件。您可以将事件发送到分析系统。如要在分析系统中设置事件处理，请联系您的客户成功经理或发送邮件至csm@xsolla.com。
艾克索拉团队创建了一个小组件，帮助您简化将支付UI集成到网站的过程。小组件脚本在我们的GitHub存储库中提供。
用于脚本初始化的参数列表：
| 参数 | 类型 | 描述 |
|---|---|---|
access_token | string | 令牌，通过API接收。 必需。 |
sandbox | boolean | 设置为true以测试支付流程，将使用sandbox-secure.xsolla.com而不是secure.xsolla.com。 |
lightbox | object | 带有选项列表的对象，可用于打开lightbox（桌面版本）。 |
payment_widget_ui.lightbox.width | string | Lightbox框架的高度。如果为null，则取决于支付中心的高度。默认值为null。 |
payment_widget_ui.lightbox.height | string | Lightbox框架的高度。如果为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，lightbox框架不可关闭，默认值为false。 |
lightbox.closeByClick | boolean | 如为true，单击浮层将关闭lightbox，默认值为true。 |
lightbox.closeByKeyboard | boolean | 如为true，按ESC键将关闭lightbox，默认值为true。 |
payment_widget_ui.lightbox.contentBackground | string | 框架的背景，默认值为#ffffff。请注意，颜色更改不会影响支付中心iframe本身，只会影响容纳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。 |
脚本使您可以跟踪支付UI发生的事件。根据事件的类型，可以在网页上执行各种操作。
事件列表：
| 参数 | 描述 |
|---|---|
| init | 小部件初始化事件。 |
| open | 打开小部件时的事件。 |
| load | 已加载支付UI（支付中心）。 |
| close | 已关闭支付UI（支付中心）。 |
| status | 用户在状态页面上移动时的事件。 |
| status-invoice | 用户在状态页面上移动但支付尚未完成时的事件。 |
| status-delivering | 用户在状态页面上移动，支付完成以及我们正在发送支付通知时的事件。 |
| status-done | 用户在状态页面上移动且支付已成功完成时的事件。 |
| status-troubled | 用户在状态页面上移动但支付失败时的事件。 |
https://secure.xsolla.com/paystation4/?token=TOKEN。注：
打开支付UI的链接只能使用https://前缀。
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”属性。
示例：
Copy
- 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。
