Director KYC UI Component

During the KYB process, the system asks the user to enter information about UBOs and directors/representatives. Weavr will 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 will include a link that leads to a page in your application where you must embed the Director KYC UI component. The URL will also include a reference that is required to initialise 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 will serve 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 the Weavr 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 will serve 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 customise 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 will 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 will 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 will trigger the following events. You can listen to these events by attaching event listeners.

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