Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

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'
  • iframeOnly — Open Paystation in iframe on all devices

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
  • user-country — Event when PayStation have determine user country

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>