DEV Community: Dwolla

Dwolla-Cards.js: Styling the Debit Card Form

ShreyaThapa — Wed, 13 Jan 2021 21:08:46 +0000

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!

Dwolla Drop-in Components Part V: Display a Verified Customer’s Balance

Kelly M. — Thu, 17 Dec 2020 17:06:26 +0000

If you’ve made it this far in the series, you should now be familiar with some of the different customer types in the Dwolla ecosystem and know that Verified Customers are the only customer type able to hold a balance. Our final blog in this series will demonstrate how to display that balance to the end user, using the Balance Display drop-in.

If you have not already created a Personal Verified Customer, check out Part lV in the series to create one prior to using this low-code drop-in.

The Display a Verified Customer’s Balance drop-in, can be used for a Personal Verified Customer or a Business Verified Customer. A drop-in for the Business Verified Customer will be included in a future release, and the ‘Balance Display’ drop-in can be used for both verified customer types.

Display a Verified Customer’s Balance

In order to use this component, you must first have a customer that has a balance. You can create this customer by specifying the values to their set keys as in the example below.

POST https://api-sandbox.dwolla.com/customers
Accept: application/vnd.dwolla.v1.hal+json
Content-Type: application/json
Authorization: Bearer {{token}}

{
    "firstName": "verified",
    "lastName": "Customer",
    "email": "verifiedCustomer@email.com",
    "ipAddress": "143.156.7.8",
    "type": "personal",
    "address1": "9876 Million Dollar St",
    "address2": "Apt 5",
    "city": "Des Moines",
    "state": "IA",
    "postalCode": "50265",
    "dateOfBirth": "1980-01-01",
    "ssn": "1234"
}

HTTP/1.1 201 Created
Location: https://api-sandbox.dwolla.com/customers/fc451a7a-ae30-4404-aB95-e3553fcd733f

The following steps assume you have already created a Verified Customer and that this Verified Customer has a balance. If you have not done this yet, please check out Part lV in the series, and make sure you have also completed the integration steps from Part l.

1. Generate a Client Token

POST https://api-sandbox.dwolla.com/client-tokens
Accept: application/vnd.dwolla.v1.hal+json
Content-Type: application/json
Authorization: Bearer {{token}}

{
  "action": "customer.fundingsources.read”,
  "_links": {
    “customer”: {
      “href”: “https://api-sandbox.dwolla.com/customers/{{customerId}}”
    }
  }
}

2. Configure the Dwolla Object

<script src="https://js.dwolla.com/v1/"></script>
<script>
   dwolla.configure({
     environment: "sandbox",
     styles: "/main.css",
     token: () => Promise.resolve("your_token"),
     success: (res) => alert(res),
     error: (err) => alert(err)
   });
</script>

<div class="balance">
  <dwolla-balance-display 
      customerId="9f06c634-8ef0-434f-8230-87e441f6759e"     
  </dwolla-balance-display>
</div>

Styling

By default, the elements within your specified container are responsive to any change and screen size. Dwolla also allows you to customize the styling of your components by providing a stylesheet to dwolla.configure containing the attributes found here.

Try It Out and Join the Discussion

Check out our open-source project and visit our discussion forum for help or questions regarding our drop-in components. This is the first version of our low-code solution, and updates as well as additional components will be released in the future in order to make the integration of our programmable payments infrastructure faster and easier to use.

Dwolla Drop-in Components Part lV: Document Upload

Kelly M. — Thu, 17 Dec 2020 16:50:35 +0000

After creating a Personal Verified Customer or upgrading an Unverified Customer to a Personal Verified Customer, a government-issued document might be required to verify a customer’s identity.

If you haven’t yet read part one to the drop-in components series, please refer to it for the basic integration steps needed for all the low-code drop-in components available in this release cycle. The document upload drop-in also requires a Personal Verified Customer. Check out Part lll to create a Personal Verified Customer using a drop-in component.

Document Upload

To use this drop-in component, first create a Personal Verified Customer that is ready to upload documents.

When creating a Personal Verified Customer in the sandbox, you must place it in a document status by specifying the firstName parameter as document.

POST https://api-sandbox.dwolla.com/customers
Accept: application/vnd.dwolla.v1.hal+json
Content-Type: application/json
Authorization: Bearer {{token}}

{
    "firstName": "document",
    "lastName": "Customer",
    "email": "documentCustomer@email.com",
    "ipAddress": "143.156.7.8",
    "type": "personal",
    "address1": "9876 Million Dollar St",
    "address2": "Apt 5",
    "city": "Des Moines",
    "state": "IA",
    "postalCode": "50265",
    "dateOfBirth": "1980-01-01",
    "ssn": "1234"
}

