Skip to main content

Quick start

Installation​

Install using your preferred package manager:

npm install @microblink/platform-sdk

Integration​

React​

Here's an example React integration. The IdvFlow component takes in some configuration values from the apiConfig prop, collects user's consent data, and makes a network call.

This example integration simply logs to the console any results of this interaction.

import React from 'react';
import { createRoot } from 'react-dom/client';
import { IdvFlow } from '@microblink/platform-sdk/react';

const root = createRoot(document.getElementById('root'));
root.render(
  <IdvFlow
    apiConfig={{
      url: 'URL of your proxy service',
      workflowId: 'ID of the workflow to use'
    }}
    consentData={{
      userId: 'unique user ID',
      note: 'optional note',
      givenOn: new Date().toISOString(),
      isTrainingAllowed: true,
      isProcessingStoringAllowed: true,
    }}
    onTransactionFinished={(result) => {
      console.log('Transaction ID: ', result.transactionId);
      console.log('Transaction verification status: ', result.status);
    }}
    onAbort={() => {
      console.log('User aborted Transaction flow');
    }}
  />
);

Vanilla Javascript​

An equivalent integration in vanilla JS looks like this. One big difference is that the vanilla version will remove the component from the DOM when the flow is finished or aborted, and if needed again, the same function needs to be called again.

import { createIdvFlow } from '@microblink/platform-sdk/vanilla';

const flow = createIdvFlow(
  {
    apiConfig: {
      url: 'URL of your proxy service',
      workflowId: 'ID of the workflow to use'
    },
    consentData: {
      userId: 'unique user ID',
      note: 'optional note',
      givenOn: new Date().toISOString(),
      isTrainingAllowed: true,
      isProcessingStoringAllowed: true,
    },
    onTransactionFinished: (result) => {
      console.log('Transaction ID: ', result.transactionId);
      console.log('Transaction verification status: ', result.status);
    },
    onAbort: () => {
      console.log('User aborted Transaction flow');
    },
    target: document.getElementById('idv-flow-div'), // Optional
  }
);

export default flow;

Hosting resources​

The web SDK uses Web Workers to run visual recognition and extraction code. The SDK uses a Web Assembly binary file for that, and expects to find it in a pre-determined location: by default, /resources, on the same domain where it is running.

You can also manually specify where these resources are1 by using the resourcesPath parameter in IdvFlowProps.

The resources in question can be found in node_modules/@microblink/platform-sdk/dist/resources. After installing, the easiest way to run it would be to copy that entire directory to the root of your public (routable) directory:

cp -r node_modules/@microblink/platform-sdk/dist/resources your_app/public/

Alternatively, you can set up automatic copying of the resources whenever you run your build script for your app. The example apps on our GitHub show how it is done when using Vite as the bundler.

Footnotes​

  1. Even if you change the path from the default one, browsers specifically prevent cross-origin resource sharing unless specific headers are satisfied, which means that, by default, you won't be able to use resources hosted on another domain (for example, a CDN). You could make it work by modifying headers (both on the client and (resources) server), but the most reliable way would be to keep the resources on the same domain. ↩

Last updated on