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

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

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

С помощью серверного метода создания токена

1. Реализуйте получение токена, чтобы открыть платежный интерфейс одним из способов:
   • на странице выбора платежного метода;
   • на странице ввода платежных данных.
2. Реализуйте способ открытия платежного интерфейса:
   • с помощью скрипта Pay Station Embed;
   • в iframe;
   • в новом окне.

С отображением страницы выбора платежного метода

curl -v https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token \
-X POST \
-u your_merchant_id:merchant_api_key \
-H 'Content-Type:application/json' \
-H 'Accept: application/json' \
-d '
{
  "user":{
    "id":{
      "value": "1234567",
      "hidden": true
    },
    "email": {
      "value": "user1234@game1234.com"
    },
    "name": {
      "value": "UserName",
      "hidden": false
    }
  },
  "settings": {
    "project_id": 12345,
    "currency": "USD"
  },
  "purchase": {
    "subscription": {
      "plan_id": "54321"
    }
  }
}'

Пример страницы выбора платежного метода:

С отображением страницы ввода платежных данных

• purchase.subscription.plan_id с ID выбранного плана.
• settings.payment_method с ID платежного метода. Список ID вы можете найти в проекте в Личном кабинете, в разделе Pay Station > Способы оплаты или запросить у персональному менеджеру проекта.

curl -v https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token \
-X POST \
-u your_merchant_id:merchant_api_key \
-H 'Content-Type:application/json' \
-H 'Accept: application/json' \
-d '
{
  "user":{
    "id":{
      "value": "1234567",
      "hidden": true
    },
    "email": {
      "value": "user1234@game1234.com"
    },
    "name": {
      "value": "UserName",
      "hidden": false
    }
  },
  "settings": {
    "project_id": 12345,
    "payment_method": 1380,
    "currency": "USD"
  },
  "purchase": {
    "subscription": {
      "plan_id": "54321"
    }
  }
}'

Пример страницы ввода платежных данных:

С помощью клиентского метода API

1. Реализуйте получение ссылки на открытие платежного интерфейса с помощью клиентского метода API.
2. Реализуйте открытие платежного интерфейса одним из способов:
   • с помощью скрипта Pay Station Embed;
   • в iframe;
   • в новом окне.

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

В клиентской части вашего приложения реализуйте получение ссылки на открытие платежного интерфейса с использованием HTTP POST-запроса https://subscriptions.xsolla.com​/api/user/v1/projects/{project_id}/subscriptions/buy.

Запрос к методу должен содержать заголовок Authorization: Bearer <client_user_jwt>, где <client_user_jwt> — JSON Web Token (JWT) пользователя — уникальный токен, закодированный по стандарту Base64. Используйте для его получения:

• Методы API Register new user и Auth by username, если в вашем приложении используется авторизация по логину и паролю.

• Метод API Auth via social network, если в вашем приложении используется авторизация через социальные сети.

В качестве query-параметра укажите country — страна пользователя в двухбуквенном обозначении согласно стандарту ISO 3166-1 alpha-2. Влияет на выбор локали и валюты. Если параметр не передается, страна определяется по IP-адресу пользователя.

В запросе передайте параметры:

• plan_external_id для открытия платежного интерфейса на странице выбора платежного метода.

• plan_external_id и settings.payment_method для открытия платежного интерфейса на странице ввода платежных данных.

Параметры тела запроса:

curl -X 'POST' \
'https://subscriptions.xsolla.com/api/user/v1/projects/{project_id}/subscriptions/buy?country=RU  ' \
  -H 'accept: application/json' \
  -H 'Authorization: Bearer client_user_jwt'

  {
    "plan_external_id": "PlanExternalId",
    "settings": {
      "ui": {
        "size": "large",
        "theme": "string",
        "version": "desktop",
        "desktop": {
          "header": {
            "is_visible": true,
            "visible_logo": true,
            "visible_name": true,
            "type": "compact",
            "close_button": true
          }
        },
        "mobile": {
          "mode": "saved_accounts",
          "footer": {
            "is_visible": true
          },
          "header": {
            "close_button": true
          }
        },
        "mode": "user_account"
        }
      },
      "currency": "string",
      "locale": "string",
      "external_id": "string",
      "payment_method": 1,
      "return_url": "string",
      "redirect_policy": {
        "redirect_conditions": "none",
        "delay": 0,
        "status_for_manual_redirection": "none",
        "redirect_button_caption": "string"
      }
    }

{
  "link_to_ps": "https://secure.xsolla.com/paystation2/?access_token=<access_token>"
}

С помощью Pay Station Embed

На страницу вашего сайта добавьте скрипт для открытия виджета платежного интерфейса. Полное описание скрипта доступно в проекте на GitHub.

ПРИМЕР АСИНХРОННОЙ ЗАГРУЗКИ СКРИПТА

<script>
   var options = {
       access_token: 'ACCESS_TOKEN', //TODO use access token, received on previous step
       sandbox: true //TODO please do not forget to remove this setting when going live
   };
   var s = document.createElement('script');
   s.type = "text/javascript";
   s.async = true;
   s.src = "https://cdn.xsolla.net/payments-bucket-prod/embed/1.5.0/widget.min.js";
   s.addEventListener('load', function (e) {
       XPayStationWidget.init(options);
   }, false);
   var head = document.getElementsByTagName('head')[0];
   head.appendChild(s);
</script>

<button data-xpaystation-widget-open>Buy Credits</button>

Pay Station Embed позволяет обрабатывать через механизм postMessage события платежного интерфейса, которые вы можете отправлять в систему аналитики. Чтобы узнать, как настроить обработку событий в вашей системе аналитики, обратитесь к персональному менеджеру проекта или напишите на csm@xsolla.com.

Список параметров для инициализации виджета:

В Iframe

Необходимо реализовать:

• Определение типа устройства (desktop или mobile) и передачу значения в токене в параметре settings.ui.version.
• Механизм postMessage для получения событий от платежного интерфейса, которые вы можете отправлять в систему аналитики. Чтобы узнать, как настроить обработку событий в вашей системе аналитики, обратитесь к персональному менеджеру проекта или напишите на csm@xsolla.com.

Для открытия платежного интерфейса в iframe используйте ссылку https://secure.xsolla.com/paystation4/?token=ACCESS_TOKEN, где ACCESS_TOKEN — токен, полученный с помощью метода Создание токена. Готовую ссылку с токеном вы также можете получить при реализации клиентского метода для открытия платежного интерфейса.

Для тестирования используйте URL-адрес https://sandbox-secure.xsolla.com/paystation4/?token=ACCESS_TOKEN.

В новом окне

Для открытия платежного интерфейса в новом окне используйте ссылку https://secure.xsolla.com/paystation4/?token=ACCESS_TOKEN, где ACCESS_TOKEN — токен, полученный с помощью метода Создание токена. Готовую ссылку с токеном вы также можете получить при реализации клиентского метода для открытия платежного интерфейса.

Для тестирования используйте URL-адрес https://sandbox-secure.xsolla.com/paystation4/?token=ACCESS_TOKEN.