Develop forte UI Button and it's callback using Vuejs and Javascript

Question

This is one of the way you can try to integrate the forte UI button and its callback. https://www.forte.net/devdocs/a_checkout/co_product_overview_v2.htm#Coding

The main problem, I was facing at the time of integration is that required a callback function globally or outside the Vue object.

So the way to achieve need to make that function global using window.forteCb

<template>
  <button
    :api_access_id="forteConfig.apiAccessId"
    :version_number="forteConfig.versionNumber"
    :method="forteConfig.method"
    :location_id="forteConfig.locationId"
    :total_amount="forteConfig.totalAmount"
    :utc_time="forteConfig.utcTime"
    :order_number="forteConfig.orderNumber"
    :signature="forteConfig.apiSignature"
    allowed_methods="visa,mast,disc,amex"
    callback = 'forteCb'
    hash_method="sha1"
    save_token="false"
    swipe="false"
    billing_company_name_attr="hide"
  >
    Proceed to Pay
  </button>
</template>
<script>
import { configUrls } from '../../util/clients/client-config';

let self;
const URLS = configUrls();

// eslint-disable-next-line no-unused-vars
const forteCb = (e) => {
  // console.log(e);
  const response = JSON.parse(e.data);
  // console.log(response);
  switch (response.event) {
    case 'begin':
      // do nothing
      break;
    case 'abort':
      // do nothing
      break;
    case 'success':
      // transaction successful
      self.$emit('forteResponse', `{trace_number: ${response.trace_number} }`);
      // eslint-disable-next-line no-alert
      alert(`Thanks for your order. the trace number is ${response.trace_number}`);
      break;
    case 'failure':
      // handle failed transaction
      // eslint-disable-next-line no-alert
      alert(`Sorry, transaction failed. failed reason is  ${response.response_description}`);
      break;
    default:
      // do nothing
      break;
  }
};

export default {
  name: 'FortePayment',
  data: () => ({
    forteConfig: {},
  }),
  mounted() {
    window.forteCb = forteCb;
    self = this;
    const fortePaymentScript = document.createElement('script');
    fortePaymentScript.setAttribute('src', URLS.FORTE_CHECKOUT);
    document.head.appendChild(fortePaymentScript);
    this.forteConfig = this.$store.state.ForteService.forteConfig;
  },
};
</script>