For additional steps on how to create a Personal Verified Customer, check out our Developer Guide.

The following steps assume you have completed the integration steps found in Part l.

1. Generate a client token

import { Client } from 'dwolla-v2';

const dwolla = new Client({
  key: “your_app_key”,
  secret: “your_secret”,
  environment: “sandbox”
})

const tokenRes = await dwolla.post(“client-tokens”, {
  action: "customer.documents.create",
  _links: {
    customer: {
      href: “https://api-sandbox.dwolla.com/customers/{{customerId}}”
    }
  }
});
const token = tokenRes.body.token

2. Configure the Dwolla Object

<script>
   dwolla.configure({
     environment: "sandbox",
     styles: "/main.css",
     token: () => Promise.resolve("udeIdtuwFOSpP59E3TxsQBucU45wYeV6EEVpzP5C9WYiJzo50f"),
     success: (res) => alert(res),
     error: (err) => alert(err)
   });
</script>

<div class="customer">
  <dwolla-document-upload customerId="customerId"></dwolla-document-upload >
</div>

Styling

Try It Out and Join the Discussion

Dwolla Drop-in Components Part lll: Create a Personal Verified Customer

Kelly M. — Wed, 16 Dec 2020 18:55:35 +0000

So far in the series we’ve learned how to create an Unverified Customer and upgrade an Unverified Customer to a Personal Verified Customer. But what happens when we have a customer that would like to obtain the Personal Verified Customer status on initial onboarding?

In comes the Create a Personal Verified Customer drop-in.

In the Dwolla ecosystem, Personal Verified Customers can both send and receive money, as well as hold a balance. A customer can be onboarded with these capabilities as a Personal Verified Customer without needing to start out as an Unverified Customer who can then upgrade. To learn more about the different customer types, visit our docs on concepts.

If you have not read parts one and two of the “Introducing Dwolla Drop-in Components” series, be sure to check those out prior to continuing with Part lll. You will need to complete the integration steps found in Part l of the series in order to use this low-code drop-in component.

Create a Personal Verified Customer

The following steps assume you have already completed the integration steps found in Part l.

1. Generate a Client Token

import { Client } from “dwolla-v2”

const dwolla = new Client({
  key: “your_app_key”,
  secret: “your_app_secret”,
  environment: “sandbox”
})

dwolla.post(“client-tokens”, {
  action: “customer.create”,
  _links: {
    customer: {
      href: `https://api-sandbox.dwolla.com/customers/${customerId}`
    }
  }
})

POST https://api-sandbox.dwolla.com/client-tokens
Accept: application/vnd.dwolla.v1.hal+json
Content-Type: application/json
Authorization: Bearer {{token}}

{
  "action": "customer.create”,
  "_links": {
    “customer”: {
      “href”: “https://api-sandbox.dwolla.com/customers/{{customerId}}”
    }
  }
}

2. Configure the Dwolla Object

<script>
   dwolla.configure({
     environment: "sandbox",
     styles: "/main.css",
     token: () => Promise.resolve("your_token"),
     success: (res) => alert(res),
     error: (err) => alert(err)
   });
</script>

<div class="customer">
  <dwolla-customer-create 
      terms=”https://www.yourterms.com”
      privacy=”https://www.yourprivacy.com”>       
  </dwolla-customer-create >
</div>

Styling

Try It Out and Join the Discussion

The next component will help you verify a customer’s identity.

Dwolla Drop-in Components Part ll: Upgrading an Unverified Customer

Kelly M. — Tue, 15 Dec 2020 16:11:02 +0000

Because an Unverified Customer has basic capabilities in the Dwolla ecosystem, there may be instances where this customer type will need to be upgraded—like if your Unverified Customer needs to send more than $5,000 per week. Upgrading an Unverified Customer to a Verified Customer will give them the ability to increase their transaction limits. For more information on the difference between an Unverified and Verified Customer, visit our docs on concepts.

Prior to using this low-code drop-in, make sure you have created an Unverified Customer, using our Create an Unverified Customer drop-in, by specifying the firstName, lastName and email parameters.

Visit Part l of the Dwolla Drop-in Component Series if you haven’t already created an Unverified Customer type for more clarity.

POST https://api-sandbox.dwolla.com/customers
Accept: application/vnd.dwolla.v1.hal+json
Content-Type: application/json
Authorization: Bearer {{token}}

