Setting up game key selling

Contents

Selling via direct link
Selling via store UI
Selling via widget

You can sell game keys via a direct link, store UI, or widget.

Selling via direct link

The following link opens the payment UI:

Copy

Full screen

Small screen

https://store.xsolla.com/pages/buy.php?type={YOUR-ITEM-TYPE}&project_id={YOU_PROJECT_ID}&sku={YOUR-ITEM-SKU}

Buying game keys via a direct link for real currency is possible only after signing a license agreement with Xsolla. To do this, in Publisher Account, go to the Accounting > Licensing agreements section, complete the agreement form, and wait for the confirmation. It may take up to 3 business days to review the agreement.

To test payments, you can use the test environment by adding the mode=sandbox parameter to the link.

Add the following data to this link:

YOUR-ITEM-TYPE — item type:
- game — game; game_key — game on a specific platform.
- bundle — bundle.
YOUR-PROJECT-ID — ID of your project from the Project settings > General settings > Project ID section in Publisher Account.
YOUR-ITEM-SKU — game key package SKU. To sell a game on a specific platform, use the Get games list (usually this SKU looks like unit_name_drm_sku) to get the SKU.

Payment UI style: theme (dark or the default light theme), size, and other parameters. Specify the ui_settings parameters in the URL and pass a settings.ui JSON-object with Base64 encoding as the value. Example of the URL with UI settings:

Copy

Full screen

Small screen

https://store.xsolla.com/pages/buy.php?type={YOUR-ITEM-TYPE}&project_id={YOU_PROJECT_ID}&sku={YOUR-ITEM-SKU}&ui_settings=ewoJCQkic2l6ZSI6ICJzbWFsbCIsCgkJCSJ0aGVtZSI6ICJkYXJrIgoJCX0=

Token for passing user data. Used when selling game keys to authenticated users only. This token depends on the authentication method. Example of the URL with a token:

Copy

Full screen

Small screen

https://store.xsolla.com/pages/buy.php?type={YOUR-ITEM-TYPE}&project_id={YOUR_PROJECT_ID}&sku={YOUR_ITEM_SKU}&xsolla_login_token={ACCESS_TOKEN}

The mode=sandbox parameter for payment tests. You can use test bank cards to complete payments.

When making a payment, the Xsolla server sends a request to the webhook URL to verify that the user exists in the game. To avoid errors when testing payment, go to Publisher Account > Project settings > Webhooks and set the switch to OFF. If you want to use webhooks, implement successful processing of a User validation webhook.

Example of the URL for testing:

Copy

Full screen

Small screen

https://store.xsolla.com/pages/buy.php?type={YOUR-ITEM-TYPE}&project_id={YOU_PROJECT_ID}&sku={YOUR-ITEM-SKU}&mode=sandbox

Selling via store UI

You can sell game keys through the store interface. To create a store, you can:

use Site Builder
create your own version of the store and integrate the In-Game Store & Buy Button API

If you are implementing your own version of the store, you can use the Store demo version as the basis and add the code snippets posted on GitHub.

To sell game keys packages, integrate the In-Game Store & Buy Button API:

To display a catalog, use the Get games list method.
Implement the purchase of game keys:
- For a quick purchase of one key, use the Create order with specified item method. In response to this method, you will receive a token that must be used to open the payment interface.
- To purchase several game keys, use the cart management methods:
  - Update cart item from current cart to add a game key to the cart.
  - Get the current user’s cart to get a list of game keys in the cart.
  - Create an order with all items from the current cart to pay for game keys in the cart. In response to this method, you will receive a token that must be used to open the payment interface.

Choose a suitable authentication option for the methods to work correctly.

When selling a game through the In-Game Store & Buy Button API, you should implement a feature that allows players to select a specific platform on the client. To get the SKU, pass the value of the items.unit_items.sku parameter from the request to get the list of games.

Selling via widget

There are several ways to develop buttons and integrate them with Xsolla API:

in Publisher Account through button customization
using the Pay Station Widget

Button customization

Open your project in Publisher Account.
Click Store in the side menu.
In the Game Keys pane, click Configure.
Select a game key and go to the Widget customization tab.

If there are no game keys, create a new one.

In the Customize block, select Light as the background color.

You can also modify the theme object in code so that the parameter background has an empty string as a value.

When you add the widget code to your page, it includes inherited styles. Add the styles below to override these styles.

