Set up selling of game keys

Buy Button allows you to monetize games through the sale of game keys on a game’s website for real or virtual currency.

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

You can sell game keys to authorized and unauthorized users.

Authorization allows you to:

• set limits on the sale of game keys for user
• personalize item catalogs and promotional offers
• use the entitlement system
• store user data in the Xsolla payment interface

You can authorize users using the Login product or your own authorization system. Detailed setup information is provided in these instructions.

Selling via direct link

The following link opens the payment UI:

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

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:

https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOUR_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:

https://purchase.xsolla.com/pages/buy?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.

1. Example of the URL for testing:

https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOUR_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

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

1. To display a catalog, use the Get games list method.

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

Selling via widget

You can add a widget to your page to sell game keys and customize it. To copy the widget code, go to the Widget customization section after creating the keys package in your Publisher Account.

If a game is sold on a single platform, the widget will display the game price specific to that platform.

Example: Buy now for $10.

If a game is sold on multiple platforms, the widget will display the lowest price among the platforms.

Example: Get from $10.

In the order creation window, the user can see prices for all platforms and make a choice.

You can also display the price for a specific platform in the widget by specifying the platform SKU in the drm parameter.

Widget code example:

<div id="xsolla-buy-button-widget"></div>
      <script>
          var options = {
              project_id: "101010",
              sku: "my_key",
              user: {
                  auth: "9qs9VyCIQQXBlzJQcfETIKWZDvhi4Sz1"
              drm: "steam",
              item_type: "unit",
              api_settings: {
                  sandbox: true,
              },
              widget_ui: {
                  target_element: "#xsolla-buy-button-widget",
                  theme: {
                      foreground: "green",
                      background: "light"
                  },
              },

             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.8/widget.min.js";
          s.addEventListener('load', function (e) {
              var widgetInstance = XBuyButtonWidget.create(options);
          }, false);
          var head = document.getElementsByTagName('head')[0];
          head.appendChild(s);
      </script>
      <style>
          #xsolla-buy-button-widget {

          /* place code for button positioning here */
            margin: 10px  
          }

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

Button customization

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

5. In the Customize block, select the background color.

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

/* 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;
}

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:

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

Rate this page

Is there anything we can improve? Send

Don’t want to answer

Thank you for your feedback!

Continue reading