SDK для Android / Как использовать Pay Station совместно с аутентификацией Firebase
  На главную

SDK для Android

Как использовать Pay Station совместно с аутентификацией Firebase

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

При таком способе интеграции вам потребуется самостоятельно реализовать логику определения страны пользователя и валюты для оплаты покупки.

Сценарий интеграции:

  1. Создайте проект.
  1. Зарегистрируйтесь в Личном кабинете и создайте новый проект. ID созданного проекта потребуется вам на дальнейших шагах.

  1. Настройте каталог товаров:
    • Создайте каталог товаров на стороне Xsolla. Вы можете добавить товары вручную или импортировать их из Google Play или PlayFab.
    • Реализуйте получение каталога с помощью библиотеки Store и его отображение на клиенте приложения.

  1. Настройте покупку товара:
    • Реализуйте создание заказа с данными о пользователе и товаре c помощью облачной функции Firebase.
    • Реализуйте открытие платежного интерфейса на клиентской части приложения с помощью библиотеки Payments.

  1. Настройте отслеживание статуса заказа.

Внимание

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

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

В качестве примера реализации совместного использования аутентификации Firebase и Pay Station используйте тестовое веб-приложение. Исходный код тестового веб-приложения доступен на GitHub.

Создание проекта

Регистрация в Личном кабинете

Личный кабинет — основной инструмент для настройки возможностей Xsolla, а также для работы с аналитикой и транзакциями.

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

Чтобы зарегистрироваться, перейдите в Личный кабинет и создайте аккаунт.

Примечание

Пароль от Личного кабинета должен содержать не менее:

  • 8 символов;
  • одной цифры;
  • одной прописной буквы латинского алфавита;
  • одной строчной буквы латинского алфавита.

Для обеспечения безопасности пароля рекомендуется:

  • менять пароль не реже одного раза в 90 дней;
  • использовать новый пароль, который не совпадает с последними 4 паролями вашей учетной записи;
  • использовать уникальный пароль, который не совпадает с паролями в других сервисах;
  • не хранить пароль в легкодоступных местах;
  • использовать менеджеры паролей для хранения пароля.

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

Создание проекта в Личном кабинете

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

Чтобы создать новый проект:

  1. Откройте Личный кабинет.
  2. В боковом меню нажмите Создать проект.

  1. Введите название проекта на английском языке (обязательно).

Примечание
После создания проекта вы можете добавить дополнительные языки и названия проекта на этих языках в разделе Настройки проекта.

  1. Выберите одну или несколько платформ релиза вашей игры (обязательно).
  2. Укажите ссылку на игру. Если у вашей игры нет сайта, укажите ссылку на источник, который содержит информацию об игре (обязательно).
  3. Выберите игровой движок.
  4. Выберите способ монетизации, который вы используете или собираетесь использовать.
  5. Укажите, вышла ли уже ваша игра. Если игра не вышла, укажите предполагаемую дату релиза.
  6. Нажмите Создать проект. Вы увидите страницу с рекомендованными для вас продуктами Xsolla.

В процессе интеграции вам потребуется ID проекта. Вы можете найти его в Личном кабинете рядом с названием проекта.

Настройка каталога товаров

Создание предметов в Личном кабинете

Внимание

Вам потребуется создать каталог товаров на стороне Xsolla. Вы можете добавить товары вручную или импортировать их из Google Play или PlayFab. При импорте из Google Play можно импортировать не более 100 предметов за раз.

В рамках этой инструкции приведены шаги по базовой настройке виртуального предмета. Позже вы сможете дополнить свой каталог другими товарами (виртуальными валютами, бандлами, игровыми ключами), создать группы товаров, настроить акционные кампании, региональные цены и т. д.

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

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

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

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

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

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

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

Отображение каталога в клиентской части приложения

  1. Добавьте в проект библиотеку Store. Для этого откройте файл build.gradle и добавьте следующую строку в раздел зависимостей:

