Uncaught TypeError: Cannot read property 'configure' of undefined

im trying to authenticate a bank account using IAV and im getting the following error:-
Uncaught TypeError: Cannot read property ‘configure’ of undefined

also it would be very kind of you if you could simply post the entire fixed code
Cheers!

Complete code:- (im using React btw)

import './App.css';
import Dwolla from 'react-dwolla-iav'

const Client = require("dwolla-v2").Client;
const appKey = '#appKey HERE';
const appSecret = '#appSecret HERE';

var appToken = new Client({
  key: appKey,
  secret: appSecret,
  environment: "sandbox",
});

var iavToken = '4adF858jPeQ9RnojMHdqSD2KwsvmhO7Ti7cI5woOiBGCpH5krY'
let dwolla;

function App() {
  return (
    <div className="App">
      <head>
        <script src="https://cdn.dwolla.com/1/dwolla.js"></script>
        <div id="mainContainer">
          <input type="button" id="start" value="Add Bank" />
        </div>
        <div id="iavContainer">
          <script type="text/javascript">
            $('#start').click(function() {
              dwolla = window.dwolla,
              dwolla.configure('sandbox'),
              dwolla.iav.start(iavToken, {
                container: 'iavContainer',
                stylesheets: [
                  'https://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext'
                ],
                microDeposits: 'true',
                fallbackToMicroDeposits: 'true',
              }, function(err, res) {
                console.log('Error: ' + JSON.stringify(err) + ' -- Response: ' + JSON.stringify(res));
              })
            });
          </script>
        </div>
      </head>
    </div>
  );
}

export default App;

Hi @Dan_Keyote – thanks for posting the complete code!

In the above line, It looks like you’re initializing a variable called “dwolla” but not setting it to anything, which is why you can’t use functions like configure() or iav.start().

If you’re following the IAV guide in our docs, you’ll notice that the first step would be to begin the client-side implementation by including dwolla.js in the HEAD of your HTML page.
HTML like so,

<head>
  <script src="https://cdn.dwolla.com/1/dwolla.js"></script>
</head>

That way you’ll have access to those dwolla functions, configure() and iav.start()

Alternatively, if you were looking to use the react-dwolla-iav package, then there’s a code example in the npm package that you can follow -

import * as React from 'react'
import Dwolla from 'react-dwolla-iav'

const onSuccess = (data) => { /* do stuff with data */ }
const onError = (err) => { /* handle err */ }

const dwollaConfig = {
  backButton: false,
  customerToken: 'asdf',
  environment: 'sandbox',
  fallbackToMicroDeposits: false,
  microDeposits: false,
  stylesheets: [],
  subscriber: () => {},
}

export default () => (
  <div>
    <Dwolla
      onSuccess={onSuccess}
      onError={onError}
      dwollaConfig={dwollaConfig}
    />
  </div>
)

hey @shreya ,
im still getting the same TypeError

the changes i made:-

  1. moved the
    <script src="https://cdn.dwolla.com/1/dwolla.js"></script>
    to its own separate <head> tag (as suggested by you)

  2. i changed the dwolla variable,
    from let dwolla
    to let dwolla = window.dwolla

NOTE:- when trying to define the dwolla variable inside the <script> tag im getting the following error:-
Unexpected token

the new updated code:-


import './App.css';

import Dwolla from 'react-dwolla-iav'

const Client = require("dwolla-v2").Client;

const appKey = '#appKey HERE';

const appSecret = '#appSecret HERE';

var appToken = new Client({

  key: appKey,

  secret: appSecret,

  environment: "sandbox",

});

var iavToken = '4adF858jPeQ9RnojMHdqSD2KwsvmhO7Ti7cI5woOiBGCpH5krY'

let dwolla = window.dwolla

function App() {

  return (

    <div className="App">

      <head>

        <script src="https://cdn.dwolla.com/1/dwolla.js"></script>

      </head>

      <div id="mainContainer">

        <input type="button" id="start" value="Add Bank" />

      </div>

      <div id="iavContainer">

        <script type="text/javascript">

          $('#start').click(function() {

            dwolla.configure('sandbox'),

            dwolla.iav.start(iavToken, {

              container: 'iavContainer',

              stylesheets: [

                'https://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext'

              ],

              microDeposits: 'true',

              fallbackToMicroDeposits: 'true',

            }, function(err, res) {

              console.log('Error: ' + JSON.stringify(err) + ' -- Response: ' + JSON.stringify(res));

            })

          });

        </script>

      </div>

    </div>

  );

}

export default App;

// TypeError: Cannot read property 'configure' of undefined

Thank You in Advance!

Hi @Dan_Keyote – Ah I don’t believe you can import a script into React the way you would on an HTML file. In order to use dwolla.js directly with your React app, it looks like you may have to use the useEffect() hook to include the script when the component mounts. Here’s an example javascript - Adding script tag to React/JSX - Stack Overflow.

Also, if you take a look at the source code of the react-dwolla-iav package, you can see how the author included the dwolla.js script in their app to create this wrapped experience.

Since the author of the package has already done the legwork, I would recommend implementing the react package rather than trying to use dwolla.js directly in your app. I recommend checking out the README and following step by step.