Web SDK Integration
The Prembly Web SDK allows you to launch secure identity verification flows directly inside web browsers. It is compatible with all modern frameworks including Vue, Angular, React, Svelte, Next.js, and plain HTML.
Web Integration Paths
| Integration | Best For | Package / Source |
|---|---|---|
| Hosted Vanilla JS Widget | Plain HTML, Vue, Angular, Svelte, PHP, React | https://js.prembly.com/v1/inline/widget.js |
| React Package | React & Next.js applications preferring a hook | prembly-react-kyc |
1. Vanilla JavaScript Implementation
Add the hosted widget script tag to your web page, then invoke IdentityKYC.verify() inside a button click handler or form submission event.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KYC Integration Demo</title>
<link rel="stylesheet" href="https://js.prembly.com/style.css">
</head>
<body>
<button onclick="verifyKYC()" class="btn btn-purple px-4 py-3">
Verify Identity
</button>
<div id="success-message" style="display: none;">
Verification completed successfully!
</div>
<!-- Prembly Hosted Web Script -->
<script src="https://js.prembly.com/v1/inline/widget.js"></script>
<script>
function verifyKYC() {
IdentityKYC.verify({
merchant_key: 'your_public_merchant_key_here',
config_id: 'your_widget_config_id_here',
first_name: 'Jane',
last_name: 'Doe',
email: 'jane@example.com',
user_ref: 'usr_9921',
is_test: true,
callback: function (response) {
console.log('Prembly verification response:', response);
if (response.status === 'success') {
document.getElementById('success-message').style.display = 'block';
return;
}
alert(response.message || 'Verification was not completed.');
}
});
}
</script>
</body>
</html>Framework Note (Vue, Angular, Svelte)
Load the script once in your document head or index template, then call window.IdentityKYC.verify({...}) inside your framework component methods or router actions.
2. React Package Implementation (prembly-react-kyc)
Use the prembly-react-kyc package when building React or Next.js web applications that prefer a hook-based API (useIdentityPayKYC).
Installation
npm install prembly-react-kyc --save
# or
yarn add prembly-react-kycBasic Component Example
import React from 'react';
import useIdentityPayKYC from 'prembly-react-kyc';
const VerificationButton = () => {
const config = {
first_name: 'John',
last_name: 'Doe',
email: 'john@example.com',
phone: '+2348012345678',
widget_key: 'your_widget_key_here',
widget_id: 'your_widget_id_here',
metadata: {
transaction_id: 'txn_123456',
user_id: 'usr_789'
},
callback: (response) => {
console.log('Verification result:', response);
if (response.status === 'success') {
alert('Verification completed!');
}
}
};
const verifyWithIdentity = useIdentityPayKYC(config);
return (
<button onClick={verifyWithIdentity} className="px-6 py-3 bg-blue-600 text-white rounded-lg">
Start Verification
</button>
);
};
export default VerificationButton;Web Configuration Parameter Reference
When initializing either IdentityKYC.verify() or useIdentityPayKYC(), pass a configuration object with the following parameters:
| Parameter | Type | Required | Description |
|---|---|---|---|
merchant_key / widget_key | String | Yes | Your public web SDK key from the Prembly dashboard. |
config_id / widget_id | String | Yes | The verification workflow configuration ID created in your dashboard. |
email | String | Yes | The user's email address. |
first_name | String | Optional | User's first name to pre-fill the form fields. |
last_name | String | Optional | User's last name to pre-fill the form fields. |
phone | String | Optional | User's phone number with country code. |
user_ref | String | Optional | Your internal reference ID for tracking the user or transaction. |
is_test | Boolean | Optional | Set to true to run in Sandbox mode without live charges. |
metadata | Object | Optional | Custom key-value pairs (e.g., { internal_id: "123" }) returned in callbacks. |
callback | Function | Yes | Callback function executed when verification completes, fails, or closes. |
Web Troubleshooting & Common Issues
- Widget script not loading: Ensure
https://js.prembly.com/v1/inline/widget.jshas completed loading prior to triggeringIdentityKYC.verify(). - Invalid Configuration Error: Verify that your
widget_keyandconfig_idmatch the active mode (Live vs Sandbox) selected in your dashboard. - Camera Access Denied / Blocked: Modern web browsers block camera and media capture APIs on unencrypted connections. Ensure your website is served over HTTPS during testing and production deployment.