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

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

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

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.