如何打开支付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
您也可以通过其他方式打开支付UI:
  • 使用Pay Station Embed。缺点:在游戏内浏览器(WebView)中打开可能会有问题。
  • 在iframe中打开。缺点:在游戏内浏览器(WebView)或应用程序的移动版本中打开可能会有问题。

Pay Station Embed

注意
此支付UI打开方式不支持销售游戏密钥。要销售游戏密钥,请按照说明进行操作。
示例:异步脚本加载
Copy
Full screen
Small screen
<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(桌面版本)。
lightbox.width
stringLightbox框架的高度。如果为null,则取决于支付中心的高度。默认值为null
lightbox.height
stringLightbox框架的高度。如果为null,则取决于支付中心的高度。默认值为100%
lightbox.zIndex
integer控制垂直堆叠顺序的属性,默认值为1000
lightbox.overlayOpacity
integer小组件背景的不透明度(0 — 完全透明,1 — 完全不透明)。默认值为60% (.6)。
lightbox.overlayBackground
string浮层背景色,默认值为#000000
lightbox.modal
boolean如为true,lightbox框架不可关闭,默认值为false
lightbox.closeByClick
boolean如为true,单击浮层将关闭lightbox,默认值为true
lightbox.closeByKeyboard
boolean如为true,按ESC键将关闭lightbox,默认值为true
lightbox.contentBackground
string框架的背景,默认值为#ffffff。请注意,颜色更改不会影响支付中心iframe本身,只会影响容纳iframe的灯箱的设置。
lightbox.contentMargin
string框架边距,默认值为10px
lightbox.spinner
string加载指示器的动画类型。可为xsollaround。默认值为xsolla
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用户在状态页面上移动但支付失败时的事件。
如要初始化支付UI的打开,请使用以下链接:https://secure.xsolla.com/paystation4/?token=TOKEN
注:
打开支付UI的链接只能使用https://前缀。
如要进行测试,请使用以下URL:https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN
注意
access_token参数包含隐私用户数据。请确保获取该参数时使用服务器对服务器通信。

Iframe

要在iframe中打开支付UI:

  1. 实现postMessage机制从支付UI接收事件。
  2. 通过https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN链接打开支付UI,其中TOKEN是收到的令牌。

潜在问题:在iframe中打开支付UI时如果未显示某些支付系统要求的付款验证码复制按钮,请向iframe传入allow=“clipboard-read; clipboard-write; payment”属性。

示例

Copy
Full screen
Small screen
<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。

报告问题
我们非常重视内容质量。您的反馈将帮助我们做得更好。
请留下邮箱以便我们后续跟进
感谢您的反馈!