Skip to content
Xsolla PayStation Widget JS SDK
Branch: master
Clone or download
Latest commit 0ce798a Jun 6, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
example event types Dec 28, 2015
LICENSE Update Jun 6, 2018
bower.json mobile detection Jun 23, 2016

Xsolla PayStation Widget

Integration Guide

Xsolla team created a script to simplify the integration of PayStation into your website. Please note: for the proper work of widget please make sure that you pass the ‘access_token’. More information about getting ‘access_token’ parameter is available here.

See Demo


  • the most appropriate interface depending on the type of device
  • tracking of events happening with PayStation
  • compliant with the AMD and CommonJS specification for defining modules

Getting the code

Linking to Xsolla CDN

Script is located on our CDN and is available here: Use this URL to integrate script on your website.

Installing with Bower

If you want to include the source code of widget as a part of your project, you can install the package using Bower.

$ bower install xsolla-paystation-widget

Script Loading

Asynchronous loading with callback (recommended)

    var options = {
        access_token: 'abcdef1234567890abcdef1234567890'
    var s = document.createElement('script');
    s.type = "text/javascript";
    s.async = true;
    s.src = "//";
    s.addEventListener('load', function (e) {
    }, false);
    var head = document.getElementsByTagName('head')[0];

Synchronous loading (blocks content)

<script src="//"></script>
        access_token: 'abcdef1234567890abcdef1234567890'


If your project uses CommonJS module format, you can access the widget by require()

var XPayStationWidget = require('PATH_TO_WIDGET/embed');
   access_token: 'abcdef1234567890abcdef1234567890'

RequireJS (AMD)

Also you can use widget with RequireJS loader

define(['PATH_TO_WIDGET/embed'], function (XPayStationWidget) {
       access_token: 'abcdef1234567890abcdef1234567890'

Widget Options

  • access_token — Access token
  • host - Host for performing requests. The default value is
  • sandbox — Set true to test the payment process, will be used instead of host
  • lightbox — Options for modal dialog that contains frame of PayStation
    • width — Width of lightbox frame. If null, depends on paystation width. Default is null
    • height — Height of lightbox frame. If null, depends on paystation height. Default is '100%'
    • zIndex — Property controls the vertical stacking order, default is 1000
    • overlayOpacity — Opacity of the overlay (from 0 to 1), default is '.6'
    • overlayBackground — Background of the overlay, default is '#000000'
    • modal - Lightbox frame cannot be closed, default false
    • closeByClick — Toggle if clicking the overlay should close lightbox, default true
    • closeByKeyboard — Toggle if pressing of ESC key should close lightbox, default true
    • contentBackground — Background of the frame, default is '#ffffff'
    • contentMargin — margin around frame, default '10px',
    • spinner — Type of animated loading spinner, can be 'xsolla', 'round', 'none' or 'custom', default is the first one
    • spinnerColor — Color of the spinner, not set by default
    • spinnerUrl — URL of custom spinner, default is null
    • spinnerRotationPeriod — Rotation period of custom spinner, default 0
  • childWindow — Options for child window that contains PayStation. Suitable for mobile version
    • target — The target option specifies where to open the Paystation window, can be '_blank', '_self', '_parent', default is '_blank'

Widget API


You can refer to the widget object, using the following methods:

  • init(options) — Parameter setting
  • open — Opening of payment interface (PayStation). Opens a modal window with an iframe that appears over the site content for desktop, and in the new window for mobile and tablet devices.
  • on(events, handler) — Attach an event handler function for one or more events to the widget.
    • events (string) — One or more space-separated event types, such as "open" or "close status".
    • handler (function) — A function to execute when the event is triggered.
  • off(events, [handler]) — Remove an event handler. Calling .off() with no arguments removes all handlers attached to the widget.
    • events (string) — One or more space-separated event types.
    • handler (function) — A handler function previously attached for the event(s).


  • init — Event on widget initialization
  • open — Event on opening of the widget
  • load — Event after payment interface (PayStation) was loaded
  • close — Event after payment interface (PayStation) was closed
  • status — Event when the user was moved on the status page
  • status-invoice — Event when the user was moved on the status page, but the payment is not yet completed
  • status-delivering — Event when the user was moved on the status page, payment was completed, and we’re sending payment notification
  • status-done — Event when the user was moved on the status page, and the payment was completed successfully
  • status-troubled — Event when the user was moved on the status page, but the payment failed

You can access list of event using XPayStationWidget.eventTypes object.

XPayStationWidget.on(XPayStationWidget.eventTypes.STATUS, function (event, data) {
    console.log(data.paymentInfo); // {
                                   //   email: "",
                                   //   invoice: 140381877,
                                   //   status: "invoice",
                                   //   userId: "user_1",
                                   //   virtualCurrencyAmount: 100
                                   // }

Going to the payment

To open PayStation you can use .open() method or set "data-xpaystation-widget-open" attribute to HTML-element associated with the beginning of the payment, e.g. Payment button.

JavaScript call:;

HTML example:

<button data-xpaystation-widget-open>Buy Credits</button>
You can’t perform that action at this time.