[Vuejs]-Forte Hosted Form callback in vue.js

by

0👍

✅

I imagine this works by assuming that the named function given to callback is available globally.

You can have your Vue component create the callback function on the window object so that it is available globally. For example

<button
    :callback="callbackFunctionName"
    :api_access_id="forteRequestModel.apiAccessID"
    version_number ="2.0"...>
    Make Payment
</button>

export default {
  data: () => ({
    forteRequestModel: {
      apiAccessID: "whatever"
    },
    callbackFunctionName: `cb${Date.now()}` // generate a unique function name
  }),
  created () {
    // register the callback on `window`
    window[this.callbackFunctionName] = (e) => {
      alert("Hello " + e.response)

      // this could also call component methods, access data, props, etc
    }
  },
  beforeDestroy () {
    delete window[this.callbackFunctionName] // cleanup
  }
}

Leave a comment