Настройка продажи игровых ключей

Buy Button позволяет монетизировать игры через сайт самой игры, продавая за реальную или виртуальную валюту игровые ключи.

Продажа игровых ключей возможна по прямой ссылке, через интерфейс магазина или через виджет.

Вы можете продавать игровые ключи неавторизованным и авторизованным пользователям.

Использование авторизации позволяет:

• задавать ограничение на продажу игровых ключей для пользователя;
• использовать персонализацию каталога товаров и акционных предложений;
• использовать систему владения играми;
• сохранять данные пользователей в платежном интерфейсе Xsolla.

Вы можете авторизовывать пользователей с помощью продукта Login или вашей собственной системы авторизации. Подробная информация о настройке приведена в инструкции.

Продажа через прямую ссылку

Для открытия платежного интерфейса используется ссылка:

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

Добавьте в ссылку следующие данные:

• YOUR-ITEM-TYPE — тип товара:
  • game — игра; game_key — игра на конкретной платформе.
  • bundle — бандл.
• YOUR-PROJECT-ID — ID проекта из раздела Настройки проекта > Общие настройки > ID проекта в Личном кабинете.
• YOUR-ITEM-SKU — артикул пакета игровых ключей. Для продажи игры на конкретной платформе необходимо получить артикул с помощью запроса Get games list (как правило, этот артикул выглядит как unit_name_drm_sku).

• Внешний вид платежного интерфейса: тема (темная — dark или светлая — default), размер и другие параметры. Укажите в URL ссылки параметр ui_settings и в качестве значения передайте JSON-объект settings.ui в кодировке Base64. Пример URL с настройками UI:

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

• Токен для передачи информации о пользователе. Используется только при продаже игровых ключей для авторизованных пользователей. Формируется в зависимости от типа аутентификации. Пример URL с токеном:

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

• Параметр mode=sandbox для тестирования оплаты. Вы можете использовать тестовые банковские карты для проведения платежей.

1. Пример URL-адреса для тестирования:

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

Продажа через интерфейс магазина

Вы можете продавать игровые ключи через интерфейс магазина. Для создания магазина вы можете:

• использовать Site Builder;
• создать свою версию магазина и интегрировать In-Game Store API.

Для продажи пакетов игровых ключей, используя In-Game Store API:

1. Для отображения каталога используйте метод Get games list.

2. Реализуйте покупку игровых ключей:

   • Для быстрой покупки одного ключа используйте метод Create order with specified item. В ответе на данный метод вы получите токен, который необходимо использовать для открытия платежного интерфейса.
   • Для покупки нескольких игровых ключей используйте методы работы с корзиной:
     • Update cart item from current cart для добавления игрового ключа в корзину.
     • Get current user’s cart для получения списка игровых ключей в корзине.
     • Create order with all items from current cart для оплаты игровых ключей в корзине. В ответе на данный метод вы получите токен, который необходимо использовать для открытия платежного интерфейса.

Продажа через виджет

Вы можете добавить виджет для продажи игровых ключей на свою страницу и кастомизировать его. Чтобы скопировать код виджета перейдите в раздел Кастомизация виджета после создания пакета ключей в Личном кабинете.

Если игра продается на одной платформе, в виджете будет указана цена игры на этой платформе.

Пример: Купить сейчас за $10.

Если игра продается на нескольких платформах, в виджете будет указана наименьшая из цен среди платформ.

Пример: Купить от $10.

В окне оформления заказа пользователь сможет увидеть цены на всех платформах и сделать выбор.

Вы также можете отобразить в виджете цену на конкретной платформе, указав название платформы в параметре drm.

Пример кода виджета:

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

Кастомизация кнопки

1. Откройте проект в Личном кабинете.
2. В боковом меню нажмите Store.
3. В панели Игровые ключи нажмите Настроить.
4. Выберите нужный вам игровой ключ и перейдите на вкладку Кастомизация виджета.

5. В блоке Кастомизировать выберите цвет фона.

6. Код при добавлении на страницу наследует стили. Чтобы их переопределить, добавьте стили, приведенные ниже.

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

Как создать несколько кнопок или артикулов

Используйте Xsolla Pay2Play Widget Simple Integration 4 buttons, чтобы получить примеры кода для создания нескольких кнопок.

Структура этого кода аналогична коду виджета Buy Button. Пример миграции:

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

Продолжить чтение