Dwolla Developers Logo
Back
Concepts
API DocsOpen in new tabChangelog
Get API Keys
API DocsOpen in new tabChangelog
JavaScript
Get API Keys

UI Components Library #

Dwolla’s UI components library allows developers to leverage isolated functions or build connected flows in their web applications, which expedites the integration process with the Dwolla Platform. Each component within this library includes HTML, CSS and JavaScript that developers can drop-in and customize to fit the look and feel of their application.

The library comes with a collection of low-code components that solve for a variety of functions and flows including: create a customer, document upload, balance display, as well as a connected flow for accepting incoming payments from a user.

Each component contains built-in features such as responsive design, custom styling, error handling and more. These components allow developers to ship more with fewer lines of code— while improving readability and maintainability of their application’s code.

As the library continues to grow, Dwolla will evaluate adding support for other frameworks and languages based on feedback from the community.

Workflow #

Use of Dwolla components requires both client-side and server-side interaction between your application and Dwolla. A unique “client token” is generated with limited permissions to be used in the components library to authenticate requests to Dwolla.

A quick overview of the steps involved:

  1. On your application’s front-end, the Dwolla components library is instantiated and configured. One or many components are dropped into the web page where they will be rendered.
  2. A request is sent from your front-end to your back-end server to generate a client-token. Using a server-side SDK, you’ll specify the “action” needed for the component and the unique Customer ID that represents the end user performing the action.
  3. Your server sends the generated client token back to your front-end which is used by the components library to authenticate the client-side request to Dwolla.
  4. Your end user interacts with the Dwolla Component, either directly via submission of information in a form (e.g. upgrade customer), or indirectly by viewing data (e.g. balance display).

Drop-in Component Example #

Dwolla’s Drop-in UI Components are customizable to match the look and feel of your application down to the individual HTML element by applying styles via custom CSS classes. Preview the create an Unverified Customer component below, or refer to the drop-ins examples repo to view a list of all drop-in component examples.

Upgrade a Customer Drop-in Component

Supported Components #

Dwolla's UI components library contains a variety of supported components that represent isolated functions or connected flows. Each component requires a unique “client-token” and Customer ID for the end-user that is performing the action in your web application. This section outlines the complete list of supported components which includes: the component name, css classes for customization, and the required client-token action.

For more information on integrating drop-in components, reference our Guide which walks through how to use drop-in components in full detail.

Create a Receive Only Customer #

The dwolla-customer-create component is used to display a form to collect the required information needed to create a receive only customer with type = "receive-only". Receive Only customers are restriced to a payouts only funds flow. To learn more about this customer type, visit our docs on concepts.

Create client-token action: customer.create

CSS Classes for Create a Receive Only Customer
css
/* Available css classes for customization*/
dwolla-customer-create,
dwolla-input-container,
dwolla-customer-input,
dwolla-customer-firstName,
dwolla-customer-lastName,
dwolla-customer-email,
dwolla-customer-tos,
dwolla-customer-checkbox,
dwolla-customer-text,
dwolla-submit,
dwolla-customer-submit,
dwolla-success,
dwolla-success-message,
dwolla-error,
dwolla-error-message
Create a Customer Drop-in Component

Create an Unverified Customer #

The dwolla-customer-create component is used to display a form to collect the required information needed to create an Unverified Customer. An Unverified Customer is a customer type that requires a minimal amount of information in order to be created. 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.

Create client-token action: customer.create

CSS Classes for Create an Unverified Customer
css
/* Available css classes for customization*/
dwolla-customer-create,
dwolla-input-container,
dwolla-customer-input,
dwolla-customer-firstName,
dwolla-customer-lastName,
dwolla-customer-email,
dwolla-customer-tos,
dwolla-customer-checkbox,
dwolla-customer-text,
dwolla-submit,
dwolla-customer-submit,
dwolla-success,o
dwolla-success-message,
dwolla-error,
dwolla-error-message
Example Create an Unverified Customer UI
Create a Customer Drop-in Component

Upgrade an Unverified Customer #

