Integrate payment solution

To track referrals and make payouts for collaborators, you first need to integrate Xsolla Pay Station. Requirements:

  1. Pay Station is integrated on a performance-optimized landing page.
  2. Pay Station is the only payment method used on the game’s landing page that drives traffic through the Partner Network program.

Get token

Note
Implement obtaining a token if you want authorized users to make purchases in your application.

A token is a string that includes data about a game, user, and purchase parameters. You can obtain a token when creating an order using API calls from the Payment group.

Note
To implement the logic of purchasing items inside your application, you can use:
  • Ready-to-use Xsolla solution — Payments. This solution includes comprehensive configuration of user authentication, in-game store, and the payment UI on Xsolla’s side. Refer to the integration guide to set it up.
  • In-Game Store product. Refer to these instructions for selling items to set it up.

Open payment UI

Note

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: https://sandbox-secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN, 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: https://sandbox-secure.xsolla.com/paystation3/?access_token=TOKEN, where TOKEN is the obtained token.

Note
Use the link above to open the payment UI in sandbox mode. After the project launch, use this URL https://secure.xsolla.com/paystation3/?access_token=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

Notice
This way of opening payment UI doesn’t support selling game keys. To sell game keys, follow the instruction.

EXAMPLE: ASYNCHRONOUS SCRIPT LOADING

Copy
Full screen
Small screen

<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>

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 Account Manager or send email to am@xsolla.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:

ParameterTypeDescription
access_token
stringToken, received via API. Required.
sandbox
booleanSet to true to test the payment process: sandbox-secure.xsolla.com will be used instead of secure.xsolla.com.
lightbox
objectLightbox parameters (object; desktop version only).
lightbox.width
stringLightbox frame width. If null, depends on Pay Station width. Default is null.
lightbox.height
stringLightbox frame height. If null, depends on Pay Station height. Default is 100%.
lightbox.zIndex
integerDefines arrangement order. Default is 1000.
lightbox.overlayOpacity
integerOverlay opacity (0 to 1). Default is .6.
lightbox.overlayBackground
stringOverlay background color. Default is #000000.
lightbox.modal
booleanIf true, the lightbox frame cannot be closed. Default is false.
lightbox.closeByClick
booleanIf true, clicking the overlay will close the lightbox. Default is true.
lightbox.closeByKeyboard
booleanIf true, pressing ESC will close the lightbox. Default is true.
lightbox.contentBackground
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.
lightbox.contentMargin
stringFrame margin. Default is 10px.
lightbox.spinner
stringType of animated loading indicator. Can be xsolla or round. Default is xsolla.
lightbox.spinnerColor
stringSpinner color. No default value.
childWindow
objectOptions for the child window containing the Pay Station UI. Supported in the mobile version.
childWindow.target
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:

ParameterDescription
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: https://secure.xsolla.com/paystation3/?access_token=TOKEN.

Note
It is necessary to use the link with the https:// prefix only for the payment UI opening.

Use the following URL for testing purposes: https://sandbox-secure.xsolla.com/paystation3/?access_token=TOKEN.

Notice
access_token parameter contains private user data. Make sure that you use server-to-server communication when getting this parameter.

Iframe

To open the payment UI in an iframe:

  1. Implement the postMessage mechanism to receive events from the payment UI.
  2. Get a token when creating an order using API calls from the Payment group. In the request, pass:
    • the device type (desktop or mobile) in the settings.ui.version parameter
    • the payment UI size in the settings.ui.size parameter:

Pay Station sizeIframe width
large (default)670–850 px
medium590–740 px
small510–630 px

  1. Open the payment UI by following the link https://sandbox-secure.xsolla.com/paystation3/?access_token=TOKEN, where TOKEN is the received token.

Set up webhooks

If you want to receive notifications about events (e.g. change of the payment status), set up webhooks in Publisher Account:

  1. Open your project in Publisher Account.
  2. Click Project settings in the side menu and go to Webhooks.
  3. Set the Webhooks toggle to On.
  4. Specify the webhook URL.
  5. A secret key to sign project webhooks is generated by default. If you want to generate a new secret key, click the refresh icon.
  6. Click Save settings.

