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

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

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

Для неавторизованных пользователей

Без авторизации пользователи могут покупать игры на следующих условиях:

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

Для авторизованных пользователей

Чтобы управлять доступом пользователей к вашему приложению и возможностями продуктов Иксолла, необходимо настроить авторизацию. Вы можете это сделать с помощью продукта Авторизация или вашей собственной системы авторизации.

Если вы уже реализовали собственную систему авторизации и хотите использовать только платежный интерфейс Иксоллы, сгенерируйте Pay Station access token и настройте обработку вебхуков на вашем сервере.

Вы можете использовать продукт Авторизация для вашего внутриигрового магазина, если у вас отсутствует своя серверная часть или вы хотите использовать готовое решение, чтобы:

• хранить каталог товаров;
• управлять каталогом товаров;
• управлять ценами и региональными ценами;
• авторизовывать пользователей;
• обрабатывать транзакции.

Аутентификация через продукт Авторизация

Продукт Авторизация поддерживает регистрацию и аутентификацию пользователей по стандартному протоколу OAuth 2.0. Стандартный протокол аутентификации OAuth 2.0 ориентирован на простоту разработки клиентского приложения. OAuth 2.0 позволяет обновлять токен без участия пользователя.

Данные об авторизованных пользователях могут храниться следующими способами:

• На стороне Иксоллы. Для настройки используйте руководство по интеграции продукта Авторизация.
• На стороне PlayFab. Для настройки используйте инструкцию для хранилища PlayFab.
• На вашей стороне. Для настройки используйте инструкцию для собственного хранилища.

Аутентификация через Pay Station access token

Сценарий взаимодействия вашего клиента и сервера Иксоллы:

1. Ваш клиент отправляет на ваш сервер запрос на аутентификацию.
2. Ваш сервер запрашивает токен авторизации, передавая в запросе заголовок с параметрами project_id/merchant_id и api_key на сервер Иксоллы.
3. Сервер Иксоллы в ответе возвращает Pay Station access token.
4. Ваш сервер передает полученный Pay Station access token вашему клиенту.
5. Возвращенный Pay Station access token используется как авторизационный токен для аутентификации в API продуктов In-Game Store и Buy Button и построения интерфейса магазина с помощью клиентских методов.

Получение Pay Station access token

В серверной части вашего приложения реализуйте метод для получения Pay Station access token с использованием HTTP POST запроса.

API Иксоллы использует базовую HTTP-аутентификацию. Запрос должен содержать заголовок Authorization: Basic <your_authorization_basic_key>, где <your_authorization_basic_key> — пара ID продавца:ключ API, закодированная по стандарту Base64. Значения параметров вы можете найти в Личном кабинете:

• ID продавца указан:
  • В разделе Настройки проекта > Вебхуки.
  • Разделе Настройки компании > Компания.
  • Aдресной строке браузера на любой странице Личного кабинета. URL-адрес имеет вид https://publisher.xsolla.com/​ID продавца/раздел Личного кабинета.

• Ключ API отображается в Личном кабинете только при создании и должен храниться на вашей стороне. Создать ключ можно в разделах:
  • Настройки компании > Ключи API;
  • Настройки проекта > Ключи API.

HTTP-запрос:

POST https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token

В теле запроса на получение токена передайте следующие параметры:

Примеры запросов и ответов приведены в справочнике API.

Время жизни Pay Station access token при работе с внутриигровым магазином и инвентарем — 1 час с момента последнего обращения к API Иксоллы. Чтобы изменить время жизни Pay Station access token, обратитесь к аккаунт-менеджеру проекта.

Реализуйте получение нового Pay Station access token после истечения срока действия. Рекомендуется получать новый токен в фоновом режиме, без необходимости повторного входа пользователя в приложение.

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

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

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

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 проекта в Личном кабинете.
• 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

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

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

• использовать Конструктор сайтов;
• создать свою версию магазина и интегрировать In-Game Store & Buy Button API.

Если вы реализуете свою версию магазина, вы можете взять за основу демоверсию и использовать фрагменты кода, размещенные на GitHub.

Для продажи пакетов игровых ключей интегрируйте In-Game Store & Buy Button 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 для оплаты игровых ключей в корзине. В ответе на данный метод вы получите токен, который необходимо использовать для открытия платежного интерфейса.

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

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

Существует несколько способов разработать свои кнопки и интегрировать их с API Иксоллы:

• В Личном кабинете с помощью кастомизации кнопки.
• С помощью виджета Pay Station.

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

1. Откройте ваш проект в Личном кабинете.
2. Нажмите Магазин в боковом меню.
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>

Оценить страницу

Что может сделать страницу еще лучше? Отправить

В другой раз

Спасибо за обратную связь!

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