{
    "firstName": "Unverified",
    "lastName": "Customer",
    "email": "unverifiedCustomer@email.com"
}

HTTP/1.1 201 Created
Location: https://api-sandbox.dwolla.com/customers/fc451a7a-ae30-4404-aB95-e3553fcd733f

For additional information on creating an Unverified Customer, check out our developer documentation.

Upgrade an Unverified Customer

The steps for this component assume that you have already integrated the Dwolla Drop-in library. Please view the Getting Started section on Part l of this blog series if you have not done so already.

1. Generate a Client Token

POST https://api-sandbox.dwolla.com/client-tokens
Accept: application/vnd.dwolla.v1.hal+json
Content-Type: application/json
Authorization: Bearer {{token}}

{
  "action": "customer.update”,
  "_links": {
    “customer”: {
      “href”: “https://api-sandbox.dwolla.com/customers/{{customerId}}”
    }
  }
}

2. Configure the Dwolla Object

<script src="https://cdn.dwolla.com/v2/dwolla-web.js"></script>
<script>
   dwolla.configure({
     environment: "sandbox",
     styles: "/main.css",
     token: () => Promise.resolve("your_token"),
     success: (res) => alert(res),
     error: (err) => alert(err)
   });
</script>

<div class="customer">
  <dwolla-customer-update 
      customerId="customerId"
      firstName=”firstName”
      lastName=”lastName”
      email=”email”
      terms=”https://www.yourterms.com”
      privacy=”https://www.yourprivacy.com”>       
  </dwolla-customer-update >
</div>

Solutions for Possible Errors

Invalid Token
Make sure that the token generated was copied + pasted correctly. If you are using the sandbox to test out this drop-in component, your token can be generated in the “Applications Tab” found after login. Tokens are valid for 60 minutes.
customerId
A missing or invalid customerId will trigger an error as one is required to upgrade an Unverified Customer. You can find your customerId in the sandbox after customer creation.

Styling

Try It Out and Join the Discussion

Check out the next component Create a Personal Verified Customer.

Dwolla Drop-in Components: Low-Code Components For Integrating a Payment API

Kelly M. — Mon, 14 Dec 2020 16:57:46 +0000

The integration of APIs can be challenging, especially for those in a hurry to launch or new to the API world. Dwolla’s Drop-in Components are prebuilt, low-code components that allow developers to integrate Dwolla’s API faster for a more seamless experience in our programmable payments infrastructure.

These low-code components can give access to Dwolla’s programmable payment infrastructure with minimal lines of code.

Our framework agnostic library 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.

Introducing Dwolla’s Drop-in Components

Our first release of a low-code solution includes six components commonly used by developers integrating our programmable payments infrastructure.

Each drop-in component caters to a specific customer type which is briefly defined in the series. For a more detailed list on the different customer types and their capabilities within the Dwolla ecosystem, please visit our docs on concepts.

Part I: Getting Started

Integration

In our five part blog series, the following integration steps need to be completed prior to attempting implementation of any drop-in. For helpful integration steps in other languages, please visit our software development kit.

Setting Up Dwolla Server Side
npm install dwolla-v2
Generate a One-Time Use Client Token
You can generate this token by setting up a free sandbox account. Here you will be able to obtain a key and secret to be able to generate a one-time-use client token, as well as find customer IDs to create customers and help begin testing the drop-ins.

We have also created a Postman Collection to assist in sandbox testing and getting familiar with our API.
Setup Dwolla on Your Front End
Be sure to add dwolla.js by including the script tag below to the head of your HTML file.

<script type="text/javascript" src="https://cdn.dwolla.com/v2/dwolla-web.js"></script>

Create an Unverified Customer

An Unverified Customer is a customer type that requires a minimal amount of information in order to be created and send funds. This information includes:

First Name
Last Name
Email
Optionally: Business Name for Businesses

To find out more about the abilities and limitations of this customer type, visit our docs on concepts.

After completing the integration steps above, the steps to create an Unverified Customer are as follows:

Generate a Client Token

POST https://api-sandbox.dwolla.com/client-tokens
Accept: application/vnd.dwolla.v1.hal+json
Content-Type: application/json
Authorization: Bearer {{token}}

{
  "action": "customer.create”,
  "_links": {
    “customer”: {
      “href”: “https://api-sandbox.dwolla.com/customers/{{customerId}}”
    }
  }
}

Configure the Dwolla Object

