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:
ACCESS_TOKEN is the token obtained in the previous step.
To open the payment UI in a new window, use the following URL:
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
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 email@example.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:
|string||Token, received via API. Required.|
|boolean||Set to |
|object||Lightbox parameters (object; desktop version only).|
|string||Lightbox frame width. If |
|string||Lightbox frame height. If |
|integer||Defines arrangement order. Default is |
|integer||Overlay opacity (0 to 1). Default is |
|string||Overlay background color. Default is |
|string||Frame background color. Default is |
|string||Frame margin. Default is |
|string||Type of animated loading indicator. Can be |
|string||Spinner color. No default value.|
|object||Options for the child window containing the Pay Station UI. Supported in the mobile version.|
|string||Where to open the Pay Station window. Can be |
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:
|load||Payment UI (Pay Station) loaded.|
|close||Payment UI (Pay Station) closed.|
|status||User is on the status page.|
|status-invoice||User is on the status page; payment in progress.|
|status-delivering||Event when the user was moved on the status page, payment was completed, and we’re sending payment notification.|
|status-done||User is on the status page; payment credited to the user’s account.|
|status-troubled||Event 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:
Use the following URL for testing purposes:
access_tokenparameter 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:
- Implement the
postMessagemechanism to receive events from the payment UI.
- Open the payment UI by following the link
TOKENis the received token.
Was this article helpful?
Rate this page
Don’t want to answer
Thank you for your feedback!
Found a typo or other text error? Select the text and press Ctrl+Enter.