Open the payment UI

There are three ways of opening the payment UI:

• Use the Pay Station Embed script
• Iframe
• New window

Pay Station Embed

The Pay Station Embed script determines the type of device and opens the payment UI in a lightbox (on desktop screens) or in a new window (on mobile and tablet screens). We recommend using asynchronous script loading.

API reference

See the full list of script initialization parameters.

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>

Iframe

• Check the device type (desktop vs. mobile) and send it within the token’s settings.ui.version parameter
• Get 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.

To open the payment UI in an iframe, use the following link: https://secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN, where ACCESS_TOKEN is the token obtained in the previous step. For testing purposes, use this URL: https://sandbox-secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN.

New window

To open the payment UI in a new window, use the following link: https://secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN, where ACCESS_TOKEN is the token obtained in the previous step. For testing purposes, use this URL: https://sandbox-secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN.

Continue reading