DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Kelly M. for Dwolla

Posted on

Dwolla Drop-in Components: Low-Code Components For Integrating a Payment API

The integration of APIs can be challenging, especially for those in a hurry to launch or new to the API world. Dwolla’s Drop-in Components are prebuilt, low-code components that allow developers to integrate Dwolla’s API faster for a more seamless experience in our programmable payments infrastructure.

These low-code components can give access to Dwolla’s programmable payment infrastructure with minimal lines of code.

Our framework agnostic library can be used as isolated functions or joined together to construct common user flowsβ€”while still giving developers and companies the flexibility to control their own branding via our white-labeled API.

Introducing Dwolla’s Drop-in Components

Our first release of a low-code solution includes six components commonly used by developers integrating our programmable payments infrastructure.

Each drop-in component caters to a specific customer type which is briefly defined in the series. For a more detailed list on the different customer types and their capabilities within the Dwolla ecosystem, please visit our docs on concepts.

Part I: Getting Started

Integration

In our five part blog series, the following integration steps need to be completed prior to attempting implementation of any drop-in. For helpful integration steps in other languages, please visit our software development kit.

  1. Setting Up Dwolla Server Side
    npm install dwolla-v2

  2. Generate a One-Time Use Client Token
    You can generate this token by setting up a free sandbox account. Here you will be able to obtain a key and secret to be able to generate a one-time-use client token, as well as find customer IDs to create customers and help begin testing the drop-ins.

    We have also created a Postman Collection to assist in sandbox testing and getting familiar with our API.

  3. Setup Dwolla on Your Front End
    Be sure to add dwolla.js by including the script tag below to the head of your HTML file.

<script type="text/javascript" src="https://cdn.dwolla.com/v2/dwolla-web.js"></script>

Create an Unverified Customer

Alt Text

An Unverified Customer is a customer type that requires a minimal amount of information in order to be created and send funds. This information includes:

  • First Name
  • Last Name
  • Email
  • Optionally: Business Name for Businesses

To find out more about the abilities and limitations of this customer type, visit our docs on concepts.

After completing the integration steps above, the steps to create an Unverified Customer are as follows:

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.create”,
  "_links": {
    β€œcustomer”: {
      β€œhref”: β€œhttps://api-sandbox.dwolla.com/customers/{{customerId}}”
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Solutions for Possible Errors

  1. Duplicate Email

    If you are unable to β€œAgree & Continue” after your drop-in has successfully loaded, this could be an issue of a duplicate email in the system. Try inputting a different email for successful testing and usage of this drop-in.

  2. Invalid Token

    Make sure that the token generated was copied and pasted correctly. If you are using the sandbox to test out this drop-in component, your token can be generated in the β€œApplications Tab” found after login. Tokens are valid for 60 minutes.

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.

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.

Next, see how you’ll be able to change an Unverified Customer to a different customer type with additional capabilities.

Top comments (0)

🌚 Life is too short to browse without dark mode