Out With the Old, In With the New: Enhancing Drop-in Components
In 2016, we created a client-side JavaScript library called dwolla.js, which provided functions to securely transmit sensitive data (bank account and routing number) to Dwolla without the data passing through your server. This library contained two functions:
- Creating a bank account using Instant Account Verification (deprecated 12/31/2022 ) via a bank auth experience.
- Submitting bank details (AN, RN, type) to attach a bank account to a Customer Record.
It abstracted away a piece of the overall Dwolla integration and contained features such as built-in field validation, as well as a pre-built experience for allowing our client’s end users to seamlessly connect their bank account.
At the end of 2020, we released a new UI web components library dwolla-web.js, which aims to reduce the overall development time with the Dwolla API. These Drop-in Components can be used as isolated functions or joined together to construct common user flows—while still giving developers and companies the flexibility to control their own branding via our white-labeled API.
Over the past few years we’ve seen increased adoption of this library as well as positive feedback that it has enhanced the overall developer experience. The Drop-in Components library contains a number of benefits over our legacy dwolla.js library, and has become the de facto standard client-side JavaScript library. We’ve made the decision to focus our efforts on dwolla-web.js which means that we’ll be retiring our legacy dwolla.js library on July 31, 2023. (Don’t worry, we’re here to help you transition from dwolla.js to dwolla-web.js and have created a migration guide that walks you through the process!)
Over the past few months we’ve been hard at work moving dwolla.js functionality to the dwolla-web.js Drop-in Components library. We’re excited to announce that we’ve released two new Drop-in Components in v2.2.0 along with React bindings for all components!
Create a Customer Funding Source Component
The <dwolla-funding-source-create> drop-in component provides a basic form for collecting and submitting an end user’s bank details to Dwolla directly from the browser. In addition to submitting bank details, you can specify an optional attribute if you want the library to handle the initiation of micro-deposits for account verification. The component can be custom styled to match the look and feel of your web app, and contains basic success and error messages that are displayed within the component. Currently, the component relies on the API to handle errors after submission, but we’re evaluating supporting input field validation in a future version. Learn more in our docs!
Verify Micro-Deposits Component
The <dwolla-micro-deposits-verify> drop-in component provides form fields for collecting and submitting micro-deposit amounts to Dwolla directly from the browser to complete account verification. Like the Funding Source Create component, the micro-deposits verify component can be custom styled to match the look and feel of your web app, and contains basic success and error messages that are displayed within the component. Currently, the component relies on the API to handle errors after submission, but we’re evaluating supporting input field validation in a future version. Learn more in our docs!
React Bindings for Drop-in Components
We’re excited to announce React bindings for all of Dwolla’s Drop-in Components! This has been a highly requested feature from developers within our community and will be an officially maintained library from the Dwolla team moving forward. A few items that are noteworthy:
- Third party libraries are usually imported into React apps using package managers like NPM. However, importing the dwolla-web.js library into a React app had to be done by loading it via a CDN script, which is something that historically tripped developers up in our experience. Now developers can easily do so with the custom React hook -
useDwollaWebavailable in the react-drop-ins npm package. - Developers can manage versioning with the react-drop-ins package with their respective package manager to stay up to date with newer versions of dwolla-web.js.
- Secondary documentation is available via Storybook.
- Overview of all available components
- Live example of what the UI looks like
- Code examples for easy/quick implementation
As we roll out new Drop-in Components, we’ll continue to add support within the react-drop-ins project.
Try Them Out and Join the Discussion
Check out our React bindings open-source project and visit our documentation for help or questions regarding our Drop-in Components. We’d love to hear your thoughts and feedback on the Drop-in Components library and the enhancements we just released. If you have any questions on the Drop-in Components release, or run into issues during the migration to dwolla-web.js, please don’t hesitate to reach out to us here on our discussion forum!