We recently introduced a new payment modality at Dwolla that enables businesses to pay their users directly into their debit cards 24/7/365. Our Push-to-Debit product provides Dwolla clients with a fast and secure way of sending funds to users outside of relying solely on ACH. Transactions created using Push-to-Debit can be completed in near real-time.
A major part of Push-to-Debit functionality is the Dwolla-cards.js library that enables an end-user to add a payment account using debit card information. Dwolla-cards.js is a JavaScript library that leverages an iFrame and can be easily integrated into web or mobile applications via a WebView to collect user debit card information and keep the data off your servers.
Whether you are a junior front-end developer or someone with very minimal programming experience, this blog is a primer for integrating Dwolla’s Push-to-Debit product into your application. Start with the Dwolla-cards.js developer documentation to streamline your integration.
What makes dwolla-cards.js unique?
Dwolla-cards.js seamlessly abstracts away the complexity involved in a direct integration with the card network, allowing your users to stay within your application to authenticate and attach their debit card. Our tokenized push-to-debit solution prevents businesses from storing sensitive details such as a card number. By integrating the dwolla-cards.js library into your application, your business won’t have to come in contact with or store any sensitive card information on your servers.
Simply fetch and provide a card-funding-sources-token to authenticate the “add a debit card” request. Our library will programmatically take care of the rest!
Show Me an Example!
Now, you may be thinking, “I like the idea of using iFrames to ensure that I don’t come in contact with my user’s sensitive information, but does that also mean that I have to host a black box of unstyled and outdated HTML elements blighting my otherwise pristine site?”
The answer to that question is no, you don’t have to succumb to adding an unstyled iFrame in the middle of your app’s UI!
Dwolla-cards.js comes with a high degree of customizability to style the “add a debit card form” according to the look and feel of your app.
The form fields that dwolla-cards.js uses for collecting card information are rendered using iFrames, meaning that there are certain styles you can’t apply directly to these elements. However, Dwolla-cards.js allows you to specify several style related options that are passed through to these form fields and the results are impressive!
Dwolla-cards.js is built in a way that provides IDs to each of the fields that are included on the form for adding a card. This allows you as the developer to apply styles directly to these individual IDs using CSS. You can further style the properties within the iFrame elements, albeit to a certain extent, which you wouldn’t normally have access to style. You can customize the fontFamily, fontSize, fontWeight and color for placeholder text, successfully validated text and invalid text within the iFrames.
Another problem that iFrames are somewhat notorious for is slow load times. This should be an easy fix! You could pre-fetch the iFrame using server-side rendering to mask the slow loading. If that isn’t available, you can always load the page with the iFrame container hidden, while a loading animation or spinner that matches your site’s design is displayed until the form has finished loading.
As you can see, the possibilities are endless. Dwolla-cards.js is flexible enough to match almost any site design and because it encapsulates both the integration with the Dwolla API and the Finix-JS library, you can have it up and running in well under 100 lines of code.
Still, this isn’t quite as fast as an actual Push-to-Debit transaction, but it’s close!
Top comments (0)