OPV 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-6 mb-3">
        <label for="validationDefault01">First name</label>
        <input type="text" class="form-control" id="validationDefault01" placeholder="First name" v-model='firstname' required>
      </div>
      <div class="col-sm-6 mb-3">
        <label for="validationDefault02">Last name</label>
        <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" v-model='lastname' required>
      </div>
    </div>
    <div class="form-row">
      <div class="col-sm-6 mb-3">
        <label for="validationDefault03">City</label>
        <input type="text" class="form-control" id="validationDefault03" placeholder="City" v-model='city' required>
      </div>
      <div class="col-sm-3 mb-3">
        <label for="validationDefault04">State</label>
        <input type="text" class="form-control" id="validationDefault04" placeholder="State" v-model='state' required>
      </div>
      <div class="col-sm-3 mb-3">
        <label for="validationDefault05">Zip</label>
        <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" v-model='zip' required>
      </div>
    </div>

    <button class="btn btn-primary" @click.prevent="tokenizeAll">Tokenize</button>
    <button class="btn btn-primary" @click.prevent="detokenizeAll">Detokenize</button>
  </form>
</div>

CSS

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

JavaScript

// Vue.use(BootstrapVue);

new Vue({
  el: '#app',
  data: {
    firstname: 'John',
    lastname: 'Doe',
    city: 'SF',
    state: 'CA',
    zip: '94114'
  },
  methods: {
    async tokenizeAll() {
    	Object.keys(this.$data).forEach(async key => {
      	this.$data[key] = await this.tokenize(this.$data[key]);
      });
    },
    async detokenizeAll() {
    	Object.keys(this.$data).forEach(async key => {
      	this.$data[key] = await this.detokenize(this.$data[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 fetch("https://playground.openprivacy.io/api/v1/facts/"+value, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          'x-opv-grant-token': 'v1:example.com:O8niB0AUEj6YvEcX1nGc'
        }
      });
      const data = await response.json()
      return data.value;
    }
  }
})