Added these in a style tag below the script tag that you got from the Widget customization tab for CSS inheritance/priority reasons.

Copy

Full screen

Small screen

/* This should be used for button positioning but note this technically repositions the entire widget */
#xsolla-buy-button-widget {
  /* place code for button positioning here */
}

/* Styles the button itself */
.x-buy-button-widget.x-buy-button-widget__tiny
  .x-buy-button-widget-payment-button {
  background-color: #ff005b;
  color: black;
}

/* Button on hover */
.x-buy-button-widget.x-buy-button-widget__tiny
  .x-buy-button-widget-payment-button:hover {
  background-color: #ff005b;
}

/* The following are style overrides to leave you with just the button */

/* space immediately surrounding button */
.x-buy-button-widget-button-block.x-buy-button-widget-button-block__light {
  background-color: white;
}

/* space above button (including game title area) */
.x-buy-button-widget.x-buy-button-widget__tiny
  .x-buy-button-widget-game-logo {
  height: 200px;
  background-image: none !important;
  background-color: white;
}

 /* Game title (located right above button) */
.x-buy-button-widget-game-name.x-buy-button-widget-game-name__light {
  display: none !important;
}

The id/class names above and the code snippet are used in conjunction with the copied widget code (the image at step 5). For this reason, it is important that you implement the copied widget code.
You can use the code above as is or modify the code based on your scenario. The code comments (lines 1, 3, 5, 11, 16, 18, 22, 29) are there to help determine what each CSS rule targets and assist in future styling. For example, if you want just the button (and not the entire widget), you’ll need to substitute the background color of your page in the places below where the color is white — lines 20 and 27.

How to create multiple buttons or SKUs

You can refer to Xsolla Pay2Play Widget Simple Integration 4 buttons for a code example on how this is accomplished using the Pay2Play widget.

The structure is similar to the Buy Button widget code. An example of a migration:

Copy

Full screen

Small screen

<div id="xsolla-buy-button-widget"></div>
<div id="xsolla-buy-button-widget-2"></div>
    <script>
      var options = {
        project_id: "191204",
        sku: "789",
        item_type: "unit",
        api_settings: {
          sandbox: false,
        },
        widget_ui: {
          target_element: "#xsolla-buy-button-widget",
          theme: {
            foreground: "gold",
            background: "",
          },
        },
        payment_widget_ui: {
          lightbox: {
            height: "700px",
            spinner: "round",
          },
        },
      };
      // options for second buy button - note the different SKU and target_element
      var options2 = {
        project_id: "191204",
        sku: "123",
        item_type: "unit",
        api_settings: {
          sandbox: false,
        },
        widget_ui: {
          target_element: "#xsolla-buy-button-widget-2",
          theme: {
            foreground: "gold",
            background: "",
          },
        },
        payment_widget_ui: {
          lightbox: {
            height: "700px",
            spinner: "round",
          },
        },
      };
      var s = document.createElement("script");
      s.type = "text/javascript";
      s.async = true;
      s.src = "https://cdn.xsolla.net/embed/buy-button/3.1.4/widget.min.js";

// one event listener per widget instance. repeat for more buttons, passing in different SKUs
      s.addEventListener(
        "load",
        function (e) {
          var widgetInstance = XBuyButtonWidget.create(options);
        },
        false
      );
      s.addEventListener(
        "load",
        function (e) {
          var widgetInstance2 = XBuyButtonWidget.create(options2);
        },
        false
      );
      var head = document.getElementsByTagName("head")[0];
      head.appendChild(s);
    </script>

Lines 1 and 2 — one div per button, each with a unique ID.
Starting on line 26 are the options for the second button (laid out in the options2 object). You will need a set of options like the ones above for each Buy button. Note the different sku (line28) and target_element (line 34, targeting the div on line 2).

Thank you for your feedback!

We’ll review your message and use it to help us improve your experience.

Rate this page

Don’t want to answer

Thank you for your feedback!

Continue reading

Next steps

Set up webhooks

Last updated: September 20, 2022

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

Your browser is not supported. Please try a different browser

Buy Button

Setting up game key selling

Selling via direct link

Selling via store UI

Selling via widget

Button customization

How to create multiple buttons or SKUs

Was this article helpful?

Rate this page

Thank you for your feedback!

Continue reading

Next steps