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

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

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

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

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

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

Чтобы платежный интерфейс при открытии отображал страницу выбора платежного метода, передайте в метод Создание токена параметр purchase.subscription.plan_id с ID плана подписки, выбранного пользователем. При необходимости передайте дополнительные параметры для кастомизации платежного интерфейса.

 1curl -v https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token \
 2-X POST \
 3-u your_merchant_id:merchant_api_key \
 4-H 'Content-Type:application/json' \
 5-H 'Accept: application/json' \
 6-d '
 7{
 8  "user":{
 9    "id":{
10      "value": "1234567",
11      "hidden": true
12    },
13    "email": {
14      "value": "user1234@game1234.com"
15    },
16    "name": {
17      "value": "UserName",
18      "hidden": false
19    }
20  },
21  "settings": {
22    "project_id": 12345,
23    "currency": "USD"
24  },
25  "purchase": {
26    "subscription": {
27      "plan_id": "54321"
28    }
29  }
30}'

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

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

Для того чтобы платежный интерфейс при открытии отображал страницу ввода платежных данных, передайте в метод Создание токена параметры:

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

 1curl -v https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token \
 2-X POST \
 3-u your_merchant_id:merchant_api_key \
 4-H 'Content-Type:application/json' \
 5-H 'Accept: application/json' \
 6-d '
 7{
 8  "user":{
 9    "id":{
10      "value": "1234567",
11      "hidden": true
12    },
13    "email": {
14      "value": "user1234@game1234.com"
15    },
16    "name": {
17      "value": "UserName",
18      "hidden": false
19    }
20  },
21  "settings": {
22    "project_id": 12345,
23    "payment_method": 1380,
24    "currency": "USD"
25  },
26  "purchase": {
27    "subscription": {
28      "plan_id": "54321"
29    }
30  }
31}'

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

С помощью клиентского метода 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 для открытия платежного интерфейса на странице ввода платежных данных.

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

 1curl -X 'POST' \
 2'https://subscriptions.xsolla.com/api/user/v1/projects/{project_id}/subscriptions/buy?country=RU  ' \
 3  -H 'accept: application/json' \
 4  -H 'Authorization: Bearer client_user_jwt'
 5
 6  {
 7    "plan_external_id": "PlanExternalId",
 8    "settings": {
 9      "ui": {
10        "size": "large",
11        "theme": "string",
12        "version": "desktop",
13        "desktop": {
14          "header": {
15            "is_visible": true,
16            "visible_logo": true,
17            "visible_name": true,
18            "type": "compact",
19            "close_button": true
20          }
21        },
22        "mobile": {
23          "mode": "saved_accounts",
24          "footer": {
25            "is_visible": true
26          },
27          "header": {
28            "close_button": true
29          }
30        },
31        "mode": "user_account"
32        }
33      },
34      "currency": "string",
35      "locale": "string",
36      "external_id": "string",
37      "payment_method": 1,
38      "return_url": "string",
39      "redirect_policy": {
40        "redirect_conditions": "none",
41        "delay": 0,
42        "status_for_manual_redirection": "none",
43        "redirect_button_caption": "string"
44      }
45    }

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

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

С помощью Pay Station Embed

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

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

 1<script>
 2   var options = {
 3       access_token: 'ACCESS_TOKEN', //TODO use access token, received on previous step
 4       sandbox: true //TODO please do not forget to remove this setting when going live
 5   };
 6   var s = document.createElement('script');
 7   s.type = "text/javascript";
 8   s.async = true;
 9   s.src = "https://cdn.xsolla.net/payments-bucket-prod/embed/1.5.0/widget.min.js";
10   s.addEventListener('load', function (e) {
11       XPayStationWidget.init(options);
12   }, false);
13   var head = document.getElementsByTagName('head')[0];
14   head.appendChild(s);
15</script>
16
17<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.