Open payment UI
New window
To open the payment UI in a new window, use the following URL: https://sandbox-secure.xsolla.com/paystation3/?access_token=TOKEN
, where TOKEN
is the obtained token.
https://secure.xsolla.com/paystation3/?access_token=TOKEN
.You can also open the payment UI using other options:
- 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 Embedded
EXAMPLE: ASYNCHRONOUS SCRIPT LOADING
- 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 Account Manager or send email to am@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 | Overlay opacity (0 to 1). Default is .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. |
If you want to initialize the opening of the payment UI, use the following link: https://secure.xsolla.com/paystation3/?access_token=TOKEN
.
Use the following URL for testing purposes: https://sandbox-secure.xsolla.com/paystation3/?access_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
postMessage
mechanism to receive events from the payment UI. - Get a token when creating an order using API calls from the Payment group. In the request, pass:
- the device type (desktop or mobile) in the
settings.ui.version
parameter - the payment UI size in the
settings.ui.size
parameter:
- the device type (desktop or mobile) in the
Pay Station size | Iframe width |
---|---|
large (default) | 670–850 px |
medium | 590–740 px |
small | 510–630 px |
- Open the payment UI by following the link
https://sandbox-secure.xsolla.com/paystation3/?access_token=TOKEN
, whereTOKEN
is the received token.
Was this article helpful?
Rate this page
Don’t want to answer
Thank you for your feedback!
Continue reading
Next step
Test payment processFound a typo or other text error? Select the text and press Ctrl+Enter.