Сбор клиентских данных¶

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

Сбор и отправка данных выполняются через fingerprint API — сервис для сбора данных о клиенте.

Использование fingerprint API¶

1. Загрузите на страницу с платёжной формой вашего интернет-магазина скрипт, размещённый по ссылке https://fp.qiwi.com/static/fp.js:

   <script type="text/javascript" src="https://fp.qiwi.com/static/fp.js"></script>
   

   Обратите внимание

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

   flowchart TD
       ext("Внешний сайт") -- "Перенаправление клиента для оплаты заказа" --> site
       subgraph site [Сайт партнёра]
       Page1("Страница 1\nВыбор способа оплаты\nИнтеграция Fingerprint API") --> Page2("Страница 2\nВвод платёжных реквизитов\nИнтеграция Fingerprint API")
       Page2 --> Page3("Страница 3\nВвод дополнительной информации о заказе\nИнтеграция Fingerprint API")
       Page3 --> Page4("Финальная страница оплаты\nПодтверждение оплаты\nИнтеграция Fingerprint API")
       end

2. После перенаправления клиента на платёжную форму партнёра или при выполнении запроса на создание платежа, вызовите функцию для отправки данных window.initUserFingerprint():

   window.initUserFingerprint(params?: Object{ [key]: string }, callback?: Function): Promise<void>
   

   Где:

   • params — объект, в котором можно передать дополнительные параметры в сервис. Глубокие структуры со вложенными объектами не допускаются.
   • callback — функция, которая вызывается после отправки данных. Здесь можно разместить логику с последующим переходом на страницу оплаты, так как переход должен происходить после того, как скрипт собрал и отправил данные.

Примеры вызова функции см. ниже.

window.initUserFingerprint(
  { param: 'example', param2: 'example2'},
  () => {
    // Здесь определяются действия после отправки данных сервису.
    // Например, редирект на страницу оплаты.
    window.location.href = 'https://oplata.example.com/payment/...'
    // Или вызов платёжного метода.
    pay();
  }
)

window.initUserFingerprint().then(() => {
  // Здесь определяются действия после отправки данных сервису.
  // Например, редирект на страницу оплаты.
  window.location.href = 'https://oplata-test.example.com/payment...'
})

Проверка успешности сбора данных¶

После отправки клиентских данных в сервис выполните запрос:

GET /api/v1/fingerprint/checkIntegration HTTP/1.1
Host: fp.qiwi.com

Возможные ответы сервиса:

• HTTP-статус 204 — интеграция выполнена успешно.
• HTTP-статус 400 или иной — получена ошибка при интеграции.

Пример интеграции¶

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

function loadUserFingerprintScript(host) {
  return new Promise((resolve, reject) => {
    let attempt = 0;
    const maxAttempts = 3;
    const timeout = 500;
    const maxTimeout = 3000;

    function loadScript() {
      const script = document.createElement('script');
      script.src = `${host}/static/fp.js`;
      script.defer = true;
      script.addEventListener('load', () => {
        resolve();
      })
      // При ошибке скрипт сделает еще несколько попыток загрузиться.
      script.addEventListener('error', () => {
        if (attempt > maxAttempts) {
          reject();
          return;
        }

        let calculatedTimeout = timeout * 2**attempt;
        const resultTimeout = calculatedTimeout > maxTimeout ? maxTimeout : calculatedTimeout

        attempt += 1

        setTimeout(() => {
          loadScript()
        }, resultTimeout)
      })

      document.body.appendChild(script)
      return script;
    }

    loadScript()
  })
}

// Вызов инициализации.
function initUserFingerprint() {
  return window.initUserFingerprint()
}

loadUserFingerprintScript('https://fp.qiwi.com').then(initUserFingerprint)