vForm Web SDK

Browser wrapper for Youverify's vForm

Table of Contents

• Features
• Installation
• Usage
• Options

Features

Installation

Using npm:

$ npm install vform-sdk

Using yarn:

$ yarn add vform-sdk

Using CDN:

Usage

Initialization:

1. To use the vForm SDK in your project, you have to first pass your custom options to it.

const vFormSDK = new vFormSDK(options)

Checkout a list of the valid options

Example:

const vFormSDK = new vFormSDK({
  vFormId: `Id of vForm`,
  publicMerchantKey: `<YOUR PUBLIC MERCHANT KEY>`,
  personalInformation: {
    firstName: "John",
    lastName: "Doe",
  },
  metadata: {},
  onSuccess: () => {
    // vForm has submitted successfully
  },
  onClose: () => {
    // close button was clicked
  },
})

2. Call initialize on the vFormSDK object

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

Start Process

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

vFormSDK.start()

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

Options

These are the valid options to pass to the vFormSDK 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

  // `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": "[email protected]", // optional
    "mobile": "+2348*********", // optional
    "gender": "MALE", // optional [MALE, FEMALE or NOT_IDENTIFIED]
  },

  // `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 vForm entry has been submitted and process completed successfully
  "onCompleted": () => { // optional
    // custom logic here
  }

  // `onSuccess` callback is a function called onced the vForm entry has been submitted successfully
  "onSuccess": (data) => { // optional
    // custom logic here
  }

  // `onFailed` callback is a function called onced the vForm entry submission fails due to some reasons
  "onFailed": (error) => { // 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
  }
}

Credits

This SDK is developed and maintained solely by Youverify

License

MIT License