It is recommended to implement the following webhooks:

To confirm that the webhook is received, your server must respond with:

  • HTTP code 204 without a message body.
  • HTTP code 400 describing the problem if the specified user was not found or if an invalid signature was passed.

Note
Refer to the API reference for more information about webhooks.

Test payment process

To test the payment process, you can use the sandbox mode. Sandbox mode is a stand-alone environment that supports all features of a live environment, except real and declined payments. You can access sandbox mode by sending "mode":"sandbox" when you get the token.

Note
Before you sign a contract with Xsolla, testing the payment process is only available in sandbox mode.

In sandbox mode, you can test the payment process with:

Test bank card payment

  1. Open the payment UI in sandbox mode.
  2. Choose the Credit/Debit cards group of payment methods.
  3. Enter the bank card details. Enter any values in the remaining fields. You can also specify incorrect details (card number or expiration date) to generate an error.
  4. Click Pay now.
Test cards list
See the list of test bank cards.
Note

In addition to card details, you need to specify the ZIP code if at least one of the following conditions is true:

  • The user’s country is the US or Canada.
  • The Bank Identification Number (BIN) indicates that a card was issued in the US.

You can specify any valid ZIP code (e.g., 12345). This determines the sales tax rate and does not affect the progress of the test payment.
Sandbox bank card payments can be made in the following currencies: USD, EUR, RUB, GBP, AED, ALL, AMD, ARS, AUD, AZN, BGN, BRL, BYN, CAD, CHF, CLP, CNY, COP, CZK, DKK, DZD, EGP, GEL, HKD, HRK, HUF, IDR, ILS, INR, ISK, JPY, KES, KGS, KRW, KZT, MAD, MDL, MKD, MNT, MXN, MYR, NGN, PEN, PHP, PKR, PLN, RON, RSD, SAR, SEK, SGD, THB, TRY, TWD, UAH, UYU, UZS, VEF, VND, ZAR.

Notice
See the description of available scenarios for testing one-time purchases and saved cards.

Test PayPal payment

Notice
Currently, testing PayPal payment is available only for a successful scenario.

  1. Create an account for PayPal sandbox mode:
    1. Open the PayPal Developer website.
    2. Log in to your account or create a new one.
    3. Go to Sandbox > Accounts.
    4. In the Sandbox Account section, click Create account.
    5. In the modal window, select the Personal account type and a country.
    6. Click Create. The created account will be shown in the list of sandbox accounts.

  1. Open the payment UI in sandbox mode.
  2. Choose the PayPal payment method.
  3. In the payment window, enter required information.
  4. Click Pay Now. You will be redirected to a window to log in to your PayPal account.

  1. To complete the testing payment process, enter information about your sandbox account created in step 1: Email ID as the email address and System Generated Password as the password. To find this information:
    1. Log in to your account on the PayPal Developer website.
    2. Go to Sandbox > Accounts.
    3. In the Sandbox Account section, choose the sandbox account.
    4. Click ••• and select View/edit account from the drop-down list.
  2. Click Pay Now.

You can also use information from existing sandbox accounts:

Email IDSystem Generated Password
sb-xmxij16980134@business.example.comoi9_m_KW
sb-p7pju16979920@business.example.com7%%p8ioS

Go live

After completing the previous steps, you can start receiving real payments:

  1. Make sure you signed the licensing agreement with Xsolla.
  2. Remove "mode":"sandbox" parameter from the request body when obtaining a token.
  3. Open the payment UI using the following link: https://secure.xsolla.com/paystation3/?access_token=TOKEN.

Notice
After the first real payment is made, a strict sandbox payment policy takes effect. Payments made in sandbox mode are available only to users who are specified in Publisher Account in the Company settings > Users section.
Your progress
Thank you for your feedback!
Last updated: July 5, 2021

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!