Plaid Link and Ionic

Guys,

I am posting this here just in case someone else has seen this before.

So I integrated plaid-link into my app the other day, it works flawlessly when running on the browser using ionic serve. But refuses to open when I try it out on the device.

The openlink method is called correctly and I can see that resources are brought back to my device successfully. What am I missing here?

plaid-link says webview has been discontinue and advised that Plaid’s support for UIWebView is deprecated. Please consider using WKWebView instead.

Thanks for your help in advance for your help.

Thanks!

UIWebView an WKWebView are both native concepts and not available on ionic serve.
What did you implement in your app then?

1 Like

Thanks for the quick response. Plaid Link, a way to allow users to connect their account and perform ACH payments. I am using that to link users to a plaid UI so that they can be authenticated and provide me with a token to proceed with their transaction. When I run my app on the browser using ionic serve it works. When test the app on my ios device, it does not open the page even though debugging shows everything looks alright. That is data is retrieved just like it did when it worked on the browser.

Thanks again.

You didn’t read my question. Please do so.

configurePlaid(saveDetails: (data: any) => void) {
    this.linkHandler = Plaid.create({
      clientName: Api.APP_NAME,
      env: Api.PLAID_EVIRONMENT,
      key: Api.PLAID_PUBLISHABLE_KEY,
      product: ['auth'],
      selectAccount: true,
      forceIframe: true,
      onLoad: function () {
        console.debug('loaded');
      },
      onSuccess: function (public_token: string, metadata: PlaidMetadata) {
        if (metadata != null) {
          let bankAccount = new BankAccount();
          bankAccount.accountId = metadata.account.id,
            bankAccount.accountName = metadata.account.name,
            bankAccount.institutionId = metadata.institution.institution_id,
            bankAccount.institutionName = metadata.institution.name,
            bankAccount.publicToken = public_token
          saveDetails(bankAccount);
        }
      },
      onExit: function (err, metadata: PlaidMetadata) {
        if (err != null) {
          console.error(err);
        }
      }
    });
  }

  forceExitLink() {
    this.linkHandler.exit();
  }

  openLink() {
    this.linkHandler.open(); // This method right here is supposed to open the page below
  }

55 PM

As already explained above this is what I get when I run my app using ionic serve on the browser. But the process comes up with nothing on IOS when I run ionic cordova run ios --device --l.

Where does this come from? How do you “import” the Plaid library?
Did you add a .js file? Or an import? Or a Cordova plugin?

For now I still don’t know what code is actually executing here, so it is hard to ask for details that would help understand why it doesn’t work on device.

My apologies for the back an forth:

Where does this come from? How do you “import” the Plaid library? --> No I did not import any library, rather I declared it.

declare var Plaid;

 ---

`declare var Plaid;`

Did you add a .js file? --> Yes I did in my index.html file, see below
<script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>

Don’t worry, we are getting somewhere. But as this is my first interaction with Plaid, I have to understand first and ask very specific questions.

So you are using the “Web” version of Plaid, not webview (although it would make total sense to somehow package that in a nice Cordova plugin - but Plaid would probably have to / want to do that themselves as it is a bit more involved).

Where did you get the idea to implement it that way?

Some template? Plaid themselves only seems to have and link to AngularJS and Ionic v1 projects, nothing related to Angular and Ionic v2+.

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Safari dev tools: https://ionic.zone/debug/remote-debug-your-app#ios Look at the console and network tabs for errors.

Maybe also try without --l, this can cause additional network security problems that block requests.

What is the URL shown in your browser while ionic serve when it displays Plaid’s “link” interface? (The one you screenshotted in the device…)

You might find some useful information in this conversation.

1 Like

Please take a look at this Creating Items with Link and the API for reference on where I got the idea to implement it that way.

Yes I debugged it using safari browser and my device. I could see that the method is hit and data from plaid service is also retrieved successfully. The only difference again is that it does not popup the view

1 Like

Browser url does not change. See image.

Can you start a new project with ionic start blank blank and implement the bare necesseties for this to work and put it on Github? The link you posted to the Plaid docs is to a totally unrelated paragraph, so I still have no real idea what you implemented and why.

Ok, here it is: plaid-link-test

1 Like

Nice.

So the library works by putting a <iframe> into the body of the html page, next to the <ion-app> from Ionic, that loads this page: https://cdn.plaid.com/link/2.0.42/link.html?clientName=kaphamobile&customizations&env=sandbox&forceIframe=true&isMobile=true&isSimpleIntegration=false&key=7dc382b3780665771fc7317f8651c8&origin=http%3A%2F%2Flocalhost%3A8100&product=auth&selectAccount=true&uniqueId=1&version=2.0.42

So let’s see what happens on a device…

Hmm, on Android everything seems to be working. Did you test on Android or iOS?

IOS, specifically iphone 6s IOS 10.3.2

No Macbook handy right now. Will check later.

So on the iPhone when accessing the PlaidPage it also inserts the iFrame into the page. But clicking the “Link Your Bank Account” doesn’t unhide it, the CSS stays “display:none;”.

There were not useful console.log in the code at all, so I added some. The linkHandler object created looks ok, I couldn’t find anything obvious why the code would not be executed as it should.

As a next step I would advice you to implement this in a plain html page and see if this works in Chrome on Android and Safari on iOS. If it works on Chrome and not Safari, something is wrong with Plaid’s JS for iOS. If it does work, we have to look into it further.

Ok, found something: The iFrame is added invisible when you open PlaidPage. On Android this also requests the content of the iFrame, as it should. On iOS nothing happens - the iFrame is not loaded. That’s probably why open later when clicking the button does nothing. So: Why doesn’t this load on iOS?