OPV Checkr API Demo

HTML

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>



<div id="app">
  <form>
    <div class="form-row">
      <div class="col-sm-4 mb-3">
        <label for="validationDefault01">First name</label>
        <input type="text" class="form-control" id="validationDefault01" placeholder="First name" v-model='candidate.first_name' required>
      </div>
      <div class="col-sm-4 mb-3">
        <label for="validationDefault02">Middle name</label>
        <input type="text" class="form-control" id="validationDefault02" placeholder="Middle name" v-model='candidate.middle_name' required>
      </div>
      <div class="col-sm-4 mb-3">
        <label for="validationDefault03">Last name</label>
        <input type="text" class="form-control" id="validationDefault03" placeholder="Last name" v-model='candidate.last_name' required>
      </div>
    </div>
    <div class="form-row">
      <div class="col-sm-4 mb-3">
        <label for="validationDefault04">Driver License Number</label>
        <input type="text" class="form-control" id="validationDefault04" placeholder="City" v-model='candidate.driver_license_number' required>
      </div>
      <div class="col-sm-4 mb-3">
        <label for="validationDefault05">Driver License State</label>
        <input type="text" class="form-control" id="validationDefault05" placeholder="State" v-model='candidate.driver_license_state' required>
      </div>
      <div class="col-sm-4 mb-3">
        <label...

CSS

#app {
  padding: 20px;
  height: 350px;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    checkrResponse: "",
    candidate: {
      "first_name": "John",
      "middle_name": "Alfred",
      "last_name": "Smith",
      "email": "[email protected]",
      "phone": "5555555555",
      "zipcode": "90401",
      "dob": "1970-01-22",
      "ssn": "847-43-4645",
      "driver_license_number": "F2111651",
      "driver_license_state": "CA"
    }
  },
  computed: {
    tokenized() {
      return this.candidate.ssn.startsWith("fact_");
    }
  },
  methods: {
    async detokenizeProxyCheckrAPI() {
    	const url = "https://proxy-playground.openprivacy.io/detokenize_checkr_api"
      const opt = {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Basic ODNlYmVhYmRlYzA5ZjY2NzA4NjM3NjZmNzkyZWFkMjRkNjFmZTNmOTo='
        },
        body: JSON.stringify(this.candidate)
      }
      const response = await fetch(url, opt);
      const data = await response.json()
      this.checkrResponse = JSON.stringify(data, null, 2);
    },
    async tokenizeAll() {
      Object.keys(this.candidate).forEach(async key => {
        this.candidate[key] = await this.tokenize(this.candidate[key]);
      });
    },
    async detokenizeAll() {
      this.checkrResponse = "";
      Object.keys(this.candidate).forEach(async key => {
        this.candidate[key] = await this.detokenize(this.candidate[key]);
      });
    },
    async tokenize(value, factTypeSlug = 'ascii') {
      const response = await fetch("https://playground.openprivacy.io/js/v1/facts", {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-opv-grant-token': 'v1:example.com:Xx85m4j71dmx4W61q0wJ'
        },
        body: JSON.stringify({
          'value': value,
          'fact_type_slug': factTypeSlug
        })
      });
      const data = await response.json()
      return data.id;
    },
    async detokenize(value) {
      const response = await...