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

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>