Collecting Customer Data¶

To reduce the risk of invalid and fraudulent transactions, as well as to monitor the compliance of the partner activities specified by him when concluding the contract, the payment service needs to receive certain client data from the partner’s interface. This data includes a unique browser identifier, page URL, client ID, and other information. The partner must send data from each page that the customer goes to during the payment process.

Data collection and sending are performed through the fingerprint API service.

Using fingerprint API¶

1. Load the script from https://fp.qiwi.com/static/fp.js address onto the your site’s page with payment form:

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

   Please Note

   If, during the payment process on your website, the client goes through a path consisting of several pages, the script must be loaded onto all such pages. For an example, see the diagram below.

   flowchart TD
       ext("External web-site") -- "Redirecting the client for the order payment" --> site
       subgraph site [Partner site]
       Page1("Page 1\nSelecting the payment method\nFingerprint API integration") --> Page2("Page 2\nEntering payment details\nFingerprint API integration")
       Page2 --> Page3("Page 3\nEntering additional order info\nFingerprint API integration")
       Page3 --> Page4("Final page for the payment\nConfirming the payment\nFingerprint API integration")
       end

2. After client redirection to the partner’s payment form or on performing the payment request, call the function window.initUserFingerprint() to send customer data:

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

   Where:

   • params — object with additional parameters for the service. Deep structures with nested objects are not allowed.
   • callback — callback function, where the logic of the following payment page transition can be placed, as the transition should happen after collecting the client data.

Examples of the function calling are given below.

window.initUserFingerprint(
  { param: 'example', param2: 'example2'},
  () => {
    // Here actions are defined after sending data to the service.
    // For example, a redirect to the payment page.
    window.location.href = 'https://oplata.example.com/payment/...'
    // Or the payment method call.
    pay();
  }
)

window.initUserFingerprint().then(() => {
  // Here actions are defined after sending data to the service.
  // For example, a redirect to the payment page.
  window.location.href = 'https://oplata-test.example.com/payment...'
})

Checking the Data Collection¶

After sending the client data to the service, make the following request:

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

Possible responses:

• HTTP status 204 means that integration was sucessful.
• HTTP status 400 or other means that the integration error is received.

Integration Example¶

Example of a complete integration of the fingerprint API service is given below:

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();
      })
      // On getting the error, the script makes several attempts to load.
      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()
  })
}

// Calling the script initialization.
function initUserFingerprint() {
  return window.initUserFingerprint()
}

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