How to get query data from redirected url

Question

I have a card payment that returns a response with a redirect URL. I have to redirect the user after the payment has been initialized. I am doing that using:

...
 window.location.href = response.data.meta.authorization.redirect

To have the payment validated on a page I do not have control over.

After validation I have a redirect URL in my request that redirects (browser redirect) the user back to my application with query data that looks like this:

http://account.localhost.com/deposit/card?response=%7B"id"%3A1499407,"txRef"%3A"tUhElMQhoC"...,

I need the id in that url to verify the payment and subsequently update my database.

How can I do this with Vue?

Answer 1

You can use URL API to retrieve the json in the response parameter, then parse it and get the id from resultant object.

 const str = `http://account.localhost.com/depositcard?response=%7B"id"%3A1499407,"txRef"%3A"tUhElMQhoC"%7D` const json = new URL(str).searchParams.get('response') const obj = JSON.parse(json) console.log(obj.id)

Answer 2

With Vue-router, you can get query params with this.$route.query , then to access a specific parameter: this.$route.query.id

As the ID is inside a stringified JSON object, you'd have to parse it first: JSON.parse(this.$route.query.response).id

So, with a redirect, it makes sense to access the data in the created lifecycle hook:

created() {
    console.log(JSON.parse(this.$route.query.response).id);
}