Bolboa Bolboa - 1 month ago 28
AngularJS Question

How can I implement the Plaid API using Ionic?

I was able to successfully implement the API on web, here is what it looks like, I have a button in a regular html file...

<div>
<span class="radio-button radio-left" id="sandboxLinkButton">Sandbox Mode</span>
</div>


I include the script tag...

<script src="https://cdn.plaid.com/link/stable/link-initialize.js"></script>


and I include the following javascript in the html body...

<script type="text/javascript">
var sandboxHandler = Plaid.create({
clientName: 'SUM',
env: 'tartan',
product: 'auth',
key: 'test_key',
onSuccess: function(token) {
//window.location = '/accounts.html?public_token=' + token;
console.log("yes");
},
});

// Open the "Institution Select" view using the sandbox Link handler.
document.getElementById('sandboxLinkButton').onclick = function() {
sandboxHandler.open();
};

</script>


Now I want to do the same using angular js. I'm using an ionic framework (not that it really matters). So I first display the necessary html using the following...

app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/app');
$stateProvider

.state('app', {
url: '/app',
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
});


My
menu.html
file contains the following button...

<span ng-click="create()" class="radio-button radio-left" id="sandboxLinkButton">Sandbox Mode</span>


on
ng-click
it reaches the following controller. I tried to implement the API in this controller to no avail...

app.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
var sandboxHandler = Plaid.create({
clientName: 'SUM',
env: 'tartan',
product: 'auth',
key: 'test_key',
onSuccess: function(token) {
console.log("yes");
},
});

$scope.create = function() {
sandboxHandler.open();
}
});


I get the error
Plaid
is not defined in the controller. Why is that?

EDIT

I replicated a web app version using angular and it worked. I used the following CDN instead of the ionic/angular one

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>


But I still can't get it to work on my ionic web app. Has anyone else ever come across this issue?

Answer

When I included the library I immediately got the following error in the browser: Uncaught TypeError: Cannot read property 'appendChild' of null

There are similar questions about this error regarding different libraries here and here, however I was not able to solve the problem based on those answers.

The closest thing to a solution that I found was in this issue report within the Plaid repository on GitHub. It describes a problem with the library not working when placed in the <head> tag. A commit within this issue report describes that this problem can be solved by including the script inside the <body> tag instead of the <head> tag.

I would recommend subscribing to the issue report to see whether other solutions will be introduced in the future.

So tldr; Try moving the <script> tag from <head> to the <body>.

Comments