Dwolla Drop-in Components Part lV: Document Upload

After creating a Personal Verified Customer or upgrading an Unverified Customer to a Personal Verified Customer, a government-issued document might be required to verify a customer’s identity.

If you haven’t yet read part one to the drop-in components series, please refer to it for the basic integration steps needed for all the low-code drop-in components available in this release cycle. The document upload drop-in also requires a Personal Verified Customer. Check out Part lll to create a Personal Verified Customer using a drop-in component.

Document Upload

To use this drop-in component, first create a Personal Verified Customer that is ready to upload documents.

When creating a Personal Verified Customer in the sandbox, you must place it in a document status by specifying the firstName parameter as document.

POST https://api-sandbox.dwolla.com/customers
Accept: application/vnd.dwolla.v1.hal+json
Content-Type: application/json
Authorization: Bearer {{token}}

{
    "firstName": "document",
    "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"
}

For additional steps on how to create a Personal Verified Customer, check out our Developer Guide.

The following steps assume you have 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_secret”,
  environment: “sandbox”
})

const tokenRes = await dwolla.post(“client-tokens”, {
  action: "customer.documents.create",
  _links: {
    customer: {
      href: “https://api-sandbox.dwolla.com/customers/{{customerId}}”
    }
  }
});
const token = tokenRes.body.token

2. Configure the Dwolla Object

<script>
   dwolla.configure({
     environment: "sandbox",
     styles: "/main.css",
     token: () => Promise.resolve("udeIdtuwFOSpP59E3TxsQBucU45wYeV6EEVpzP5C9WYiJzo50f"),
     success: (res) => alert(res),
     error: (err) => alert(err)
   });
</script>

<div class="customer">
  <dwolla-document-upload customerId="customerId"></dwolla-document-upload >
</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.