youverify-web-sdk v2.1.0

Youverify Web SDK

Browser wrapper for Youverify's vForm

Table of Contents

• Features
• Installation
• Modules
  • vForm
  • Liveness Check
  • Document Capture
• Supported countries for document capture

Features

Installation

Using npm:

$ npm install youverify-web-sdk

Using yarn:

$ yarn add youverify-web-sdk

Using CDN:

Modules

vForm

The vForm module is available for integration to your web app if you wish to use vForm

Usage

Initialization:

1. To use the vForm module in your project, you have to first pass your custom options to it like so:

const vFormModule = new YouverifySDK.vForm(options)

Checkout a list of the valid options for the vForm module

Example:

const vFormModule = new YouverifySDK.vForm({
	vFormId: `Id of vForm`,
	publicMerchantKey: `<YOUR PUBLIC MERCHANT KEY>`,

// true if environment is in development mode. Default to false
  dev: false,
  // true if environment is in sandbox mode. Default to false
  sandboxEnvironment: false,
  personalInformation: {
      firstName: "John", 
      lastName: "Doe",
      middleName: "Bruno", // optional
      email: "john@doe.co", // optional
      mobile: "+2348*********", // optional
      gender: "MALE", // optional [MALE, FEMALE]
 },

  //Customize your form using prefered greeting texts and colours(This is Optional)
  appearance:{
    greeting:'We will need to verify your identity. It will only take a moment.', 
    actionText:'Verify Identity',
    buttonBackgroundColor:'#46B2C8',
    buttonTextColor:'#fffff',
    primaryColor:'#46B2C8'
  },
  
metadata: {},
  
  
onSuccess: () => {
		// vForm has submitted successfully
},
  
  
onClose: () => {
		// close button was clicked
},
  
});

2. Call initialize on the vFormModule object

try {
	vFormModule.initialize();
} catch (error) {
	// handle validation error
}

Start Process

3. Call start() on the vFormModule object to show the pop-up modal and start the process.

vFormModule.start();

vForm Options

These are the valid options to pass to the vFormModule instance

{
  // `vFormId` is the Id of the vForm you would like the SDK to open
  "vFormId": "<YOUR-VFORM-ID>", // required

  // `publicMerchantKey` is available in your YVOS profile
  "publicMerchantKey": "<YOUR-PUBLIC-MERCHANT-KEY>", // required

   // true if environment is in development mode. Default to false
   dev: false,

  // `personalInformation` is an object containing a list of predefined user attributes to be passed to the SDK for personalization of the experience. Attributes passed here should typically exist in the vForm created, else, they will be ignored.
  "personalInformation": {
    "firstName": "John", // optional
    "lastName": "Doe", // optional
    "middleName": "Bruno", // optional
    "email": "john@doe.co", // optional
    "mobile": "+2348*********", // optional
    "gender": "MALE", // optional [MALE, FEMALE]
  },

  //Customize your form using prefered greeting texts and colours(This is Optional)
  appearance:{
    greeting:'We will need to verify your identity. It will only take a moment.',
         actionText:'Verify Identity',
         buttonBackgroundColor:'#46B2C8',
         buttonTextColor:'#fffff',
         primaryColor:'#46B2C8'
  },

  // `metadata` is any other information you would like to pass to your webhook URL
  "metadata": { // optional
    // your custom keys
  },
  
  // `onSuccess` callback is a function called onced the vForm entry has been submitted successfully
  "onSuccess": (data) => { // optional
    // custom logic here
  }
  
  // `onClose` callback is a function called onced the vForm process has been cancelled or modal closed
  "onClose": () => { // optional
    // custom logic here
  }
}

Note: Once the vForm process is completed and successfull, the onSuccess callback supplied will be triggered. If none was supplied, nothing happens.

Liveness Check

The Liveness Check module is available for integration to your web app if you wish to allow your users perform liveness checks.

Usage

Initialization:

1. To use the liveness module in your project, you have to first pass your custom options to it like so:

const livenessCheckModule = new YouverifySDK.liveness(options)

Checkout a list of the valid options for the liveness check module

Example:

const livenessCheckModule = new YouverifySDK.liveness({
	publicMerchantKey: `<YOUR PUBLIC MERCHANT KEY>`,

  // true if environment is in development mode. Default to false
  dev: false,
  
personalInformation: {
      firstName: "John",
      lastName: "Doe",
},
  //Customize your form using prefered greeting texts and colours(This is Optional)
  appearance:{
    greeting:'We will need to perform a liveness test. It will only take a moment.',
    actionText:'Perform liveness test',
    buttonBackgroundColor:'#46B2C8',
    buttonTextColor:'#fffff',
    primaryColor:'#46B2C8'
  },
  
onSuccess: () => {
		// liveness check was successful
},
onFailure: () => {
		// liveness check was not successful
},
  // `onClose` callback is a function called onced the liveness check process modal has been closed
onClose: () => { // optional
    // custom logic here
  }

});

2. Call initialize on the livenessCheckModule object

try {
	livenessCheckModule.initialize();
} catch (error) {
	// handle validation error
}

Start Process

3. Call start() on the livenessCheckModule object to show the pop-up modal and start the process.

livenessCheckModule.start();

Liveness Check Options

These are the valid options to pass to the livenessCheckModule instance

