In my Vue component for Plaid Link, there is a function/action in my Vuex store called onSuccess. This function is supposed to call my backend API to exchange the public token for an access token and send some data about the link to the backend. However, I am encountering an issue where the metadata parameter is returning as undefined when I use console.log() inside my Vuex store. Strangely enough, if I do this inside the component itself, everything works fine.
Vuex code
onSuccess({ commit }, public_token, metadata) {
console.log(public_token, metadata)
commit('SET_PUBLIC_TOKEN', public_token);
return new Promise((resolve, reject) => {
Vue.axios.post('/plaid/exchange_public_token', {
public_token,
})
.then(() => {
resolve();
})
.catch((error) => {
reject(error);
});
})
},
Code within the view's script section
computed: {
...mapState({
plaid: state => state.plaid
})
},
methods: {
...mapActions({
onLoad: 'onLoad',
onExit: 'onExit',
onEvent: 'onEvent',
onSuccess: 'onSuccess',
}),
},
mounted() {
this.onLoad();
},
Code within the view's template section
<PlaidLink
clientName="Plaid App"
env="sandbox"
:link_token="plaid.link_token"
:products="['auth','transactions']"
:onLoad='onLoad'
:onSuccess='onSuccess'
:onExit='onExit'
:onEvent='onEvent'
>
Code within the component that uses plaid.create with other helper functions removed
this.linkHandler = this.plaid.create({
clientName: this.clientName,
env: this.env,
isWebview: this.isWebview,
key: this.public_key,
product: this.products,
receivedRedirectUri: this.receivedRedirectUri,
token: this.link_token,
webhook: this.webhook,
onLoad: function() {
// Optional, called when Link loads
self.onLoad()
},
onSuccess: function(public_token, metadata) {
// Send the public_token to your app server.
// The metadata object contains info about the institution the
// user selected and the account ID or IDs, if the
// Select Account view is enabled.
console.log(metadata)
self.onSuccess(public_token, metadata)
},
onExit: function(err, metadata) {
// Storing this information can be helpful for support.
self.onExit(err, metadata)
},
onEvent: function(eventName, metadata) {
self.onEvent(eventName, metadata)
}
});