The dwolla-customer-update component is used to upgrade an Unverified Customer into a Personal Verified Customer. 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.

Create client-token action: customer.update

CSS Classes for Upgrade an Unverified Customer
css
/* Available css classes for customization*/
dwolla-customer-update,
dwolla-input-container,
dwolla-customer-input,
dwolla-customer-firstName,
dwolla-customer-lastName,
dwolla-customer-email,
dwolla-customer-address1,
dwolla-customer-address2,
dwolla-customer-city,
dwolla-customer-state,
dwolla-customer-postal,
dwolla-customer-dob,
dwolla-customer-ssn,
dwolla-customer-tos,
dwolla-customer-checkbox,
dwolla-customer-text,
dwolla-submit,
dwolla-customer-submit,
dwolla-success,
dwolla-success-message,
dwolla-error,
dwolla-error-message
Example Upgrade an Unverified Customer UI
Upgrade an Unverified Customer Drop-in Component

Create a Personal Verified Customer #

The dwolla-personal-vcr component is used to display a form to collect the required information needed to create an Personal Verified Customer. Personal Verified Customers can both send and receive funds, as well as hold a Dwolla 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.

Create client-token action: customer.create

CSS Classes for Create a Personal Verified Customer
css
/* Available css classes for customization*/
dwolla-input-container,
dwolla-customer-input,
dwolla-customer-firstName,
dwolla-customer-lastName,
dwolla-customer-email,
dwolla-customer-address1,
dwolla-customer-address2,
dwolla-customer-city,
dwolla-customer-state,
dwolla-customer-postal,
dwolla-customer-dob,
dwolla-customer-ssn,
dwolla-customer-tos,
dwolla-customer-checkbox,
dwolla-customer-text,
dwolla-submit,
dwolla-vcr-submit,
dwolla-success,
dwolla-success-message,
dwolla-error,
dwolla-error-message,
dwolla-info,
dwolla-info-message
Example Create a Personal Verified Customer UI
Create a Personal Verified Customer Drop-in Component

Create a Business Verified Customer #

The dwolla-business-vcr component is used to display a form to collect the required information needed to create a Business Verified Customer. Business Verified Customers can both send and receive funds, hold a Dwolla Balance, and have a tranfer limit of $10,000 per transfer. To learn more about the different customer types, visit our docs on concepts.

Create client-token action: customer.create

CSS Classes for Create a Business Verified Customer
css
/* Available css classes for customization*/
dwolla-input-container,
dwolla-customer-input,
dwolla-half-button,
dwolla-half-button-secondary,
dwolla-customer-firstName,
dwolla-customer-lastName,
dwolla-customer-email,
dwolla-customer-address1,
dwolla-customer-address2,
dwolla-customer-city,
dwolla-customer-state,
dwolla-customer-country,
dwolla-customer-postal,
dwolla-customer-dob,
dwolla-customer-ssn,
dwolla-customer-tos,
dwolla-customer-checkbox,
dwolla-customer-text,
dwolla-submit,
dwolla-vcr-submit,
dwolla-success,
dwolla-success-message,
dwolla-error,
dwolla-error-message,
dwolla-info,
dwolla-info-message,
dwolla-document-type,
dwolla-document-type-select,
dwolla-document-type-select-label,
dwolla-document-choose,
dwolla-document-chooser,
dwolla-document-chooser-label,
dwolla-file-name,
dwolla-document-name-display,
dwolla-document-name-span,
dwolla-document-description,
dwolla-document-label,
dwolla-document-submit
dwolla-customer-businessIndustry,
dwolla-customer-businessClassification,
dwolla-customer-businessType,
tooltip,
tooltip.tooltiptext,
tooltip-shift,

Example Create a Business Verified Customer UI
Create a Business Verified Customer Drop-in Component

Create Beneficial Owners #

