LaVOZs

The World’s Largest Online Community for Developers

'; javascript - Nuxt - Returning 3D Secure form not redirecting - LavOzs.Com

I am trying to implement a 3D Secure form but I am stuck at showing user bank's page.

I am sending request from my backend and my response is someting like this:

{
  status: 'success',
  locale: 'en',
  systemTime: 1585266454071,
  conversationId: '123456789',
  threeDSHtmlContent: 'PCFkb2N0eXBlIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgICA8dGl0bGU+aXl6aWNvIE1vY2sgM0QtU2VjdXJlIFByb2Nlc3NpbmcgUGFnZTwvdGl0bGU+CjwvaGVhZD4KPGJvZHk+Cjxmb3JtIGlkPSJpeXppY28tM2RzLWZvcm0iIGFjdGlvbj0iaHR0cHM6Ly9zYW5kYm94LWFwaS5peXppcGF5LmNvbS9wYXltZW50L21vY2svaW5pdDNkcyIgbWV0aG9kPSJwb3N0Ij4KICAgIDxpbnB1dCB0eXBlPSJoaWRkZW4iIG5hbWU9Im9yZGVySWQiIHZhbHVlPSJtb2NrNDYtOTUwODMyNjU0MjAzODIxOWl5emlvcmQiPgogICAgPGlucHV0IHR5cGU9ImhpZGRlbiIgbmFtZT0iYmluIiB2YWx1ZT0iNTQwMDAxIj4KICAgIDxpbnB1dCB0eXBlPSJoaWRkZW4iIG5hbWU9InN1Y2Nlc3NVcmwiIHZhbHVlPSJodHRwczovL3NhbmRib3gtYXBpLml5emlwYXkuY29tL3BheW1lbnQvaXl6aXBvcy9jYWxsYmFjazNkcy9zdWNjZXNzLzM0Ij4KICAgIDxpbnB1dCB0eXBlPSJoaWRkZW4iIG5hbWU9ImZhaWx1cmVVcmwiIHZhbHVlPSJodHRwczovL3NhbmRib3gtYXBpLml5emlwYXkuY29tL3BheW1lbnQvaXl6aXBvcy9jYWxsYmFjazNkcy9mYWlsdXJlLzM0Ij4KICAgIDxpbnB1dCB0eXBlPSJoaWRkZW4iIG5hbWU9ImNvbmZpcm1hdGlvblVybCIgdmFsdWU9Imh0dHBzOi8vc2FuZGJveC1hcGkuaXl6aXBheS5jb20vcGF5bWVudC9tb2NrL2NvbmZpcm0zZHMiPgogICAgPGlucHV0IHR5cGU9ImhpZGRlbiIgbmFtZT0iUGFSZXEiIHZhbHVlPSJhZTJhZGQ4MC0zZTRiLTQ0OTQtOTdhYi1kMzk2YzA5ZWVkZmUiPgo8L2Zvcm0+CjxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij4KICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJpeXppY28tM2RzLWZvcm0iKS5zdWJtaXQoKTsKPC9zY3JpcHQ+CjwvYm9keT4KPC9odG1sPg=='
}

Basically, threeDSHtmlContent is base64 encoded string of HTML page. Which makes a request to their server and must redirect my Nuxt app to that server. I am able to handle after callback.

My Nuxt component is:

<template>
  <v-container pa-12>
    <div :v-html="rawHTML"></div>
    ...
    OTHER FORM DATA
    ...
  </v-container>
</template>
  export default {
    computed: {
      rawHTML() {
        return this.$store.state.postAJob.rawHTML;
      }
    },
    methods: {
      submit() {
        this.$store.dispatch("postAJob/sendPayment", { ... })
      }
    }
}

And my store:

export const state = () => ({
  rawHTML: ""
});

export const mutations = {
  SET_RAWHTML(state, data) {
    state.rawHTML = data;
  },
  SET_ERROR(state, data) {
    state.error = data;
  },
  SET_LOADING(state, data) {
    state.isLoading = data;
  }
};

export const actions = {
  async sendPayment({ commit }, payment) {
    commit("SET_LOADING", true);
    let response = await this.$axios.post(`/payment`, payment)
    let buff = new Buffer.from(response.data.threeDSHtmlContent, "base64");
    commit("SET_LOADING", false);
    commit("SET_RAWHTML", buff.toString())
  }
};

My component not submitting the form which comes with response therefore I can not see the 3D Secure page.

How can I make this returning form's submit button to work?

Thanks.

Related
JavaScript post request like a form submit
How to manage a redirect request after a jQuery Ajax call
How do I redirect to another webpage?
Convert form data to JavaScript object with jQuery
event.preventDefault() vs. return false
jQuery AJAX submit form
Return multiple values in JavaScript?
Why does ++[[]][+[]]+[+[]] return the string “10”?
How to implement 3d secure payment securely
How do I return the response from an asynchronous call?