I am trying to integrate the Plaid API into my website that's built with a Vue frontend and a Java backend. I am able to get a response back when I request the link token, but the Link popup window isn't initiating. I suspect it has to do with how the script is mounted, but I am not quite sure, and it has my project partner and I stumped. This is our first time linking an API and creating a website from the ground up in general and any help would be much appreciated!
Here is the Vue frontend. I have also tried putting the script directly in the index.html file, but that didn't work either.
<template>
<h1>Home Page</h1>
<h2>Connect To Plaid</h2>
<button @click="connectToBank">Link Account</button>
<div>{{pl}}</div>
</template>
<script>
export default {
mounted(){
let Plaid = document.createElement('script')
Plaid.setAttribute('src', 'https://cdn.plaid.com/link/v2/stable/link-initialize.js')
document.head.appendChild(Plaid)
},
name: 'HomePage',
data() {
return {
answer: "",
pl: window.Plaid,
link_token: null,
};
},
methods: {
//Gets the link token as a string and returns it
async getLinkToken() {
const linkTokenResponse = await fetch("api/generateLinkToken");
const data = await linkTokenResponse.json();
const linkToken = data.linkToken;
console.log(linkToken);
return linkToken;
},
//Gets the access token as a string and returns it, will eventually return other data and not log the token
async getAccessToken(publicToken) {
const publicTokenResponse = await fetch ("/api/createAccessToken", {
method: 'POST',
headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
body: JSON.stringify({public_token: publicToken})
});
const data = await publicTokenResponse.json();
const accessToken = data.accessToken;
console.log(accessToken);
return accessToken;
},
//Link popup init and public token handler
async connectToBank() {
const handler = window.Plaid.create({
token : this.getLinkToken(),
onSuccess: async (publicToken, metadata) => {
console.log(`Finished with Link! ${JSON.stringify(metadata)}`);
try {
const access_token = this.getAccessToken(publicToken);
console.log(access_token);
} catch (error){
console.log('Error, ${JSON.stringify(err)');
}
},
onExit: async (err, metadata) => {
console.log(
`Exited early. Error: ${JSON.stringify(err)} Metadata: ${JSON.stringify(
metadata
)}`
);
},
onEvent: (eventName, metadata) => {
console.log(`Event ${eventName}, Metadata: ${JSON.stringify(metadata)}`);
},
});
handler.open();
},
}
}
</script>
And here is the error code that I'm getting when I click the button to start Link, as well as the error code from the handler
Error initializing Plaid Link. If the error persists, contact Support (https://dashboard.plaid.com/support
Exited early. Error: null Metadata:
{"link_session_id":"","status":"","request_id":""}
One thing that stands out to me is the line token : this.getLinkToken(), -- getLinkToken is an async method, so I'd expect you'd want to await the results. I wonder if without the await you are ending up trying to initialize Link before you actually have the Link token.
In general, if you're stuck on any of the basic bits of the Plaid integration, I'd recommend looking at a minimum viable implementation like the Tiny Quickstart and using that as the skeleton you can build on for your implementation.