Churnkey vue.js sample template

launch-churnkey.vue

<template>
  <div>
  <h1>Click to launch Churnkey</h1>
  <!-- show button if user can cancel and loading finished -->
  <div>
    <button id="ck-cancel" @click="cancelFlow()" v-if="user.canCancel && !isLoading">Cancel</el-button>
  </div>
</template>

<script>
import loadChurnKey from '@/helpers/loadChurnKey';
import launchChurnKey from '@/helpers/launchChurnKey';

export default {
  name: 'SamplePage',
  computed: {
    user() {
      return this.$store.state.user;
    },
    canCancel() {
      // hide cancel button if user doesn't have an active subscription
      return this.user.subscription;
    },
  },
  data() {
    return {
      isLoading: false,
    };
  },
  methods: {
    // click handler for launching churnkey embed
    cancelFlow() {
      launchChurnKey(this.user);
    },
  },
  mounted() {
    const vm = this;
    loadChurnKey();
  },
};
</script>

<style>
.button {
  color: #000;
}
</style>