The dwolla-beneficial-owners component is used to display a form to collect the required information needed to add Beneficial Owners after the creation of a Business Verified Customer. This component can be paired with the dwolla-business-vcr component or be used in isolation. Business Verified Customers can both send and receive funds, hold a Dwolla Balance, and have a tranfer limit of $10,000 per transfer. To learn more about the different customer types, visit our docs on concepts.

Create client-token possible actions: beneficialowners.create, beneficialownership.read, customer.read, beneficialownership.certify, beneficialowners.update, beneficialowner.documents.create, beneficialowner.delete

CSS Classes for Add Beneficial Owners
css
/* Available css classes for customization*/
dwolla-bo-submit,
dwolla-document-submit,
dwolla-customer-state,
dwolla-customer-input,
dwolla-customer-country,
dwolla-width-1,
dwolla-width-2,
dwolla-width-3,
dwolla-document-label,
dwolla-document-type,
dwolla-document-name,
dwolla-document-name-display,
dwolla-document-submit,
dwolla-document-choose,
dwolla-document-chooser,
dwolla-document-description,
dwolla-span-container,
dwolla-file-name,
dwolla-half-button,
dwolla-half-button-secondary,
dwolla-owner-name,
dwolla-owner-delete,
dwolla-owner-header,
dwolla-owners-summary-container,
dwolla-owners-empty,
dwolla-add-owners-button,
dwolla-owner,
dwolla-owner-status,
dwolla-owner-status-verified,
dwolla-owner-status-incomplete,
dwolla-owner-status-document,
dwolla-button-label-container-nb,
dwolla-button-label-container,
dwolla-link,
dwolla-customer-tos,
dwolla-customer-checkbox,
dwolla-customer-text,
dwolla-text-container,
dwolla-input-container,
dwolla-loading
Example Add Beneficial Owners UI
Add Beneficial Owners Drop-in Component

Document upload #

The dwolla-document-upload component can be used if a Verified Customer or a Beneficial Owner has a document status and needs to upload an identifying document to complete verification of their account. A government-issued document might be required to verify an individual or business' identity.

Create client-token action: customer.documents.create or beneficialowner.documents.create

CSS Classes for Upload a Document
css
/* Available css classes for customization*/
dwolla-document-type,
dwolla-document-type-select,
dwolla-document-type-select-label,
dwolla-document-chooser,
dwolla-document-chooser-label,
dwolla-document-name,
dwolla-document-name-span,
dwolla-document-submit
Example Document Upload UI
Document Upload Drop-in Component

Display a Verified Customer's Balance #

The dwolla-balance-display component can be used for any customer who already has a Dwolla balance that needs to be displayed. This can be a Personal Verified Customer or a Business Verified Customer.

Create client-token action: customer.fundingsources.read

CSS Classes for Create a Personal Verified Customer
css
/* Available css classes for customization*/
dwolla-balance,
dwolla-balance-display,
dwolla-error
Example Balance Display UI
Blance Display Drop-in Component

Pay-In #

The Pay-In component can be used when transferring from a Customer's verified funding source into your own Dwolla Client funding source.

In order to utilize this component, you will first need to have a Customer with a verified funding source. This customer can be of type Unverified, Personal or Business Verified Customer.

In order to add a funding source and verify it, you can:

Create client-token action: customer.transfers.send

CSS Classes for Pay-In
css
/* Available css classes for customization*/
dwolla-payin,
dwolla-payin-submit,
dwolla-amount,
dwolla-amount-label,
dwolla-amount-display
wolla-funding-sources-label,
dwolla-funding-sources,
dwolla-payin-title
Example Balance Display UI
Pay In Drop-in Component

Next steps #

Leveraging Dwolla’s UI Components library is a great way to expedite your integration with the Dwolla Platform by limiting the amount of custom code that you would be required to write.

Get started building with drop-in components by checking out the getting started guide and the API Reference documentation.

Test in the Sandbox for free today.

Use sandbox environment to test API requests.

Get API Keys
2021 All Rights Reserved

Dwolla

  • About
  • Blog
  • Pricing
  • Contact Sales
  • Terms of Service
  • Privacy Policy
Financial institutions play an important role in our network.

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.