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

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

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

  1. Реализуйте получение токена, чтобы открыть платежный интерфейс одним из способов:
  2. Реализуйте способ открытия платежного интерфейса:

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

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

Copy
Full screen
Small screen
    Пример запроса:
    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 с идентификатором выбранного плана.
    • settings.payment_method с идентификатором платежного метода. Список идентификаторов вы можете найти в вашем проекте в Личном кабинете, в разделе Платежи > Способы оплаты или запросить у аккаунт-менеджера проекта.

    При необходимости передайте дополнительные параметры для кастомизации платежного интерфейса.

    Copy
    Full screen
    Small screen
    Пример запроса:
    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"
        }
      }
    }'

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

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

    Чтобы платежный интерфейс при открытии отображал страницу управления подписками и платежным аккаунтом, передайте в метод Создание токена параметр settings.ui.mode = user_account.

    Copy
    Full screen
    Small screen
      Пример запроса:
      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
              }
          },
          "settings": {
            "project_id": 146026,
            "language": "en",
            "currency": "USD",
            "ui": {
                "mode": "user_account",
                "theme": "default_dark",
                "desktop": {
                   "subscription_list": {
                     "layout": "grid"
                   }
                 }
               }
          }
        }

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

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

      1. Реализуйте клиентские методы для открытия платежного интерфейса одним из способов:
      2. Реализуйте открытие платежного интерфейса одним из способов:

      Открытие платежного интерфейса на странице выбора платежного метода или ввода платежных данных

      В клиентской части вашего приложения реализуйте получение ссылки на открытие платежного интерфейса с использованием 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, если в вашем приложении используется авторизация через социальные сети.

      В качестве path-параметра передайте project ID (обязательный) — ID проекта. Вы можете найти этот параметр в Личном кабинете рядом с названием проекта.

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

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

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

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

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

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

      ПараметрТипОписание
      plan_external_id
      stringОбязательный. Внешний ID плана подписки. Вы можете найти этот параметр в Личном кабинете в разделе Подписки > Планы подписки.
      settings
      objectОбъект, содержащий настройки проекта.
      settings.ui
      objectОбъект с настройками интерфейса.
      settings.ui.size
      stringРазмер платежного интерфейса. В зависимости от требуемых размеров платежного интерфейса параметр может принимать следующие значения:
      • small: Наименьший размер платежного интерфейса. Используется в случаях, когда размеры окна строго ограничены (размер: 620 x 630 px).
      • medium: Рекомендуемый размер платежного интерфейса. Оптимален при открытии в lightbox (размер: 740 x 760 px).
      • large: Желательно открывать в новом окне/вкладке (размер: 820 x 840 px).
      settings.ui.theme
      stringВнешний вид интерфейса оплаты. Может принимать значения default (по умолчанию) или default_dark.
      settings.ui.version
      stringТип устройства. Может принимать значения desktop (по умолчанию) или mobile.
      settings.ui.desktop
      objectОбъект с данными настроек для desktop-версии.
      settings.ui.desktop.header
      objectОбъект с настройками header.
      settings.ui.desktop.header.close_button
      booleanПоказывать ли кнопку Закрыть в настольной версии платежного интерфейса. Нажатие на кнопку закрывает платежный интерфейс и перенаправляет пользователя на адрес, указанный в параметре settings.return_url. false по умолчанию.
      settings.ui.desktop.header.is_visible
      booleanДолжен ли хедер отображаться на странице оплаты.
      settings.ui.desktop.header.is_visible.type
      stringВнешний вид хедера. Может принимать значения compact (в этом случае название игры и ID пользователя не будут показываться в хедере) или normal.
      booleanЕсли значение true, то логотип будет отображаться в хедере. Для добавления логотипа отправьте его аккаунт-менеджеру проекта.
      settings.ui.desktop.header.visible_name
      booleanДолжно ли название игры отображаться в хедере.
      settings.ui.desktop.header.type
      stringВнешний вид хедера. Может принимать значения compact (в этом случае название игры и ID пользователя не будут показываться в хедере) или normal.
      settings.ui.mobile.mode
      stringПользователь может совершить платеж только через сохраненные способы оплаты. Принимает значение saved_accounts.
      booleanСкрывать или нет footer в мобильной версии платежного интерфейса.
      settings.ui.mobile.header.close_button
      booleanПоказывать ли кнопку Закрыть в мобильной версии платежного интерфейса. Нажатие на кнопку закрывает платежный интерфейс и перенаправляет пользователя на адрес, указанный в параметре settings.return_url. false по умолчанию.
      settings.ui.license_url
      stringСсылка на лицензионное соглашение.
      settings.ui.mode
      stringПлатежный интерфейс в режиме Личного кабинета. Принимает значение user_account. Хедер содержит только навигационное меню Личного кабинета; исключается возможность выбора предмета и оплата покупки; режим Личного кабинета доступен только в desktop-режиме.
      settings.ui.user_account
      objectОбъект с данными об аккаунте пользователя.
      settings.ui.user_account.history
      objectРаздел История.
      settings.ui.user_account.history.enable
      integerДолжен ли раздел отображаться в раскрывающемся меню в платежном интерфейсе. Может принимать значения true или false. Если параметр не передается, раздел будет отображаться.
      settings.ui.user_account.history.order
      integerРасположение раздела в раскрывающемся меню в платежном интерфейсе.
      settings.ui.user_account.info
      objectСтраница Мой аккаунт.
      settings.ui.user_account.info.order
      integerРасположение раздела в раскрывающемся меню в платежном интерфейсе.
      settings.ui.user_account.info.enable
      booleanДолжен ли раздел отображаться в раскрывающемся меню в платежном интерфейсе. Может принимать значения true или false. Если параметр не передается, раздел будет отображаться.
      settings.ui.user_account.payment_accounts
      objectСтраница Мои платежные аккаунты.
      settings.ui.user_account.payment_accounts.order
      integerРасположение раздела в раскрывающемся меню в платежном интерфейсе.
      settings.ui.user_account.payment_accounts.enable
      booleanДолжен ли раздел отображаться в раскрывающемся меню в платежном интерфейсе. Может принимать значения true или false. Если параметр не передается, раздел будет отображаться.
      settings.ui.user_account.subscriptions
      objectСтраница Управление подписками.
      settings.ui.user_account.subscriptions.enable
      booleanДолжен ли раздел отображаться в раскрывающемся меню в платежном интерфейсе. Может принимать значения true или false. Если параметр не передается, раздел будет отображаться.
      settings.ui.user_account.subscriptions.order
      integerРасположение раздела в раскрывающемся меню в платежном интерфейсе.
      settings.currency
      stringПредпочтительная валюта платежа. Используется трехбуквенное обозначение валюты согласно стандарту ISO 4217.
      settings.external_id
      stringИдентификатор транзакции в игре. Должен быть уникальным для каждого платежа пользователя.
      settings.payment_method
      integerID способа оплаты. Список идентификаторов способов оплаты можно получить в Личном кабинете или с помощью метода API Список способов оплаты.
      settings.return_url
      stringПользователь будет перенаправлен на данную страницу после совершения платежа. Параметры user_id, foreigninvoice, invoice_id и status будут автоматически добавлены к ссылке.
      settings.redirect_policy
      objectНастройки политики редиректа (объект).
      settings.redirect_policy.redirect_conditions
      stringСтатус платежа, при котором пользователь перенаправляется на URL-адрес возврата после совершения платежа. Принимает значение none, successful, successful_or_canceled или any.
      settings.redirect_policy.delay
      integerЗадержка (в секундах), после которой пользователь автоматически перенаправляется на return URL.
      settings.redirect_policy.status_for_manual_redirection
      stringСтатус платежа, при котором пользователь перенаправляется на URL-адрес возврата после совершения платежа. Принимает значение none, successful, successful_or_canceled или any.
      settings.redirect_policy.redirect_button_caption
      stringТекст кнопки для ручного перенаправления.

      При необходимости передайте дополнительные параметры для кастомизации платежного интерфейса.

      Copy
      Full screen
      Small screen
        Пример запроса:
        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
                }
              },
              "license_url": "string",
              "mode": "user_account",
              "user_account": {
                "history": {
                  "enable": true,
                  "order": 1
                },
                "payment_accounts": {
                  "enable": true,
                  "order": 1
                },
                "info": {
                  "enable": true,
                  "order": 1
                },
                "subscriptions": {
                  "enable": true,
                  "order": 1
                }
              }
            },
            "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"
            }
          }
        }

        Copy
        Full screen
        Small screen
          Пример ответа:
          {
            "link_to_ps": "https://secure.xsolla.com/paystation2/?access_token=<access_token>"
          }

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

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

          Запрос к методу должен содержать заголовок 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, если в вашем приложении используется авторизация через социальные сети.

          В качестве path-параметра передайте project ID (обязательный) — ID проекта. Вы можете найти этот параметр в Личном кабинете рядом с названием проекта.

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

          При необходимости передайте дополнительные параметры для кастомизации платежного интерфейса.

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

          ПараметрТипОписание
          plan_external_id
          stringОбязательный. Внешний ID плана подписки. Вы можете найти этот параметр в Личном кабинете в разделе Подписки > Планы подписки.
          settings
          objectОбъект, содержащий настройки проекта.
          settings.ui
          objectОбъект с настройками интерфейса.
          settings.ui.size
          stringРазмер платежного интерфейса. В зависимости от требуемых размеров платежного интерфейса параметр может принимать следующие значения:
          • small: Наименьший размер платежного интерфейса. Используется в случаях, когда размеры окна строго ограничены (размер: 620 x 630 px).
          • medium: Рекомендуемый размер платежного интерфейса. Оптимален при открытии в lightbox (размер: 740 x 760 px).
          • large: Желательно открывать в новом окне/вкладке (размер: 820 x 840 px).
          settings.ui.theme
          stringВнешний вид интерфейса оплаты. Может принимать значения default (по умолчанию) или default_dark.
          settings.ui.version
          stringТип устройства. Может принимать значения desktop (по умолчанию) или mobile.
          settings.ui.desktop
          objectОбъект с данными настроек для desktop-версии.
          settings.ui.desktop.header
          objectОбъект с настройками header.
          settings.ui.desktop.header.close_button
          booleanПоказывать ли кнопку Закрыть в настольной версии платежного интерфейса. Нажатие на кнопку закрывает платежный интерфейс и перенаправляет пользователя на адрес, указанный в параметре settings.return_url. false по умолчанию.
          settings.ui.desktop.header.is_visible
          booleanДолжен ли хедер отображаться на странице оплаты.
          settings.ui.desktop.header.is_visible.type
          stringВнешний вид хедера. Может принимать значения compact (в этом случае название игры и ID пользователя не будут показываться в хедере) или normal.
          booleanЕсли значение true, то логотип будет отображаться в хедере. Для добавления логотипа отправьте его аккаунт-менеджеру проекта.
          settings.ui.desktop.header.visible_name
          booleanДолжно ли название игры отображаться в хедере.
          settings.ui.desktop.header.type
          stringВнешний вид хедера. Может принимать значения compact (в этом случае название игры и ID пользователя не будут показываться в хедере) или normal.
          settings.ui.mobile.mode
          stringПользователь может совершить платеж только через сохраненные способы оплаты. Принимает значение saved_accounts.
          booleanСкрывать или нет footer в мобильной версии платежного интерфейса.
          settings.ui.mobile.header.close_button
          booleanПоказывать ли кнопку Закрыть в мобильной версии платежного интерфейса. Нажатие на кнопку закрывает платежный интерфейс и перенаправляет пользователя на адрес, указанный в параметре settings.return_url. false по умолчанию.
          settings.ui.license_url
          stringСсылка на лицензионное соглашение.
          settings.ui.mode
          stringПлатежный интерфейс в режиме Личного кабинета. Принимает значение user_account. Хедер содержит только навигационное меню Личного кабинета; исключается возможность выбора предмета и оплата покупки; режим Личного кабинета доступен только в desktop-режиме.
          settings.ui.user_account
          objectОбъект с данными об аккаунте пользователя.
          settings.ui.user_account.history
          objectРаздел История.
          settings.ui.user_account.history.enable
          integerДолжен ли раздел отображаться в раскрывающемся меню в платежном интерфейсе. Может принимать значения true или false. Если параметр не передается, раздел будет отображаться.
          settings.ui.user_account.history.order
          integerРасположение раздела в раскрывающемся меню в платежном интерфейсе.
          settings.ui.user_account.info
          objectСтраница Мой аккаунт.
          settings.ui.user_account.info.order
          integerРасположение раздела в раскрывающемся меню в платежном интерфейсе.
          settings.ui.user_account.info.enable
          booleanДолжен ли раздел отображаться в раскрывающемся меню в платежном интерфейсе. Может принимать значения true или false. Если параметр не передается, раздел будет отображаться.
          settings.ui.user_account.payment_accounts
          objectСтраница Мои платежные аккаунты.
          settings.ui.user_account.payment_accounts.order
          integerРасположение раздела в раскрывающемся меню в платежном интерфейсе.
          settings.ui.user_account.payment_accounts.enable
          booleanДолжен ли раздел отображаться в раскрывающемся меню в платежном интерфейсе. Может принимать значения true или false. Если параметр не передается, раздел будет отображаться.
          settings.ui.user_account.subscriptions
          objectСтраница Управление подписками.
          settings.ui.user_account.subscriptions.enable
          booleanДолжен ли раздел отображаться в раскрывающемся меню в платежном интерфейсе. Может принимать значения true или false. Если параметр не передается, раздел будет отображаться.
          settings.ui.user_account.subscriptions.order
          integerРасположение раздела в раскрывающемся меню в платежном интерфейсе.
          settings.currency
          stringПредпочтительная валюта платежа. Используется трехбуквенное обозначение валюты согласно стандарту ISO 4217.
          settings.external_id
          stringИдентификатор транзакции в игре. Должен быть уникальным для каждого платежа пользователя.
          settings.payment_method
          integerID способа оплаты. Список идентификаторов способов оплаты можно получить в Личном кабинете или с помощью метода API Список способов оплаты.
          settings.return_url
          stringПользователь будет перенаправлен на данную страницу после совершения платежа. Параметры user_id, foreigninvoice, invoice_id и status будут автоматически добавлены к ссылке.
          settings.redirect_policy
          objectНастройки политики редиректа (объект).
          settings.redirect_policy.redirect_conditions
          stringСтатус платежа, при котором пользователь перенаправляется на URL-адрес возврата после совершения платежа. Принимает значение none, successful, successful_or_canceled или any.
          settings.redirect_policy.delay
          integerЗадержка (в секундах), после которой пользователь автоматически перенаправляется на return URL.
          settings.redirect_policy.status_for_manual_redirection
          stringСтатус платежа, при котором пользователь перенаправляется на URL-адрес возврата после совершения платежа. Принимает значение none, successful, successful_or_canceled или any.
          settings.redirect_policy.redirect_button_caption
          stringТекст кнопки для ручного перенаправления.

          При необходимости передайте дополнительные параметры для кастомизации платежного интерфейса.

          Copy
          Full screen
          Small screen
            Пример запроса:
            curl -X 'POST' \
            'https://subscriptions.xsolla.com​/api/user/v1/projects/{project_id}/subscriptions/manage?country=RU  ' \
              -H 'accept: application/json' \
              -H 'Authorization: Bearer client_user_jwt'
            {
              "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
                    }
                  },
                  "license_url": "string",
                  "mode": "user_account",
                  "user_account": {
                    "history": {
                      "enable": true,
                      "order": 1
                    },
                    "payment_accounts": {
                      "enable": true,
                      "order": 1
                    },
                    "info": {
                      "enable": true,
                      "order": 1
                    },
                    "subscriptions": {
                      "enable": true,
                      "order": 1
                    }
                  }
                },
                "currency": "str",
                "locale": "st",
                "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"
                }
              }
            }

            Copy
            Full screen
            Small screen
              Пример ответа:
              {
                "link_to_ps": "https://secure.xsolla.com/paystation2/?access_token=<access_token>"
              }

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

              Кастомизация

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

              Пример платежного интерфейса в темной теме:

              Пример запроса на получение токена для темной темы:

              Copy
              Full screen
              Small screen
              Пример запроса:
              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"
                  "ui": {
                     "theme": "default_dark"
                  }
                }
              }
              '

              • Разместить собственное описание раздела планов. Для этого передайте текст описания в метод Создание токена в параметре ui.desktop.subscription_list.description.
              Внимание
              Данный тип кастомизации недоступен при реализации клиентских методов.

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

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

              Copy
              Full screen
              Small screen
              Пример запроса:
              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",
                  "ui": {
                     "desktop": {
                       "subscription_list": {
                         "description": "Your Description"
                       }
                     },
                      "user_account": {
                        "subscriptions": {
                            "order": 1,
                            "enable": true
                        }
                      }
                    }
                  }
              }
              '

              • Изменить стандартное отображение списка подписок на альтернативное в виде блоков. Для этого передайте в метод Создание токена параметр settings.ui.desktop.subscription_list.layout = grid. По умолчанию параметр принимает значение list.
              Внимание
              Данный тип кастомизации недоступен при реализации клиентских методов.

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

              Пример запроса на получение токена для альтернативного отображения списка подписок:

              Copy
              Full screen
              Small screen
                Пример запроса:
                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": 111111,
                    "currency": "USD",
                    "ui": {
                       "desktop": {
                         "subscription_list": {
                           "layout": "grid"
                         }
                       }
                    }
                  }
                }
                '

                Больше информации о кастомизации и используемых для этого параметрах вы можете прочитать в инструкции Как кастомизировать платежный интерфейс.

                С помощью Pay Station Embed

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

                Copy
                Full screen
                Small screen
                <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://static.xsolla.com/embed/paystation/1.0.7/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 события платежного интерфейса, которые вы можете отправлять в систему аналитики. Чтобы узнать, как настроить обработку событий в вашей системе аналитики, обратитесь к аккаунт-менеджеру проекта или напишите на адрес am@xsolla.com.

                Команда Иксоллы создала виджет для упрощения интеграции платежного интерфейса на вашем сайте. Скрипт виджета доступен в нашем проекте на GitHub.

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

                ПараметрТипОписание
                access_token
                stringТокен, полученный по API. Обязательный.
                sandbox
                booleanПередайте true для тестирования. Будет использоваться URL sandbox-secure.xsolla.com вместо secure.xsolla.com.
                lightbox
                objectОбъект со списком настроек, доступных в случае открытия в lightbox (для полноэкранной версии).
                lightbox.width
                stringВысота lightbox. Значение по умолчанию null. Если установлено значение null, высота lightbox соответствует высоте платежного интерфейса.
                lightbox.height
                stringВысота lightbox. Значение по умолчанию 100%. Если установлено значение null, высота lightbox соответствует высоте платежного интерфейса.
                lightbox.zIndex
                integerСвойство, отвечающее за положение объекта, по умолчанию 1000.
                lightbox.overlayOpacity
                integerНепрозрачность верхнего слоя (от 0 до 1), по умолчанию .6.
                lightbox.overlayBackground
                stringФон для верхнего слоя, по умолчанию #000000.
                lightbox.modal
                booleanЕсли установлено значение true, lightbox нельзя закрыть. По умолчанию false.
                lightbox.closeByClick
                booleanЕсли установлено значение true, lightbox закрывается при нажатии на верхний слой. По умолчанию true.
                lightbox.closeByKeyboard
                booleanЕсли установлено значение true, lightbox закрывается при нажатии ESC. По умолчанию true.
                lightbox.contentBackground
                stringФон фрейма, по умолчанию #ffffff. Обратите внимание, что настройка влияет только на фон фрейма lightbox и не меняет фон окна платежного интерфейса.
                lightbox.contentMargin
                stringОтступ вокруг фрейма, по умолчанию 10px.
                lightbox.spinner
                stringТип прелоадера, может принимать значение xsolla или round, по умолчанию xsolla.
                lightbox.spinnerColor
                stringЦвет прелоадера.
                childWindow
                objectНастройки дочернего окна, в котором открывается платежный интерфейс. Работает для мобильной версии.
                childWindow.target
                stringСвойство, определяющее, где должно быть открыто дочернее окно, может принимать значения _blank, _self, _parent, по умолчанию _blank.

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

                Список событий:

                ПараметрОписание
                initИнициализация виджета.
                openОткрытие виджета.
                loadСобытие после загрузки платежного интерфейса.
                closeСобытие после закрытия платежного интерфейса.
                statusСобытие, когда пользователь попадает на страницу статуса.
                status-invoiceСобытие, когда пользователь попадает на страницу статуса, но платеж еще не завершен.
                status-deliveringСобытие, когда пользователь попадает на страницу статуса, платеж завершен, мы прислали оповещение о платеже.
                status-doneСобытие, когда пользователь попадает на страницу статуса, платеж успешно зачислен.
                status-troubledСобытие, когда пользователь попадает на страницу статуса, но платеж не прошел.

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

                Примечание
                Для открытия платежного интерфейса необходимо использовать ссылку с префиксом https://.

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

                Внимание
                Параметр access_token содержит приватную информацию о пользователе. Убедитесь, что вы получаете этот параметр только при server-server взаимодействии.

                В Iframe

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

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

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

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

                В новом окне

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

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

                Прогресс интеграции
                Спасибо за обратную связь!
                Последнее обновление: 13 октября 2022

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

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