Once you’ve obtained a card funding source token, the next step is to complete the client-side implementation which starts with including dwolla-cards.js on the page you want the container to load and configuring the dwolla-cards.js library.
Begin the client-side implementation by including dwolla-cards.js in the HEAD of your HTML page.
<head>
<script src="https://cdn-b.dwolla.com/1/dwolla-cards.js"></script>
</head>
Configuration options are available for utilizing dwolla-cards.js in both our sandbox and production environments. Configuration of an environment should take place after you have included the dwolla-cards.js library.
// Sandbox
dwolla.configure("sandbox");
// Production
dwolla.configure("prod");
There are a subset of options available for customizing the add a debit card
form. The function dwolla.cards.start() takes in three arguments which includes the name of the id attribute which specifies a unique id for the HTML element, the cards funding sources token and options available for styling and customization of the form.
add a debit card
flow will render.stylesheets
: represents an array list of stylesheets to load IAV styles. styles
: Contains keys: default, success, failure, and buttonText. Includes customization of CSS properties such as text, color, padding, border, and more.For this example, you’ll pass the token you received from the previous step into ‘token goes here’ below. This input box can be a ‘hidden’ input. The only requirement is that there is an input with id=”‘authTokenInput” that has the generated token assigned to its value. It will be used in the JavaScript function dwolla.cards.start
. This token will be used to authenticate the request asking Dwolla to render the add a debit card flow.
Once your customer clicks “Add Card”, your application will call dwolla.cards.start() passing in the following arguments:
<html><head>
<script type="text/javascript" src="https://cdn-b.dwolla.com/1/dwolla-cards.js"></script>
</head><body>
<div class="action">
<span>Add a payment card so that you can start doing something today!</span>
<div style="padding-bottom: 25px">
<input type="text" placeholder="funding source token" id="authTokenInput"
value="token goes here">
<input type="button" id="startButton" value="Add Card">
<div id="cardContainer"></div>
</div>
<div id="result"><span>Card has been added!</span></div>
<script type="text/javascript">
dwolla.configure('sandbox');
document.getElementById("startButton").addEventListener("click", e => {
e.preventDefault();
const token = document.getElementById("authTokenInput").value;
dwolla.cards.start('cardContainer', token, options)((err, res) => {
console.log(err);
console.log(res);
document.getElementById('cardContainer').style.display = 'none';
document.getElementById('result').style.display = 'block';
});
});
</script>
</div>
<pre id="preview"></pre>
<pre id="bin"></pre>
</div>
</body></html>
When you invoke the function to create the tokenized fields via dwolla-cards.js, you can pass in style options for placeholder, valid and invalid text. From here, you can style text-specific properties such as color, font-family, font-style and font-weight. These styles are applied to all fields.
Failure text is used for the format validation errors for the following:
Success text applies to format validation for the following:
Note: Color cannot be specified for the placeholder text.
You can also link an external style sheet to the form. While you can’t adjust the font-specific properties of the placeholder, success or failure text via an external stylesheet, you can style container-specific properties.
Basic container-specific properties include the following:
const options = {
stylesheets: ["styles.css"],
styles: {
// most CSS properties can be supplied to these objects
default: {
// placeholder text
fontFamily: fontFamily,
fontSize: fontSize,
fontWeight: "normal",
},
success: {
// valid input text
color: "#1176BC",
fontFamily: fontFamily,
fontSize: fontSize,
fontWeight: "bold",
},
error: {
// invalid input text
color: "#d9534f",
fontFamily: fontFamily,
fontSize: fontSize,
fontWeight: "bold",
},
buttonText: "Go!",
},
};
The card name input isn’t a tokenized field, so it doesn’t apply font styles from the options. You will need to style this field manually to match the properties applied from the options and external CSS. You’ll also need to supply the submit button and you’re responsible for wiring it up to the dwolla-cards.js call.
To the left of the card number is an input. Once the card number is entered, it will change to the card brand name.
You can style this in your stylesheet via #brand. Key properties that can be adjusted include the following:
Note: All of the inputs share a class name and each field has its own id.
Use sandbox environment to test API requests.
Dwolla, Inc. is the operator of a software platform that communicates user instructions for funds transfers to our financial institution partners.
Dwolla is an agent of Veridian Credit Union. All ACH and Wire transfers are performed by Veridian Credit Union. Your Dwolla Balance, if any, is held in one or more pooled holding accounts held by Veridian Credit Union. These funds may not be eligible for share insurance by the National Credit Union Share Insurance Fund.
Sponsorship and Settlement of Push-to-Debit payment services provided by MetaBank®, N.A.
Push-to-Debit payments are typically available within 30 minutes.
Real-Time Payments are performed by Cross River Bank, which holds funds on behalf of the Receiver of such transactions in one or more pooled custodial accounts. These funds are not subject to FDIC pass-through deposit insurance.