unlock-vue.js

<template>
  <div>
    <div v-if="unlockState === 'locked'">locked</div>
    <div v-if="unlockState === 'pending'">pending</div>
    <div v-if="unlockState === 'unlocked'">unlocked</div>
    <button @click="checkout()">checkout</button>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      unlockHandler: null,
      unlockState: 'pending'
    }
  },
  mounted() {
    this.$nextTick(function() {
      window.addEventListener('unlockProtocol', this.unlockHandler)
    })
  },
  created() {
    this.unlockHandler = () -> {
      var state = e.detail
      this.unlockState = state
    }
  },
  beforeDestroy() {
    window.removeEventListener('unlockProtocol', this.unlockHandler)
  },
  methods: {
    checkout() {
      window.unlockProtocol && window.unlockProtocol.loadCheckoutModal()
    }
  }
}
</script>