How to open payment UI


Before you sign a contract with Xsolla, testing your payment process is only available in sandbox mode. In case of any errors, see their descriptions.

To open the payment UI in sandbox mode, use the following URL:, where ACCESS_TOKEN is the token obtained in the previous step.

New window

To open the payment UI in a new window, use the following URL:, where TOKEN is the obtained token.

Use the link above to open the payment UI in sandbox mode. After the project launch, use this URL
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

This way of opening payment UI doesn’t support selling game keys. To sell game keys, follow the instruction.
Full screen
Small screen
   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 = "";
   s.addEventListener('load', function (e) {
   }, false);
   var head = document.getElementsByTagName('head')[0];

<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 Customer Success Manager or email to

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:

stringToken, received via API. Required.
booleanSet to true to test the payment process: will be used instead of
objectLightbox parameters (object; desktop version only).
stringLightbox frame width. If null, depends on Pay Station width. Default is null.
stringLightbox frame height. If null, depends on Pay Station height. Default is 100%.
integerDefines arrangement order. Default is 1000.
integerOpacity of the widget’s background (0 — completely ​​transparent, 1 — completely opaque). The default value is 60% (.6).
stringOverlay background color. Default is #000000.
booleanIf true, the lightbox frame cannot be closed. Default is false.
booleanIf true, clicking the overlay will close the lightbox. Default is true.
booleanIf true, pressing ESC will close the lightbox. Default is true.
stringFrame 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.
stringFrame margin. Default is 10px.
stringType of animated loading indicator. Can be xsolla or round. Default is xsolla.
stringSpinner color. No default value.
objectOptions for the child window containing the Pay Station UI. Supported in the mobile version.
stringWhere 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:

initWidget initialized.
openWidget opened.
loadPayment UI (Pay Station) loaded.
closePayment UI (Pay Station) closed.
statusUser is on the status page.
status-invoiceUser is on the status page; payment in progress.
status-deliveringEvent when the user was moved on the status page, payment was completed, and we’re sending payment notification.
status-doneUser is on the status page; payment credited to the user’s account.
status-troubledEvent 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:
It is necessary to use the link with the https:// prefix only for the payment UI opening.
Use the following URL for testing purposes:
access_token parameter contains private user data. Make sure that you use server-to-server communication when getting this parameter.


To open the payment UI in an iframe:

  1. Implement the postMessage mechanism to receive events from the payment UI.
  2. Open the payment UI by following the link, where TOKEN is the received token.

Was this article helpful?
Thank you!
Is there anything we can improve? Message
We’re sorry to hear that
Please explain why this article wasn’t helpful to you. Message
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.
Rate this page
Rate this page
Is there anything we can improve?

Don’t want to answer

Thank you for your feedback!

Continue reading

Last updated: January 22, 2024

Found a typo or other text error? Select the text and press Ctrl+Enter.

Report a problem
We always review our content. Your feedback helps us improve it.
Provide an email so we can follow up
Thank you for your feedback!