Dwolla Developers Logo
Back
Guides
  • Getting Started
    Testing in the Sandbox
    Generate an OAuth Access Token
    Send Money to Users
    Receive Money from Users
    Transfer Money Between Users
    Transfer Money Me-to-Me
    Building With Drop-in Components
    OverviewStep 1: Setup and configurationStep 2: Generate a client tokenStep 3: Using a drop-in
  • Customers
    Create a Business Verified Customer
    Create a Personal Verified Customer
  • Funding Sources
    Add a Debit Card Using Dwolla-cards.js
    Add a Bank Using Dwolla.js
    Add a Bank Using Dwolla.js + IAV
    Verify Bank with Micro-deposits
    Add Bank via Dwolla + Plaid Integration
  • Webhooks
    Create a Webhook Subscription
API DocsOpen in new tabChangelog
Get API Keys
API DocsOpen in new tabChangelog
JavaScript
Get API Keys

Step 3: Using a drop-in #

Next, you’ll create a custom HTML container that the drop-in component will render in on page load. A drop-in component will be rendered when the dwolla-web.js library is initialized using dwolla.configure() (referenced below).

Configure dwolla-web.js #

Configuration of the dwolla object includes: your generated client-token or tokenUrl, environment, optional styles, along with success and error overrides.

Configure options object

ParameterTypeDescriptionenvironmentstringAcceptable values of: sandbox or productionstylesstringOptional. A relative or absolute URL linking to a hosted stylesheet containing component styles.tokenfunctionA JSON object that contains a key value pair for token - a generated single-use client-token.
Example usage: token: (req) => Promise.resolve({token: 'token123abcd'})tokenUrlfunctionA URL pointing to a server-side endpoint that can be used to generate client-token.successfunctionA function that gets called upon a successful request from the Component.errorfunctionA function that gets called when an error occurs in the Component.
javascript
<script>
    dwolla.configure({
        environment: "sandbox",
        styles: "/styles/update-custom.css",
        tokenUrl: "/tokenUrl",
        success: (res) => Promise.resolve(res),
        error: (err) => Promise.resolve(err),
    });
</script>

Component Styles #

Dwolla provides a list of CSS classes available for styling certain elements of the component. These elements can be customized to match the look and feel of your application and are styled by passing in a custom stylesheet when configuring the dwolla-web client library. By default, the elements within your specified container are responsive to any change in screen size. For a full list of supported CSS classes available for each component, view our Concept article.

Using Drop-in Components #

It's important to note that with the exception of a “Create a Customer” component like the one found below, all components require a Customer ID to be passed into a customerId element in order to initialize the component. This Customer ID should come from your back-end server when generating a client-token for an end-user/Customer and can optionally be stored in a session or cookie.

html
<div class="customer">
  <dwolla-business-vcr terms="www.yourterms.com" privacy="www.yourprivacy.com">
  </dwolla-business-vcr>
</div>

When loading the page containing the component, you should see the following:

Business Verified Customer Drop-in Component

Handle component success and errors #

Upon submission of form components, a user facing message will be displayed to the end user on success or error. These user facing messages can be styled via custom div and span CSS classes corresponding to:

  • dwolla-success and dwolla-success-message
  • dwolla-error and dwolla-error-message

On ‘success’ the creation of a new resource will result in a JSON response that’s returned with a location key:value pair including a link to the created resource. For example:

{ location: https://api.dwolla.com/documents/{id} }

Updates to an existing resource will result in the actual JSON response which corresponds to the action that occurred.

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.