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

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

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

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

• задавать ограничение на продажу игровых ключей для пользователя;
• использовать персонализацию каталога товаров и акционных предложений;
• использовать систему владения играми;
• сохранять данные пользователей в платежном интерфейсе 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 — артикул пакета игровых ключей. Для продажи игры на конкретной платформе необходимо получить артикул с помощью запроса Получение списка игр (как правило, этот артикул выглядит как 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. Для отображения каталога используйте метод Получение списка игр.

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

   • Для быстрой покупки одного ключа используйте метод Создание заказа с указанным товаром. В ответе на данный метод вы получите токен, который необходимо использовать для открытия платежного интерфейса.
   • Для покупки нескольких игровых ключей используйте методы работы с корзиной:
     • Обновление товара из текущей корзины для добавления игрового ключа в корзину.
     • Получение корзины текущего пользователя для получения списка игровых ключей в корзине.
     • Создание заказа с указанным товаром для оплаты игровых ключей в корзине. В ответе на данный метод вы получите токен, который необходимо использовать для открытия платежного интерфейса.

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

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

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

Пример: Купить сейчас за $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>