Plaid Link Javascript

Question

I am integrating with Plaid Link and Stripe into a wizard form flow (many pages with many fields on each page). All information that the user enters is stored in a global variable "this.applicationservice.application.applicant". The user hits a payment verification in the middle of this flow, where Plaid pops an IFrame after calling Plaid.create(plaidparameters).open(). When Plaid is initialized it wipes my browser memory and "this.applicationservice.application.applicant" is now undefined.

How can I avoid losing the browser memory when calling the Plaid Initialization?

this.http.post('https://localhost:8080/v1/validateach').subscribe(
        response => {
      
          let plaidparameters = {
            token: response.linkToken,
            onSuccess: function(public_token, metadata) {  
             
             // Memory is wiped
             console.log(this.applicationservice.application)

            }
          };
          
          // Works Fine
          console.log(this.applicationservice.application) 

          Plaid.create(plaidparameters).open();
        
        }
      );

Answer 1

So the problem is that the scope of this inside the onSuccess callback doesn't extend outside the callback.

One of my colleagues who works a lot more on JavaScript suggested the following:

this.http.post('https://localhost:8080/v1/validateach').subscribe(
        response => {
          const onSuccess = (public_token, metadata) => { 
            console.log(this.applicationservice.application); 
          };
          let plaidparameters = {
            token: response.linkToken,
            onSuccess,
          };
          // Works Fine
          console.log(this.applicationservice.application) 
          Plaid.create(plaidparameters).open();
        }
      );

And also added: It might actually be better to define that callback function outside of the invocation of this.http.post so it doesn’t inherit its scope from the plaidparameters object.