Использование шаблона F2P

О решении

Используйте это решение и готовые инструменты Xsolla, чтобы монетизировать свою Free-to-play (F2P) игру с помощью собственного веб-магазина. В этом магазине доступна продажа виртуальных предметов, валюты и бандлов на внешнем сайте — независимо от того, распространяется ли ваша игра на ПК, консолях или является кроссплатформенной.

Основные возможности:

• Гибкий и безопасный платежный интерфейс Xsolla, поддерживающий более 1000 способов оплаты по всему миру.
• Интерфейс магазина, который легко настраивается через конструктор сайтов без необходимости разработки с нуля.
• Полный контроль над каталогом товаров, ценообразованием и акциями.
• Широкий выбор LiveOps-инструментов, например, скидочные акции, апселлы, система вознаграждений.

Это руководство описывает, как быстро создать и запустить веб-магазин для F2P-игры с использованием инструментов Xsolla.

Для кого подходит

Решение подойдет вам, если вы:

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

Как настроить

1. Создайте проект в Личном кабинете.
2. Создайте каталог товаров.
3. Создайте сайт.
4. Настройте основные блоки.
5. Настройте аутентификацию пользователей.
6. Настройте вебхуки для начисления покупок пользователю.
7. Протестируйте работу сайта.
8. Опубликуйте сайт.

Создание каталога товаров

Чтобы создать каталог, вы можете:

• загрузить товары вручную в интерфейсе Личного кабинета;
• вызвать методы API;
• импортировать каталог из JSON-файла.

Чтобы добавить в каталог виртуальный предмет с базовыми настройками:

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

3. Задайте базовые настройки предмета в следующих полях:
   • Изображение (опционально).
   • Артикул (уникальный ID предмета).
   • Название предмета.
   • Описание (опционально).

4. Задайте цену предмета:
   1. Установите переключатель Цены в реальной валюте в положение Вкл.
   2. В поле Цена в реальной валюте измените валюту (опционально) и укажите цену предмета.
   3. Если вы изменили валюту в поле Цена в реальной валюте, укажите эту же валюту в поле Валюта по умолчанию.

5. Измените статус предмета на Доступен.

6. Нажмите Создать предмет.

Создание сайта

1. Откройте проект в Личном кабинете.
2. На главной странице проекта нажмите Изменить фокус и выберите Продажа товаров в игре и онлайн.

3. На шаге Опционально: Настройте веб-магазин нажмите Создать шаблон.

4. На вкладке Экспресс добавьте ссылку на платформу, на которой доступна ваша игра — Steam или Epic Games Store. Это позволит быстро создать сайт, брендированный под вашу игру: при его создании в него автоматически добавляются изображение и название игры, сведения о разработчике, а также цветовая гамма.

5. Нажмите Создать магазин.
6. Нажмите Продолжить настройку.

Настройка основных блоков

1. На главной странице проекта в фокусе Продажа товаров в игре и онлайн на шаге Опционально: Настройте веб-магазин нажмите Кастомизировать сайт. Вы будете перенаправлены в конструктор сайта, в котором сможете кастомизировать созданный сайт.

Примечание

Если вы закрыли главную страницу проекта, перейдите в раздел Каналы продаж > Веб-сайты и нажмите Открыть Site Builder в панели созданного сайта. Чтобы найти созданный сайт в списке, вы можете ориентироваться на время создания, которое отображается в панели сайта.

2. Настройте блок Хедер, в котором отображается информация о пользователе и содержатся элементы навигации по сайту:
   • Добавьте логотип вашей игры или студии.
   • При необходимости измените преднастроенные кнопки.

Пример блока Хедер:

3. Настройте Заглавный блок, в котором отображается основная информация о вашем магазине:
   • Добавьте название, описание и фоновое изображение для блока, если вы хотите использовать название и изображение, отличные от автоматически загруженных.
   • Добавьте теги.
   • Укажите, на каких платформах доступна игра.
   • Измените преднастроенные кнопки или добавьте дополнительные при необходимости.

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

Пример блока Боевой пропуск:

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

Внимание

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

Пример блока Магазин:

