Verification Widget Working Example
We have provided a working example of the verification widget. This example will display a simple form which allows partner to invoke the verification widget and test the integration requirements.
Partner required to obtain access from a PRIVO administrator. If you do not already have access to this working example then you can request access. Send an email to devops@privo.com with your contact information and a representative will be in contact with you to arrange access.
NOTE: Be sure to put Access request for verification widget working example in the subject line.
<html>
<head>
<!-- PRIVO Verification JS -->
<script src="https://verification-int.privo.com/vw/privo.min.js"></script>
<!-- IMPORTANT: Retrieve API_KEY and siteIdentifier from PRIVO Customer Support -->
<script type="text/javascript">
const handleVerifyEvent = (resp) => {
console.log(resp);
};
privo.verify.addEventHandlers({
onVerify: handleVerifyEvent,
onVerifyDone: handleVerifyEvent,
onVerifyCancel: handleVerifyEvent,
onVerifyError: handleVerifyEvent,
});
const verificationConfig = {
apiKey: "", // your api key here
siteIdentifier: "", // your site identifier here
displayMode: "redirect",
};
// reformat string formatted as mm/dd/yyyy (local format)
// to string formatted into "yyyy-MM-dd" (sdk format)
// (you can use any time lib to do this: date-fns, moment, luxon, etc)
const getFormattedDate = (rawDate) => {
const dateParts = rawDate?.split("/");
if (!!dateParts && dateParts.length === 3) {
return `${dateParts[2]}-${dateParts[0]}-${dateParts[1]}`;
}
};
//remove phone separators
const getFormattedPhone = (rawPhone) => rawPhone?.replace(/-/g, "");
const verify = (e) => {
e.preventDefault();
const displayMode = document.querySelector(
'input[name="displayMode"]:checked'
).value;
const partnerDefinedUniqueID = document.querySelector(
'input[name="partnerDefinedUniqueID"]'
).value;
const firstName = document.querySelector(
'input[name="firstName"]'
).value;
const lastName = document.querySelector('input[name="lastName"]').value;
const birthDateYYYYMMDD = getFormattedDate(
document.querySelector('input[name="dob"]').value
);
const postalCode = document.querySelector(
'input[name="postalCode"]'
).value;
const email = document.querySelector('input[name="email"]').value;
const phone = getFormattedPhone(
document.querySelector('input[name="homePhoneNumber"]').value
);
const profile = {
partnerDefinedUniqueID,
firstName,
lastName,
birthDateYYYYMMDD,
postalCode,
email,
phone,
};
privo.verify.showVerify(profile, {
...verificationConfig,
displayMode,
});
};
const applyDefaults = () => {
event.preventDefault();
document.querySelector('input[name="firstName"]').value = "Mickey";
document.querySelector('input[name="lastName"]').value = "Moose";
document.querySelector('input[name="dob"]').value = "01/01/1970";
document.querySelector('input[name="postalCode"]').value = "35485";
document.querySelector('input[name="homePhoneNumber"]').value =
"+17037865555";
document.querySelector('input[name="partnerDefinedUniqueID"]').value =
btoa("" + 10000 * Math.random());
};
const reset = () => {
document.getElementById("verifyForm").reset();
};
window.onload = () => {
document.querySelector("#verify").addEventListener("click", verify);
document
.querySelector("#apply-test-data")
.addEventListener("click", applyDefaults);
document
.querySelector("#reset-test-data")
.addEventListener("click", reset);
};
</script>
<title></title>
</head>
<body>
<div class="center-block" style="width: 300px; text-align: center">
<h4>Verification Request</h4>
<hr />
<form id="verifyForm" name="verifyForm">
<div class="form-group">
<input
type="text"
maxlength="20"
name="firstName"
placeholder="first name"
class="form-control"
/>
</div>
<div class="form-group">
<input
type="text"
maxlength="20"
name="lastName"
placeholder="last name"
class="form-control"
/>
</div>
<div class="form-group">
<input
type="text"
name="dob"
placeholder="birthdate"
class="form-control"
placeholder="mm/dd/yyyy"
/>
</div>
<div class="form-group">
<input
type="email"
maxlength="255"
name="email"
placeholder="email"
class="form-control"
/>
</div>
<div class="form-group">
<input
type="text"
maxlength="9"
name="postalCode"
placeholder="postal code"
class="form-control"
/>
</div>
<div class="form-group">
<input
maxlength="9"
name="homePhoneNumber"
placeholder="phone number"
class="form-control"
/>
</div>
<div class="form-group">
<input
name="partnerDefinedUniqueID"
placeholder="partnerDefinedUniqueID"
class="form-control"
/>
</div>
<div class="form-group">
<label class="radio-inline">
<input
type="radio"
name="displayMode"
id="displayMode1"
value="redirect"
checked
/>
redirect
</label>
<label class="radio-inline">
<input
type="radio"
name="displayMode"
id="displayMode2"
value="popup"
/>
popup
</label>
</div>
<br />
<div class="btn-toolbar">
<button type="button" id="verify" class="btn btn-primary btn-wide">
Verify
</button>
<button type="button" id="apply-test-data" class="btn">
Apply Test Data
</button>
<button type="button" id="reset-test-data" class="btn">Reset</button>
</div>
</form>
</div>
</body>
</html>
Working example endpoint:
https://privohub-int.privo.com/
https://verification-dev.privo.com/vw/#/