Dwolla Drop-in Components Part lll: 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 lll. You will need to complete the integration steps found in Part l 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 l.

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

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