Director KYC UI component

During the KYB process, the system asks the user to enter information about UBOs and directors/representatives. We send emails directly to the directors/representatives named during the KYB process so that they can submit their KYC documentation. A buyer must have at least 1 director or representative verified as part of the due diligence.

The content of the emails received by the directors/representatives includes a link that leads to a page in your application where you must embed the Director KYC UI component. The URL also includes a reference that is required to initialize the component.

Display the Director KYC Flow

To display the director KYC flow on the screen, it's necessary to mount it to the DOM. This involves creating a wrapping element that serves as the container for injecting the secure frame. Be sure to assign an id to the HTML element.

tip

To use Weavr UI components, you must first set up our UI library in your application and ensure that you have an authentication token set as per instruction.

beneficiariesKyc(referenceId);

Parameter	Type	Required?	Description
`referenceId`	string	Required	The reference key retrieved from the previous API call.

<!--kyc.html-->
<div id="kyc-example"></div>

// secure-kyc.js
weavrComponents.capture.beneficiariesKyc(referenceId);

Mounting

To display the component on the screen, it's necessary to mount it to the DOM. This involves creating a wrapping element that serves as the container for injecting the secure frame. Be sure to assign an id to the HTML element.

// secure-kyc.js
const kyc = weavrComponents.capture.beneficiariesKyc(referenceId);
kyc.mount(selector, options);

Parameter	Type	Required?	Description
`selector`	string	Required	The id of the element that will be used to mount to.
`options`	object	Required	Used to customize the flow and any styles available .

Property Definitions

`options`

Property	Type	Required?	Description
`lang`	string	Optional	Specifying the language the KYC flow is be displayed in (ISO 639-1 format) (defaults to english)
`customCss`	string	Optional	Specify a CSS file containing styles to brand the UI elements shown in the flow.
`customCssStr`	string	Optional	Specify a string of plain text styles to brand the UI elements shown in the flow.
`email`	string	Optional	Specifying the applicant email.
`mobile`	string	Optional	Specifying the applicant mobile.
`onMessage`	function	Optional	Receive updates on the status of the KYC Once the consumer has submitted all documentation you receive a `kycSubmitted` message
`onError`	function	Optional	Handle errors

<!--kyc.html-->
<div id="kyc-example"></div>

const referenceId = `{{ Reference ID }}`;
const beneficiariesKyc = weavrComponents.capture
  .beneficiariesKyc(referenceId)
  .mount("#kyc-example", {
    // String specifying the language the KYC flow is be displayed in (ISO 639-1 format) (optional, defaults to english)
    lang: "en",

    // String specifying the applicant email (optional)
    email: "",

    // String specifying the applicant email (optional)
    mobile: "",

    // Specify a string of plain text styles to brand the UI elements shown in the KYC flow (optional)
    customCssStr: `{{customCssStr}}`,

    // Specify a CSS file containing styles to brand the UI elements shown in the KYC flow (optional)
    customCss: `{{customCss}}`,

    // Receive updates on the status of the KYC
    // Once the consumer has submitted all documentation you receive a `kycSubmitted` message
    // (optional)
    onMessage: function (message, additionalInfo) {
      console.log("Weavr KYC UI Component message: ", message, additionalInfo);
    },

    // Handle errors
    // (optional)
    onError: function (message) {
      console.log("Weavr KYC UI Component error: ", message);
    },
  });

API functions

You can interact with the library's components by utilizing the exposed functions. The below is a list of functions exposed for the KYC component.

`mount`

The mount function is called in order to mount a component into the defined selector.

beneficiariesKyc.mount(selector);

Events

The KYC component triggers the following events. You can listen to these events by attaching event listeners.

Event	Trigger condition
`ready`	On component successfully initialization.
`change`	When component's state changes.
`error`	An error in the API will fire this.

Display the Director KYC Flow​

Mounting​

Property Definitions​

options​

API functions​

mount​

Events​