Open in app

Sign in

Write

Sign in

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

Kenny Miesner
Dwolla
Published in
11 min readDec 10, 2020

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 five 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.

  1. Getting Started
  2. Upgrading an Unverified Customer
  3. Create a Personal Verified Customer
  4. Document Upload
  5. Display a Verified Customer’s Balance

Dwolla Drop-in Components 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.

1. Setting Up Dwolla Server Side

npm install dwolla-v2

2. 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.

3. 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:

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.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>

Solutions for Possible Errors

1. 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.

2. 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

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 styles object 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.

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

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

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, create an Unverified Customer first, using our `Create an Unverified Customer` drop-in, by specifying the `firstName`, `lastName` and `email` parameters.

Visit Part I of the `Dwolla Drop-in Component Series` if you haven’t already for more clarity on this.

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 I 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

1. 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.

2. 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

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 styles object 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.

The next component will change an Unverified Customer to a different customer type with additional capabilities.

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

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 III. You will need to complete the integration steps found in Part I 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 I.

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

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 styles object 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.

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

Dwolla Drop-in Components Part IV: Document Upload

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 III 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 I.

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

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 styles object 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 V: Display a Verified Customer’s Balance

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 IV 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 IV in the series, and make sure you have also completed the integration steps from Part I.

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 styles object 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.

Low Code
Developer Tools
Payments
Api Integration

--

--

Kenny Miesner
Dwolla

Written by Kenny Miesner

0 Followers
Writer for

Designer at Dwolla

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams