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/#/