Skip to main content

KYC UI Component

KYC due diligence is one of the steps required to onboard consumers onto your application. Weavr provides a KYC 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 their identity.

1 Get the KYC Reference​

POST/consumers/kycTry it

2. Display the KYC Flow​

tip

To use Weavr UI components, you must first set up the Weavr UI library in your application.

<!-- Define an HTML container where the KYC flow is to be shown -->
<div id="kyc_consumer-container"></div>

<script type="text/javascript">

  // Initialise the UI library using your ui_key. Replace {{ui_key}} with your own UI key.
  window.OpcUxSecureClient.init('{{ui_key}}');

  // Set the user's authentication token
  window.OpcUxSecureClient.associate('Bearer {{user_authentication_token}}',
    function() {
      console.log('associate success');

      // Initialise the KYC UI component
      window.OpcUxSecureClient.consumer_kyc().init({

        // The selector identifying the container where you want to display the component
        selector: "#kyc_consumer-container",

        //The KYC reference returned in the previous step
        reference: {{reference}},

        // Specify the language, in ISO 639-1 format, that will be used in the
        // KYC flow. If no translation is available for the language specified, the
        // text will be shown in English.
        lang: {{language}} ,

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

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

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

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