6. Настройте блок Футер, в котором содержится правовая информация и настройки приватности. Вы можете:
   • Выбрать расположение элементов: столбцы или строки.
   • Добавить пользовательский фон.
   • Добавить ссылки на социальные сети.
   • Добавить возрастные ограничения.

Пример блока Футер:

7. Перейдите в раздел Настройки корзины, чтобы настроить ее дополнительные возможности. Установите соответствующие переключатели в активное положение:
   • Показывать поле для промокода — позволяет пользователям использовать промокод или купон в интерфейсе корзины.
   • Авторизация пользователя до открытия корзины — открывает окно авторизации при переходе к корзине, если пользователь не был авторизован.
8. При необходимости добавьте дополнительные страницы в свой магазин, например, с последними новостями вашей игры. Для этого:

1. 1. Добавьте необходимые страницы, следуя инструкциям.
   2. В блоке, в который вы хотите добавить переход на страницу, например, Хедер:
      1. Добавьте новую кнопку или перейдите к редактированию существующей.
      2. В разделе с настройками кнопки выберите действие при ее нажатии — Открыть страницу.
      3. В раскрывающемся списке выберите страницу, которая будет открываться при нажатии на кнопку.

Настройка аутентификации пользователя

Аутентификация позволяет пользователю покупать товары в магазине и видеть уникальные предложения в каталоге. Настройка аутентификации через Xsolla Login предоставляет пользователю широкий выбор способов авторизации: через социальные сети, с помощью одноразовых кодов или ссылок, с помощью ввода логина и пароля. Кроме этого вы сможете кастомизировать виджет Xsolla Login и вводить возрастные ограничения на авторизацию.

Чтобы настроить аутентификацию пользователей через Xsolla Login:

1. В проекте в Личном кабинете перейдите в раздел Каналы продаж > Веб-сайты.
2. Нажмите Открыть Site Builder в панели нужного сайта.
3. В конструкторе вашего сайта перейдите в блок Настройки входа.
4. Выберите вариант авторизации Xsolla Login.
5. В раскрывающемся списке выберите Новый вариант Login. В результате автоматически будет создан вариант авторизации с возможностью аутентификации пользователя по email-адресу и паролю. Чтобы настроить другой вариант авторизации, следуйте инструкции.

6. Подключите хранилище для данных пользователя. В зависимости от способа хранения данных пользователей вам доступна разная функциональность продукта (см. раздел Сравнение хранилищ для данных пользователей).

Начисление покупки пользователю

Реализуйте в вашем приложении начисление покупок пользователю, используя полученную в вебхуках информацию от Xsolla о деталях транзакции и купленных товарах. Если вы зарегистрировались в Личном кабинете после 22 января 2025 г., для полноценной работы магазина и управления платежами, реализуйте обработку следующих вебхуков:

Тестирование сайта в тестовом окружении

Чтобы протестировать работу сайта в тестовом окружении:

1. В проекте в Личном кабинете перейдите в раздел Каналы продаж > Веб-сайты.
2. Нажмите Открыть Site Builder в панели нужного сайта.
3. Нажмите Просмотр.

4. Выберите товар и нажмите кнопку покупки.
5. Выберите группу способов оплаты Карта.
6. Введите реквизиты тестовой банковской карты. Остальные поля могут быть заполнены любыми данными. Вы также можете указать неверные реквизиты (номер карты, срок действия или CVV) для генерации ошибки.

Публикация сайта

1. Чтобы повысить эффективность сайта:

1. 1. В разделе Настройки SEO задайте параметры, которые будут учитываться поисковыми системами и использоваться для отображения предпросмотра страницы в социальных сетях: загрузите фавикон, укажите заголовок и описание магазина, добавьте изображение для предпросмотра.
   2. Настройте локализацию сайта.
   3. Внесите изменения в домен (опционально). Для этого перейдите в Каналы продаж > Веб-сайты и нажмите Настроить в панели вашего сайта. В разделе Домен внесите изменения в Домен Xsolla или подключите собственный домен.

2. После того как вы внесли все необходимые изменения и ваш веб-магазин готов к запуску, нажмите Опубликовать.

Расширенная настройка магазина

Вы можете использовать дополнительные возможности для вашего магазина:

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