KYB UI Component

KYB is one of the steps required to onboard buyers onto your application. Weavr provides a KYB component that you can embed in your application. This lets you provide a seamless experience to your user while capturing the required documentation to verify the buyer.

info

Buyers need to be onboarded and authenticated on the Weavr platform. You can find more information on how to onboard your Buyer customers here.

1. Get the KYB reference

Initiate the KYB process by invoking the following API from your application. This action will generate a KYB reference that you can utilize when making a call to the corporateKyb component to display the KYB flow.

POST/buyers/kybTry it

2. Using the KYB Component

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.

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.

corporateKyb(referenceId);

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

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

// secure-kyb.js
weavrComponents.capture.corporateKyb(referenceId);

Mounting

// secure-kyb.js
const kyb = weavrComponents.capture.corporateKyb(referenceId);
kyb.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 KYB 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 KYB Once the consumer has submitted all documentation you will receive a `kybSubmitted` message
`onError`	function	Optional	Handle errors

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

// secure-kyb.js

const referenceId = "{{ Reference ID }}";

const kyb = weavrComponents.capture.corporateKyb(referenceId);

kyb.mount("#kyb-example", {
  // String specifying the language the KYB 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 KYB flow (optional)
  customCssStr: "{{customCssStr}}",

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

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

  // Handle errors
  // (optional)
  onError: function (message) {
    console.log("Weavr KYB 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 KYB component.

`mount`

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

kyb.mount(selector);

Events

The KYB 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. One of the error messages thrown is `MICRO_ENTERPRISE_NOT_SUPPORTED`, indicating that Micro Enterprises are not supported.

1. Get the KYB reference​

2. Using the KYB Component​

Mounting​

Property Definitions​

options​

API functions​

mount​

Events​