How to open payment UI
Before you sign a contract with Xsolla, testing your payment process is only available in sandbox mode. In case of any errors, see their descriptions.
To open the payment UI in sandbox mode, use the following URL: https://sandbox-secure.xsolla.com/paystation4/?token=ACCESS_TOKEN, where ACCESS_TOKEN is the token obtained in the previous step.
New window
To open the payment UI in a new window, use the following URL: https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN, where TOKEN is the obtained token.
https://secure.xsolla.com/paystation4/?token=TOKEN.- With Pay Station Embed. Limitation: there might be problems when opening it in the in-game browser (WebView).
- In iframe. Limitation: there might be problems when opening it in the in-game browser (WebView) and in the mobile version of your application.
Pay Station Embed
- 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 allows getting events from the payment UI via postMessage. You can send these events to analytics systems. To set up events processing in your analytics system, contact your Customer Success Manager or email to csm@xsolla.com.
The Xsolla team created a widget that simplifies the integration of the payment UI into your website. The widget script is available in our GitHub repository.
Script initialization parameters:
| Parameter | Type | Description |
|---|---|---|
access_token | string | Token, received via API. Required. |
sandbox | boolean | Set to true to test the payment process: sandbox-secure.xsolla.com will be used instead of secure.xsolla.com. |
lightbox | object | Lightbox parameters (object; desktop version only). |
lightbox.width | string | Lightbox frame width. If null, depends on Pay Station width. Default is null. |
lightbox.height | string | Lightbox frame height. If null, depends on Pay Station height. Default is 100%. |
lightbox.zIndex | integer | Defines arrangement order. Default is 1000. |
lightbox.overlayOpacity | integer | Opacity of the widget’s background (0 — completely transparent, 1 — completely opaque). The default value is 60% (.6). |
lightbox.overlayBackground | string | Overlay background color. Default is #000000. |
lightbox.modal | boolean | If true, the lightbox frame cannot be closed. Default is false. |
lightbox.closeByClick | boolean | If true, clicking the overlay will close the lightbox. Default is true. |
lightbox.closeByKeyboard | boolean | If true, pressing ESC will close the lightbox. Default is true. |
lightbox.contentBackground | string | Frame background color. Default is #ffffff. Note that these color changes do not affect the Pay Station iframe itself, only the settings of the lightbox that hold it. |
lightbox.contentMargin | string | Frame margin. Default is 10px. |
lightbox.spinner | string | Type of animated loading indicator. Can be xsolla or round. Default is xsolla. |
lightbox.spinnerColor | string | Spinner color. No default value. |
childWindow | object | Options for the child window containing the Pay Station UI. Supported in the mobile version. |
childWindow.target | string | Where to open the Pay Station window. Can be _blank, _self, _parent. Default is _blank. |
The script allows you to track payment UI events. Depending on the event type, you can perform various actions on the web page.
List of events:
| Parameter | Description |
|---|---|
| init | Widget initialized. |
| open | Widget opened. |
| load | Payment UI (Pay Station) loaded. |
| close | Payment UI (Pay Station) closed. |
| status | User is on the status page. |
| status-invoice | User is on the status page; payment in progress. |
| status-delivering | Event when the user was moved on the status page, payment was completed, and we’re sending payment notification. |
| status-done | User is on the status page; payment credited to the user’s account. |
| status-troubled | Event when the user was moved on the status page, but the payment failed. |
https://secure.xsolla.com/paystation4/?token=TOKEN.https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN.access_token parameter contains private user data. Make sure that you use server-to-server communication when getting this parameter.Iframe
To open the payment UI in an iframe:
- Implement the
postMessagemechanism to receive events from the payment UI. - Open the payment UI by following the link
https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN, whereTOKENis the received token.
Was this article helpful?
Rate this page
Don’t want to answer
Thank you for your feedback!
Continue reading
Found a typo or other text error? Select the text and press Ctrl+Enter.
