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

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

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

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

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

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

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

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

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

Кроме основных query-параметров, вы также можете передать параметры для кастомизации платежного интерфейса и продажи авторизованным пользователям.

Основные параметры ссылки

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

• YOUR-ITEM-TYPE — тип товара. Возможные значения:

  • game — пакет игровых ключей;
  • game_key — пакет игровых ключей для конкретной платформы;
  • bundle — бандл с пакетами игровых ключей.

• YOUR-PROJECT-ID — ID проекта, который можно найти в Личном кабинете рядом с названием проекта.

• YOUR-ITEM-SKU — артикул пакета игровых ключей, например:

  • order456 — артикул без указания конкретной платформы;
  • pre.order123_steam — артикул с указанием конкретной платформы.

Мы рекомендуем использовать пакеты игровых ключей для конкретной платформы. Это позволяет избежать случаев несовместимости при использовании ключей или при их активации. Во всех случаях необходимо добавить к артикулу суффикс платформы — автоматически или вручную, в зависимости от того, где создается пакет ключей:

• Если вы создаете пакеты ключей в Личном кабинете, к введенному вручную артикулу через нижнее подчеркивание автоматически добавляется суффикс конкретной платформы — например, _steam или _playstation.

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

Список поддерживаемых Xsolla платформ и примеры суффиксов для них:

Для корректной работы ссылки вы можете уточнить значение артикула с помощью метода API Получение списка игр. Артикул товара возвращается в параметре items.unit_items.sku (как правило, этот артикул выглядит как game_key_sku_drm_sku).

Пример ссылки для продажи игры для платформы Steam:

1https://purchase.xsolla.com/pages/buy?type=game_key&project;_id=123456&sku;=pre.order123_steam

Кастомизация платежного интерфейса

Чтобы платежный интерфейс соответствовал стилю вашей игры, настройте тему, размер и другие параметры, следуя инструкции по кастомизации. Добавьте в ссылку параметр ui_settings и передайте в нем JSON-объект settings.ui в кодировке Base64.

Пример ссылки для открытия платежного интерфейса с кастомной темой:

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

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

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

Пример ссылки для открытия платежного интерфейса с токеном:

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

Тестирование оплаты

Чтобы проверить оплату в тестовом окружении (sandbox-режиме), добавьте параметр mode=sandbox в ссылку. Для проведения платежей вы можете использовать тестовые банковские карты.

Пример ссылки для открытия платежного интерфейса в тестовом окружении:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 1<div id="xsolla-buy-button-widget"></div>
 2
 3<script>
 4  var options = {
 5    project_id: "101010",
 6    sku: "my_key",
 7    user: {
 8      auth: "9qs9VyCIQQXBlzJQcfETIKWZDvhi4Sz1"
 9    },
10    drm: "steam",
11    item_type: "unit",
12    api_settings: {
13      sandbox: true
14    },
15    widget_ui: {
16      target_element: "#xsolla-buy-button-widget",
17      theme: {
18        foreground: "green",
19        background: "light"
20      }
21    },
22    payment_widget_ui: {
23      lightbox: {
24        height: "700px",
25        spinner: "round"
26      }
27    }
28  };
29
30  var s = document.createElement("script");
31  s.type = "text/javascript";
32  s.async = true;
33  s.src = "https://cdn.xsolla.net/embed/buy-button/3.1.8/widget.min.js";
34  s.addEventListener("load", function () {
35    var widgetInstance = XBuyButtonWidget.create(options);
36  });
37  document.getElementsByTagName("head")[0].appendChild(s);
38</script>
39
40<style>
41  #xsolla-buy-button-widget {
42    /* place code for button positioning here */
43    margin: 10px;
44  }
45
46  /* Styles the button itself */
47  .x-buy-button-widget.x-buy-button-widget__tiny .x-buy-button-widget-payment-button {
48    background-color: #ff005b;
49    color: black;
50  }
51</style>

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

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

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

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

 1/* This should be used for button positioning but note this technically repositions the entire widget */
 2#xsolla-buy-button-widget {
 3  /* place code for button positioning here */
 4}
 5
 6/* Styles the button itself */
 7.x-buy-button-widget.x-buy-button-widget__tiny
 8  .x-buy-button-widget-payment-button {
 9  background-color: #ff005b;
10  color: black;
11}
12
13/* Button on hover */
14.x-buy-button-widget.x-buy-button-widget__tiny
15  .x-buy-button-widget-payment-button:hover {
16  background-color: #ff005b;
17}
18
19/* The following are style overrides to leave you with just the button */
20
21/* space immediately surrounding button */
22.x-buy-button-widget-button-block.x-buy-button-widget-button-block__light {
23  background-color: white;
24}
25
26/* space above button (including game title area) */
27.x-buy-button-widget.x-buy-button-widget__tiny
28  .x-buy-button-widget-game-logo {
29  height: 200px;
30  background-image: none !important;
31  background-color: white;
32}
33
34 /* Game title (located right above button) */
35.x-buy-button-widget-game-name.x-buy-button-widget-game-name__light {
36  display: none !important;
37}

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

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

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

 1<div id="xsolla-buy-button-widget"></div>
 2<div id="xsolla-buy-button-widget-2"></div>
 3
 4<script>
 5  var options = {
 6    project_id: "191204",
 7    sku: "789",
 8    item_type: "unit",
 9    api_settings: {
10      sandbox: false
11    },
12    widget_ui: {
13      target_element: "#xsolla-buy-button-widget",
14      theme: {
15        foreground: "gold",
16        background: ""
17      }
18    },
19    payment_widget_ui: {
20      lightbox: {
21        height: "700px",
22        spinner: "round"
23      }
24    }
25  };
26
27  // options for second buy button - note the different SKU and target_element
28  var options2 = {
29    project_id: "191204",
30    sku: "123",
31    item_type: "unit",
32    api_settings: {
33      sandbox: false
34    },
35    widget_ui: {
36      target_element: "#xsolla-buy-button-widget-2",
37      theme: {
38        foreground: "gold",
39        background: ""
40      }
41    },
42    payment_widget_ui: {
43      lightbox: {
44        height: "700px",
45        spinner: "round"
46      }
47    }
48  };
49
50  var s = document.createElement("script");
51  s.type = "text/javascript";
52  s.async = true;
53  s.src = "https://cdn.xsolla.net/embed/buy-button/3.1.4/widget.min.js";
54
55  // one event listener per widget instance. repeat for more buttons, passing in different SKUs
56  s.addEventListener("load", function () {
57    var widgetInstance = XBuyButtonWidget.create(options);
58  });
59  s.addEventListener("load", function () {
60    var widgetInstance2 = XBuyButtonWidget.create(options2);
61  });
62
63  document.getElementsByTagName("head")[0].appendChild(s);
64</script>