<script>
   dwolla.configure({
     environment: "sandbox",
     styles: "/main.css",
     token: () => Promise.resolve("your_token"),
     success: (res) => alert(res),
     error: (err) => alert(err)
   });
</script>

<div class="customer">
  <dwolla-customer-create 
      terms=”https://www.yourterms.com”
      privacy=”https://www.yourprivacy.com”>       
  </dwolla-customer-create >
</div>

Solutions for Possible Errors

Duplicate Email

If you are unable to “Agree & Continue” after your drop-in has successfully loaded, this could be an issue of a duplicate email in the system. Try inputting a different email for successful testing and usage of this drop-in.
Invalid Token

Make sure that the token generated was copied and pasted correctly. If you are using the sandbox to test out this drop-in component, your token can be generated in the “Applications Tab” found after login. Tokens are valid for 60 minutes.

Styling

Try It Out and Join the Discussion

Check out our open-source project and visit our discussion forum for help or questions regarding our drop-in components. This is the first version of our low-code solution and updates as well as additional components will be released in the future in order to make the integration of our programmable payments infrastructure faster and easier to use.

Next, see how you’ll be able to change an Unverified Customer to a different customer type with additional capabilities.

Jumpstart your API onboarding using Postman

Spencer Hunter — Tue, 02 Jul 2019 20:27:07 +0000

Postman Background

Postman is the perfect tool for quickly testing any API, and continues to be my go-to for sending and inspecting calls to the Dwolla API. Postman has grown over the last several years to offer an abundance of features to support every stage of the API lifecycle. Whether you are an API provider (e.g. Dwolla) or an API consumer (e.g. Dwolla client), there are features that can help with creating/designing APIs as well as testing and debugging. Postman offers an easy-to-use user interface that doesn’t require you to read further documentation to understand. It just works.

At Dwolla, we use Postman across engineering teams to quickly test new features and functionalities as they are rolled out to the API. Since we offer a white-labeled platform by design, it’s often used during internal stakeholder demos to represent the interface displayed to clients to help them visualize how new functionality could be consumed. My team, Developer Relations, offers dedicated developer support to all Dwolla clients. Using Slack we interact directly with developers integrating with the Dwolla API, providing one-on-one collaborative support. Postman is used as a key debugging tool used to help third-party developers work through any roadblocks they may encounter in the integration process.

There are many ways we use Postman internally, but what we value most is how it can be used to help onboard external developers!

Jumpstart Onboarding to the Dwolla API

There are many things that go into offering a quality experience for developers integrating with the Dwolla API. To name a few: Simplified onboarding, clear documentation, a well-designed API, and tools that help you integrate the API quickly and efficiently. Postman is one of these tools that can be used by developers to get to know an API more closely. A while back, I wrote a post about why you should use Postman and published a shared collection of all available calls in the Dwolla API. The intent was to have a holistic view of what you can do with the Dwolla API and jump right in to start making API calls. The collection includes required request details for all endpoints so you don’t have to spend time fiddling around with things like headers and knowing the structure of a certain POST request body.

The Postman collection caters to developers of all skill levels. If you’re a beginner looking to understand how APIs work, the collection doesn’t require you to tweak much out of the box to see how the API behaves. If you’re an experienced developer looking to roll your own API wrapper, the collection can serve as a spec to help define how to implement each method.

In this post, I’m extending the use of collections further and building out a workflow using Postman’s collection runner. Sign up for a Sandbox account, obtain your API keys and see how easy it is to use the Dwolla ACH payment API to send money!

Try the Send Money Collection Runner

Dwolla has various payment workflows that are tailored to each business’s unique use case. Each workflow contains a set of steps that are required prior to actually sending through a payment, which can include tasks like: creation of a Customer record, addition of a bank account and optional bank verification. The Send Money workflow walks through sending a payout, triggering requests along the way to create a receiving Customer record and initiate a payment. Using Postman’s collection runner we can build a workflow to run requests in a sequential order to match this specific payment flow.

Follow these steps to setup the Send Money collection runner:

Click the ‘run with Postman’ button and select Open with to import the collection
Click the ‘eye’ icon to edit environment variables in the DwollaSendMoney.template
Once your initial variables are updated, you’re ready to run the collection!

Note: If you haven’t already, sign up for a sandbox account to obtain your client_id and client_secret. You’ll want to set your client_id and client_secret in both initial and current value.

Verify the Environment is set and click Run

Needless to say, I’m a big fan of Postman and am excited to see its progression in the API space. Questions about using Postman or how to integrate with the Dwolla API? Please don’t hesitate to reach out!