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 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": "[e-mail]",
    "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.