Copy
Full screen
Small screen
    implementation("com.xsolla.android:store:latest.release")
    

    1. В клиентской части приложения добавьте UI для отображения каталога товаров.
    2. Реализуйте запрос каталога товаров с серверов Xsolla.

    Примечание
    В примере для получения списка виртуальных предметов используется метод XStore.getVirtualItems. Вы также можете получать информацию о товарах из каталога с помощью других методов библиотеки Store.

    Пример (класс StoreActivity тестового веб-приложения):

    Copy
    Full screen
    Small screen
    package com.xsolla.androidsample
    
    import androidx.appcompat.app.AppCompatActivity
    import android.os.Bundle
    import android.widget.Toast
    import androidx.recyclerview.widget.LinearLayoutManager
    import androidx.recyclerview.widget.RecyclerView
    import com.xsolla.android.store.XStore
    import com.xsolla.android.store.callbacks.GetVirtualItemsCallback
    import com.xsolla.android.store.entity.response.items.VirtualItemsResponse
    import com.xsolla.androidsample.adapter.BuyItemAdapter
    
    class StoreActivity : AppCompatActivity() {
    
        private lateinit var itemsView: RecyclerView
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_store)
    
            XStore.init(<projectId>)
    
            initUI()
            loadVirtualItems()
        }
    
        private fun initUI() {
            itemsView = findViewById(R.id.buy_recycler_view)
            itemsView.layoutManager = LinearLayoutManager(this)
        }
    
        private fun loadVirtualItems() {
            val parentActivity = this
            XStore.getVirtualItems(object : GetVirtualItemsCallback {
                override fun onSuccess(response: VirtualItemsResponse) {
                    itemsView.adapter = BuyItemAdapter(parentActivity, response.items.filter { item -> item.virtualPrices.isEmpty() && !item.isFree })
                }
    
                override fun onError(throwable: Throwable?, errorMessage: String?) {
                    showNotificationMessage(errorMessage ?: throwable?.javaClass?.name ?: "Error")
                }
            })
        }
    
        private fun showNotificationMessage(message: String) {
            Toast.makeText(
                baseContext,
                message,
                Toast.LENGTH_SHORT,
            ).show()
        }
    }
    

    В скрипте в блоке инициализации XStore.init() укажите ID проекта, который можно найти в Личном кабинете рядом с названием проекта.

    Настройка покупки товара

    Создание заказа с помощью облачной функции

    Чтобы на стороне Xsolla сформировать заказ с данными о пользователе и товаре, добавьте в проект облачную функцию, вызывающую метод API Create payment token for purchase. Этот метод вернет платежный токен, который потребуется для открытия платежного интерфейса и совершения оплаты.

    Ограничения:

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

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

    Добавление облачной функции в проект Firebase

    1. Установите Firebase CLI (Command-Line Interface — командная строка), для этого выполните CLI-команду:

    Copy
    Full screen
    Small screen
      npm install -g firebase-tools
      

      1. Чтобы связать ваш проект с проектом Firebase, инициализируйте проект Firebase, для этого выполните CLI-команду:

      Copy
      Full screen
      Small screen
        firebase init functions
        

        1. Следуйте указаниям установщика, чтобы задать настройки:
          1. Выберите существующую кодовую базу.
          2. Укажите JavaScript в качестве языка создания облачных функций.
          3. Установите зависимости.

        1. Откройте файл functions/index.js и измените его:

        Copy
        Full screen
        Small screen
        // The Cloud Functions for Firebase SDK to create Cloud Functions and triggers.
        const functions = require('firebase-functions/v1');
        
        const projectId = <projectId>;
        const apiKey = <apiKey>;
        
        exports.getXsollaPaymentToken = functions.https.onRequest((req, res) => {
        
          const requestBody = req.body;
            if (!requestBody) {
              res.status(400).send('Request body is missing');
              return;
            }
        
          const userId = requestBody.data.uid;
          const email = requestBody.data.email;
          const sku = requestBody.data.sku;
          const returnUrl = requestBody.data.returnUrl;
        
          const payload = {
            user: {
              id: {value: userId},
              name: {
                value: email
              },
              email: {
                value: email
              },
              country: {
                value: 'US',
                allow_modify: false
              }
            },
            purchase: {
              items: [
                {
                  sku: sku,
                  quantity: 1
                }
              ]
            },
            sandbox: true,
            settings: {
              language: 'en',
              currency: 'USD',
              return_url: returnUrl,
              ui: {
                theme: '63295aab2e47fab76f7708e3'
              }
            }
          }
        
          let url = "https://store.xsolla.com/api/v3/project/" + projectId.toString() + "/admin/payment/token";
        
          fetch(
            url,
            {
              method: "POST",
              headers: {
                'Content-Type': 'application/json',
                Authorization: 'Basic ' + btoa(`${projectId}:${apiKey}`)
              },
              body: JSON.stringify(payload)
            },
          )
          .then(xsollaRes => {
            // Handle the response data
            if (xsollaRes.ok) {
              return xsollaRes.json();
            } else {
              throw new Error(`HTTP request failed with status ${xsollaRes.status} and statusText: ${xsollaRes.statusText}`)
            }
          })
          .then(data => {
            res.send(JSON.stringify(data));
          })
          .catch(error => {
            res.send("Error = " + error);
          });
        });
        
        exports.webhookFakeResponse = functions.https.onRequest((request, response) => {
          response.status(200).send()
        })
        

        1. В скрипте укажите значения для переменных:
          • projectId — ID проекта, который можно найти в Личном кабинете рядом с названием проекта.

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

        1. Чтобы протестировать работу облачной функции с помощью эмулятора, используйте CLI-команду:

        Copy
        Full screen
        Small screen
          firebase emulators:start
          

          1. После запуска облачной функции  вы можете вызывать в клиентской части вашего приложения следующие методы:
            • getXsollaPaymentToken — возвращает платежный токен для открытия платежного интерфейса.
            • webhookFakeResponse — отправляет 200 HTTP-код в ответ на вебхук Успешный платеж. Метод не содержит логику валидации покупки и используется только для тестирования. Полный список вебхуков и общая информация о работе с ними приведена в документации по вебхукам.

          1. Локально методы доступны для вызова по URL-адресам https://localhost:5001/{firebase-project-id}/us-central1/getXsollaPaymentToken и https://localhost:5001/{firebase-project-id}/us-central1/webhookFakeResponse, где {firebase-project-id} — ID проекта Firebase (консоль Firebase > Project Settings > Project ID).

          1. Чтобы запустить облачную функцию в боевой среде, используйте CLI-команду:

          Copy
          Full screen
          Small screen
            firebase deploy --only functions
            

            1. После запуска в боевой среде методы станут доступны для вызова по URL-адресам https://us-central1-{firebase-project-id}.cloudfunctions.net/getXsollaPaymentToken и https://us-central1-{firebase-project-id}.cloudfunctions.net/webhookFakeResponse, где {firebase-project-id} — ID проекта Firebase (консоль Firebase > Project Settings > Project ID). Подробная информация о запуске функции в боевой среде приведена в документации Firebase.

            Реализация открытия платежного интерфейса

            1. Добавьте в проект библиотеку Payments. Для этого откройте файл build.gradle и добавьте следующую строку в раздел зависимостей:

            Copy
            Full screen
            Small screen
              implementation("com.xsolla.android:payments:latest.release")
              

              1. Откройте файл AndroidManifest.xml и добавьте разрешение для доступа к интернету:

              Copy
              Full screen
              Small screen
              <uses-permission android:name="android.permission.INTERNET" />
              

              1. Добавьте логику формирования заказа (вызов метода XStore.getXsollaPaymentToken облачной функции) и открытия платежного интерфейса с полученным платежным токеном (класс XPayments.createIntentBuilder()).

              1. Для вызова метода getXsollaPaymentToken укажите один из следующих URL-адресов, где {firebase-project-id} — ID проекта Firebase (консоль Firebase > Project Settings > Project ID):
                • для локального доступа — https://localhost:5001/{firebase-project-id}/us-central1/getXsollaPaymentToken;
                • для доступа в боевой среде — https://us-central1-{firebase-project-id}.cloudfunctions.net/getXsollaPaymentToken.

              Пример (класс BuyItemAdapter тестового веб-приложения):

              Copy
              Full screen
              Small screen
              package com.xsolla.androidsample.adapter
              
              import android.R.attr.duration
              import android.os.Handler
              import android.os.Looper
              import android.view.LayoutInflater
              import android.view.ViewGroup
              import android.widget.Toast
              import androidx.recyclerview.widget.RecyclerView
              import com.bumptech.glide.Glide
              import com.xsolla.android.payments.XPayments
              import com.xsolla.android.payments.data.AccessToken
              import com.xsolla.android.store.entity.response.items.VirtualItemsResponse
              import com.xsolla.androidsample.R
              import com.xsolla.androidsample.StoreActivity
              import org.json.JSONObject
              import java.io.BufferedReader
              import java.io.BufferedWriter
              import java.io.OutputStream
              import java.io.OutputStreamWriter
              import java.net.HttpURLConnection
              import java.net.URL
              
              
              class BuyItemAdapter(private val parentActivity: StoreActivity, private val items: List<VirtualItemsResponse.Item>) :
                  RecyclerView.Adapter<BuyItemViewHolder>() {
                  override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): BuyItemViewHolder {
                      return BuyItemViewHolder( LayoutInflater.from(parent.context)
                          .inflate(R.layout.buy_item_sample, parent, false))
                  }
              
                  override fun onBindViewHolder(holder: BuyItemViewHolder, position: Int) {
                      val item = items[position]
                      Glide.with(holder.view).load(item.imageUrl).into(holder.itemImage)
                      holder.itemName.text = item.name
                      holder.itemDescription.text = item.description
                      var priceText: String
                      if(item.virtualPrices.isNotEmpty()) {
                          priceText = item.virtualPrices[0].getAmountRaw() + " " + item.virtualPrices[0].name
                      } else {
                          priceText = item.price?.getAmountRaw() + " " + item.price?.currency.toString()
                      }
              
                      holder.itemPrice.text = priceText
              
                      holder.itemButton.setOnClickListener {
                          Thread {
                              purchase(item.sku!!)
                          }.start()
                      }
                  }
              
                  private fun purchase(sku: String) {
              
                      val uid = parentActivity.intent.getStringExtra("uid")
                      val email = parentActivity.intent.getStringExtra("email")
              
                      val jsonBody = JSONObject()
                      jsonBody.put("data", JSONObject().apply {
                          put("uid", uid)
                          put("email", email)
                          put("sku", sku)
                          put("returnUrl", "app://xpayment." + parentActivity.packageName)
                      })
              
                      val connection = URL(https://localhost:5001/{firebase-project-id}/us-central1/getXsollaPaymentToken).openConnection() as HttpURLConnection
                      connection.requestMethod = "POST"
                      connection.setRequestProperty("Content-Type", "application/json")
                      connection.doOutput = true
              
                      val outputStream: OutputStream = connection.outputStream
                      val writer = BufferedWriter(OutputStreamWriter(outputStream))
                      writer.write(jsonBody.toString())
                      writer.flush()
                      writer.close()
              
                      val responseCode = connection.responseCode
              
                      if (responseCode == HttpURLConnection.HTTP_OK) {
                          val response = connection.inputStream.bufferedReader().use(BufferedReader::readText)
                          connection.disconnect()
              
                          val jsonObject = JSONObject(response)
                          val token = jsonObject.getString("token")
                          val orderId = jsonObject.getString("order_id")
              
                          val intent = XPayments.createIntentBuilder(parentActivity)
                              .accessToken(AccessToken(token))
                              .isSandbox(true)
                              .build()
                          parentActivity.startActivityForResult(intent, 1)
                      } else {
                          Handler(Looper.getMainLooper()).post {
                              showNotificationMessage("HTTP request failed with error: $responseCode")
                          }
                      }
                  }
              
                  override fun getItemCount() = items.size
              
                  private fun showNotificationMessage(message: String) {
                      Toast.makeText(
                          parentActivity,
                          message,
                          Toast.LENGTH_SHORT,
                      ).show()
                  }
              }
              

              1. Добавьте метод onActivityResult() для обработки результата платежа.

              Пример (класс StoreActivity тестового веб-приложения):

              Copy
              Full screen
              Small screen
              override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
                      super.onActivityResult(requestCode, resultCode, data)
                      if (requestCode == 1) {
                          val (status, _) = XPayments.Result.fromResultIntent(data)
                          when (status) {
                              XPayments.Status.COMPLETED -> showNotificationMessage("Payment completed")
                              XPayments.Status.CANCELLED -> showNotificationMessage("Payment canceled")
                              XPayments.Status.UNKNOWN -> showNotificationMessage("Payment error")
                          }
                      }
                  }
              

              Отслеживание статуса заказа

              Отслеживание статуса заказа требуется, чтобы убедиться, что оплата прошла успешно, и начислить товары пользователю.

              Получение статуса заказа на клиентской части

              Чтобы подписаться на изменения статуса заказа, используйте в клиентской части приложения метод SDK XStore.getOrderStatus. Передайте в метод следующие параметры:

              • listener — объект слушателя типа OrderStatusListener;
              • orderId — ID заказа, полученный в результате покупки через корзину, покупки в один клик или покупки за виртуальную валюту.

              Подробные сведения о работе метода приведены в разделе Отслеживание статуса заказа.

              Получение статуса заказа на серверной части

              Внимание

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

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

              Чтобы настроить вебхуки на стороне Xsolla:

              1. Откройте проект в Личном кабинете.
              2. Нажмите Настройки проекта в боковом меню и перейдите в раздел Вебхуки.
              3. В поле Сервер для вебхуков укажите URL-адрес, на который Xsolla будет отправлять вебхуки.

              Примечание

              Для тестирования вы можете указать https://us-central1-{firebase-project-id}.cloudfunctions.net/webhookFakeResponse, где  {firebase-project-id} — ID проекта Firebase (консоль Firebase > Project Settings > Project ID). В этом случае Firebase будет имитировать успешную обработку вебхука. Для реального проекта вам потребуется добавить логику валидации покупки.

              Для тестирования вебхуков вы также можете выбрать любой специализированный сайт, например webhook.site, или платформу, например ngrok.

              1. Скопируйте и сохраните значение из поля Секретный ключ. Этот ключ генерируется по умолчанию и используется для подписи вебхуков. Если вы хотите изменить его, нажмите значок обновления.
              2. Нажмите Получать вебхуки.

              Была ли статья полезна?
              Спасибо!
              Что может сделать страницу еще лучше? Сообщение
              Жаль, что так произошло
              Расскажите, почему статья не была полезна. Сообщение
              Спасибо за обратную связь!
              Ваши мысли и идеи помогут нам улучшить ваш пользовательский опыт.
              Оценить страницу
              Оценить страницу
              Что может сделать страницу еще лучше?

              В другой раз

              Спасибо за обратную связь!
              Последнее обновление: 5 апреля 2024

              Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.

              Сообщите о проблеме
              Мы постоянно улучшаем качество нашей документации. Ваш отзыв поможет нам в этом.
              Укажите email-адрес, чтобы мы могли связаться с вами
              Спасибо за обратную связь!