Language

Dwolla.js

Using Dwolla.js for Instant Account Verification (IAV)

For Access API partners, dwolla.js has the added function of facilitating Instant Account Verification (IAV) on their Customer’s bank or credit union account. By calling a separate function dwolla.iav.start(), the Access API partner application can render the IAV flow within a specified container. dwolla.iav.start() allows for customization through configurable options such as: stylesheets which represents a list of CSS stylesheets for styling the IAV flow, microDeposits which presents the micro-deposit method of bank verification as an option throughout the IAV flow, and fallbackToMicroDeposits which gives the user the option fallback to selecting the micro-deposit method of bank verification within the IAV flow.

  1. Read more about how to use dwolla.js to quickly add and verify an Access API Customer’s bank account in the funding source verification resource article.

dwolla.iav.start()

ParamTypeValue
iav-tokenstringA single use IAV token generated on your server.
optionsobjectAn object containing configurable options. Contains keys: container, stylesheets, microDeposits and fallbackToMicroDeposits. See example below.
container represents a string value container element where IAV will render.
stylesheets represents an array list of stylesheets to load IAV styles.
microDeposits represents a true or false value which determines if the micro-deposit method of bank verification is presented as an option throughout the IAV flow.
fallbackToMicroDeposits represents a boolean true or false value which determines if a fallback selection screen appears for choosing an alternative bank verification method.
callbackfunctionA callback function that handles the response from Dwolla.

Example

dwolla.iav.start('8zN400zyPUobbdmeNfhTGH2Jh5JkFREJa9YBI8SLXp0ERXNTMT', {
  container: 'iavContainer',
  stylesheets: [
    'http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext',
    'http://myapp.com/iav/customStylesheet.css'
  ],
  microDeposits: false,
  fallbackToMicroDeposits: true
}, function(err, res) {
  console.log('Error: ' + JSON.stringify(err) + ' -- Response: ' + JSON.stringify(res));
});

Customization

Enabling micro-deposits or fallback to micro-deposits

Your application can present the micro-deposit method of bank verification throughout the IAV flow by setting the microDeposits option to true. This option gives the user the ability to initially select either the micro-deposit method of bank verification or IAV, as well as fallback to selecting the micro-deposit method of bank verification if un-successful in the initial IAV flow.

Screenshot of micro-deposit fallback

Alternatively, if your application sets the fallbackToMicroDeposits option to true, a fallback selection screen will appear if (a) the user is unable to locate their bank on the bank search screen, or (b) there was an issue with the initial IAV flow. This selection screen asks the user to choose from either the traditional micro-deposit method of bank verification or re-attempt the IAV flow.

IAV styles

Dwolla provides a list of CSS classes available for styling certain elements of the IAV flow. These elements can be easily customized to match the look and feel of your application, and are included within the options JavaScript object of the function dwolla.iav.start(). You can specify one or many stylesheets as a list within the stylesheets attribute. By default, the elements within your specified container are responsive to any change in screen size.

Demo Dwolla.js and IAV customization here.

List of CSS classes

/* Implement Dwolla's styles */
.dwolla-iav-text-box,
.dwolla-iav-button,
.dwolla-iav-header,
.dwolla-iav-text,
.dwolla-iav-link,
.dwolla-iav-error,
.dwolla-iav-label {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
}

.dwolla-iav-header {
    font-weight: 300;
    margin-bottom: 2.5rem;
}

.dwolla-iav-text-box {
    box-shadow: none;
    border: 1px solid #ddd;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-radius: 0;
}

.dwolla-iav-text-box:focus {
    border-color: #1e88e5;
}

.dwolla-iav-link {
    color: #1e88e5;
    cursor: pointer;
}

.dwolla-iav-link:hover {
    color: #1565c0;
}

.dwolla-iav-button {
    background: #1e88e5;
    color: white;
    border-radius: 3px;
}

.dwolla-iav-button:hover {
    background: #4D8CD4;
    cursor: pointer;
}

.dwolla-iav-button:active {
    background: #1565c0;
}

.dwolla-iav-check-image {
    background: #1e88e5;
}

.dwolla-iav-radio-hover {
    background-color: #fff;
}

.dwolla-iav-radio-selected {
    background-color: #1e88e5;
}

View:


Financial institutions play an important role in the Dwolla network.

Dwolla, Inc. is an agent of Veridian Credit Union and Compass Bank and all funds associated with your account in the Dwolla network are held in pooled accounts at Veridian Credit Union and Compass Bank. These funds are not eligible for individual insurance, including FDIC insurance and may not be eligible for share insurance by the National Credit Union Share Insurance Fund. Dwolla, Inc. is the operator of a software platform that communicates user instructions for funds transfers to Veridian Credit Union and Compass Bank.