Step 2: Generate a client token #

Regardless of which drop-in component is being used by your application, the dwolla-web.js JavaScript library will require a unique “client-token” or a server side route that is used to generate a client token to be passed in on configuration. A client token contains granular permissions and is scoped to the end user/Customer that is performing the action within your web application.

Client-tokens are single-use tokens that are valid for up to 1 hour after being generated. More than one client token can be generated and be valid at one time.

Token URL vs Token Configuration #

A majority of the drop-in components have multiple isolated functions connected together into a single user flow. Throughout the flow of a component, the dwolla-web library will make multiple HTTP calls to an endpoint you have set up on your server side for fetching client-tokens as needed.

In the following sections we'll outline the difference between the two options available in dwolla-web.js for retrieving client-tokens; using either the tokenUrl or token configuration.

Using Token URL #

Using the tokenUrl option when configuring dwolla-web.js requires creating a server-side endpoint that can be called by the library when an action needs to be performed within a flow component. Establishing an endpoint enables the ability for the component to fetch client-tokens on-demand in order to render the appropriate UI. The server-side endpoint should act as a pass-through by taking in the request body required in order to make the appropriate call to the '/client-tokens' endpoint. Upon success, the '/client-tokens' endpoint will return a response body including a "token" string value. The HTTP response that is returned to the client-side is expecting an object in the format of {token: 'Token string value'}. More information on configuration of dwolla-web.js can be found in step 3 of this guide.

Example of setting up a token endpoint server side using Express

In this example we’re using Express.js to set up a token URL which will be called by dwolla-web.js when the component that’s being used needs to generate a client token that’s being performed in the flow.

/**
 * Using Dwolla Node.js SDK - https://github.com/Dwolla/dwolla-v2-node
 * Refer to Step 1 on setup and configuration of Dwolla SDK
 */

app.post("/tokenUrl", function (req, res) {
  generateClientTokenWithBody(req.body).then((clientTokenRes) => {
    console.log(clientTokenRes);
    res.send({ token: clientTokenRes.token });
  });
});

function generateClientTokenWithBody(body) {
  const url = `/client-tokens`;

  return dwolla
    .post(url, body)
    .then((response) => {
      return response.body;
    })
    .catch((error) => {
      return error;
    });
}

Example configuration using tokenUrl

<script>
  dwolla.configure({
      environment: "sandbox",
      // styles: "/styles/create-custom.css",
      success: (res) => Promise.resolve(),
      error: (err) => Promise.resolve(),
      tokenUrl: "/tokenUrl",
  });
</script>

Using Token #

Using the token option when configuring the dwolla-web.js library allows you to create a function that calls your server-side tokenUrl endpoint (as described above). The function you create takes in two arguments, 1) the request body that is required to make the '/client-tokens' API request; and 2) a JSON object that includes key:value pairs for specifying custom headers. When an action needs to be performed within a flow component, the dwolla-web.js library will call your custom function and dynamically pass in a request body as the first argument. The server-side endpoint should act as a pass-through by taking in the request body required in order to make the appropriate call to the '/client-tokens' endpoint. Upon success, the '/client-tokens' endpoint will return a response body including a "token" string value. The HTTP response that is returned to the client-side is expecting an object in the format of {token: 'Token string value'}.

Example of setting up a function to call tokenUrl using Express

function dwollaAPIToken(req, additional) {
  const tokenUrl = "/tokenUrl";
  const data = {
    action: req.action,
  };
  if (req.links) {
    data._links = req.links;
  }
  const headers = {
    Accept: "application/json",
    "Content-Type": "application/json",
    "X-Requested-With": "Dwolla-Drop-Ins-Library",
  };
  return fetch(`${tokenUrl}`, {
    credentials: "include",
    method: "POST",
    body: JSON.stringify(data),
    headers,
  })
    .then((response) => {
      return response.json();
    })
    .then((result) => {
      return result;
    })
    .catch((error) => {
      console.log(error);
      return error;
    });
}

Example configuration using token

<script>
  dwolla.configure({
      environment: "sandbox",
      // styles: "/styles/create-custom.css",
      success: (res) => Promise.resolve(),
      error: (err) => Promise.resolve(),
      token: (req) => Promise.resolve(dwollaAPIToken(req, {blah: "abcd"})),
  });
</script>