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.

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 Embed

EXAMPLE: ASYNCHRONOUS SCRIPT LOADING

<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:

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:

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.

Iframe

To open the payment UI in an iframe:

1. Implement the postMessage mechanism to receive events from the payment UI.
2. 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:

3. Open the payment UI by following the link https://sandbox-secure.xsolla.com/paystation3/?access_token=TOKEN, where TOKEN is the received token.

Continue reading