{
  // `publicMerchantKey` is available in your YVOS profile
  "publicMerchantKey": "<YOUR-PUBLIC-MERCHANT-KEY>", // required

 // true if environment is in development mode. Default to false
 dev: false,
          
          
  // `personalInformation` is an object containing a list of predefined user attributes to be passed to the SDK for personalization of the experience
  "personalInformation": {
    "firstName": "John", // optional
    "lastName": "Doe", // optional
  },
  //Customize your form using prefered greeting texts and colours(This is Optional)
  appearance:{
    greeting:'We will need to perform a liveness test. It will only take a moment.',
       actionText:'Perform Liveness Test',
       buttonBackgroundColor:'#46B2C8',
       buttonTextColor:'#fffff',
       primaryColor:'#46B2C8'
  },
  // `metadata` is any other information you would like to pass to your webhook URL
  "metadata": { // optional
    // your custom keys
  },

  // `onCompleted` callback is a function called onced the liveness check was successful
  "onSuccess": () => { // optional
    // custom logic here
  }
  
  // `onFailure` callback is a function called onced the liveness check fails
  "onFailure": (error) => { // optional
    // custom logic here
  }

  // `onClose` callback is a function called onced the liveness check process modal has been closed
  "onClose": () => { // optional
    // custom logic here
  }
}

Note: Once the liveness process is completed and successfull, the onSuccess callback supplied will be triggered. If none was supplied, nothing happens.

Document Capture

The Document Capture module is available for integration to your web app if you wish to allow your users carry out identity documents capture.

Usage

Initialization:

1. To use the document capture module in your project, you have to first pass your custom options to it like so:

const documentCaptureModule = new YouverifySDK.documentCapture(options)

Checkout a list of the valid options for the document capture module

Example:

const documentCaptureModule = new YouverifySDK.documentCapture({
  
publicMerchantKey: `<YOUR PUBLIC MERCHANT KEY>`,
  
  personalInformation: {
    firstName: "John",
    
  },
  //Customize your form using prefered greeting texts and colours(This is Optional)
  appearance:{
    greeting:'We will need to capture your document. It will only take a moment.',
    actionText:'Capture Document',
    buttonBackgroundColor:'#46B2C8',
    buttonTextColor:'#fffff',
    primaryColor:'#46B2C8'
  },

  // true if environment is in development mode. Default to false
  dev: false,
  
 countries:[
    {
      //pass country code you want the document to be capture for. (optional)
      countryCode:'ng',
      
      //list of document types you want in the country. (optional)
      idTypes:[
        "passport",
        "Residence Permit",
        "Driving License",

        "NIN"
      ],
      // pass the province in the country you entered above. (optional) leave blank if country does not have a province
      province:['Alberta'],
    },
    {
      countryCode:'CA',
      idTypes:[
        "passport",
        "Residence Permit",
        "Driving License",
        "Driver License/Public Services Card (Combined)",
        " Citizenship   Certificate ",
        'nin',

      ],
      province:[' Alberta ','Quebec'],
    }
  ],
 
  //for list of supported countries,province and document types see above
  
onSuccess: () => {
		// result received from document
},
onFailure: () => {
		// could not get result from document
},
onClose: () => { // optional
    // custom logic here
  }
});

2. Call initialize on the documentCaptureModule object

try {
	documentCaptureModule.initialize();
} catch (error) {
	// handle validation error
}

Start Process

3. Call start() on the documentCaptureModule object to show the pop-up modal and start the process.

documentCaptureModule.start();

Document Capture Options

These are the valid options to pass to the documentCaptureModule instance

{
  // `publicMerchantKey` is available in your YVOS profile
  "publicMerchantKey": "<YOUR-PUBLIC-MERCHANT-KEY>", // required

   // true if environment is in development mode. Default to false
   dev: false,

  // `personalInformation` is an object containing a list of predefined user attributes to be passed to the SDK for personalization of the experience
  "personalInformation": {
    "firstName": "John", // optional
  },
  //Customize your form using prefered greeting texts and colours(This is Optional)
  appearance:{
    greeting:'We will need to capture your document. It will only take a moment.',
            actionText:'Capture Document',
            buttonBackgroundColor:'#46B2C8',
            buttonTextColor:'#fffff',
            primaryColor:'#46B2C8'
  },
countries[
  {
    //pass country code you want the document to be capture for. (optional)
    countryCode:'ng',

            //list of document types you want in the country. (optional)
    idTypes:[
    "passport",
    "Residence Permit",
    "Driving Licence",

    "NIN"
  ],
          // pass the province in the country you entered above. (optional) leave blank if country does not have a province
    province:['Alberta'],
  },
  {
    countryCode:'CA',
    idTypes:[
    "passport",
    "Residence Permit",
    "Driving License",
    "Driver License/Public Services Card (Combined)",
    " Citizenship   Certificate ",
    'nin',

  ],
   province:[' Alberta ','Quebec'],
  }
]
  // `metadata` is any other information you would like to pass to your webhook URL
  "metadata": { // optional
    // your custom keys
  },

  // `onSuccess` callback is a function called onced the document capture has a result
  "onSuccess": (data) => { // optional
    // data will contain the following
    /* {
      documentNumber: "xyz",
      firstName: "John",
      lastName: "Doe",
      fullName: "John Doe",
      dateOfBirth: "29-01-2022",
      dateOfExpiry: "29-01-2022",
      gender: "M",
      rawMRZString: "*****...",
      fullDocumentFrontImage: "", // base64 image of the document's front
      fullDocumentBackImage: "", // base64 image of the document's back
      fullDocumentImage: "", // base64 image of the document's front. Exists when there's no back image to be captured
    }*/
    // custom logic here
  }

  "onFailure": (error) => {
    console.log(error);
  },

  // `onClose` callback is a function called onced the document capture modal has been closed
  "onClose": () => { // optional
    // custom logic here
  }
}

Note: Once the document capture process is completed and successfull, the onSuccess callback supplied will be triggered. If none was supplied, nothing happens.

Supported Countries for document capture:

//The table below is the list of countries, document types and provinces if available

CloseSDKModal:

Credits

This SDK is developed and maintained solely by Youverify

License

MIT License