Skip to main content

KYC (Web SDK)

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>