Dwolla Personal Verified Customer Document Upload submit button always disabled

[marjanaet (Marjan Mukram)]

We are trying to upload document for a personal verified customer with status ‘document’ with drop in components. The document upload form renders, but the submit button is always disabled.

We cannot trigger the submit button, it always show the button as disabled.
The form is rendered via the dwolla-personal-vcr drop-in component. Also we are NOT using the dwolla-document-upload drop in component for the above ui.
Our drop in components use the dwolla-v2

<dwolla-personal-vcr
  terms={'https://www.dwolla.com/legal/tos/'}
  privacy={'https://www.dwolla.com/legal/privacy/'}
  customerId={'customerId'}
 />

Can I know why this button is always disabled? This worked when we use dwolla v1.

Im using the cdn https://cdn.dwolla.com/v2.2.0/dwolla-web.js

Thanks!

[shreya (Shreya | Developer Advocate @ Dwolla)]

Hi @marjanaet, from the screenshot it looks like the Submit button is active. Does it not let you click on it? Are there any errors in the browser console and network logs that you can share?

Also, did you recently switch to the latest version of dwolla-web.js (2.2.0)? Could you share any relevant code you have in place for implementing drop-ins? This will help us investigate the issue better.

Thanks!

[marjanaet (Marjan Mukram)]

@shreya Thank you for the quick response!.
Once I click the submit button nothing happens. There are no errors in the console or in the network logs.
I found the button is disabled by inspecting the submit button.(Screenshot below) I can manually remove the disabled attribute from the elements tab and submit the button and it works

Yes. I recently upgraded the dwolla-web.js referring to the migration guide

Im simply rendering the dwolla-personal-vcr with terms, privacy and the customerId as the props.
Also it is worth to note I can enroll a personal verified customer but I cannot submit a form of a customer with a document status. ie: First name is document

Relavant codes

   export const DwollaPersonalCustomer = memo((props: DwollaComponentProps) => {
  const { success, error, customerId } = props;

  // @ts-ignore:end
  return (
    <DwollaWrapper success={success} error={error}>
      {
        // @ts-ignore
        <dwolla-personal-vcr
          terms={TERMS_LINK}
          privacy={PRIVACY_LINK}
          customerId={customerId}
        />
      }
    </DwollaWrapper>
  );
});

const DwollaWrapper = ({ children, success, error }) => {
  const { ready, error: scriptError } = useDwolla({
    success,
    error
  });

  if (scriptError || !ready) {
    return <Loader />;
  }

  return <Suspense fallback={<Loader />}>{children}</Suspense>;
};


const useDwolla = options => {
  const [isScriptLoading, scriptError] = useScript({
    checkForExisting: true,
    src: "https://cdn.dwolla.com/v2.2.0/dwolla-web.js"
  });
  // @ts-ignore
  const [isDwollaLoaded, setDwollaLoaded] = useState(!!window.dwolla);

  useEffect(() => {
    if (isScriptLoading) {
      return;
    }

    // @ts-ignore
    if (scriptError || !window.dwolla) {
      console.log("Error loading Dwolla Web: ", scriptError);
      return;
    }

    setDwollaLoaded(true);
  }, [scriptError, isScriptLoading]);

  const isReady = isDwollaLoaded && !isScriptLoading;

  useEffect(() => {
    if (isReady) {
      // @ts-ignore
      window.dwolla.configure({
        token: req => Promise.resolve(dwollaAPIToken(req)),
        environment: ENVIRONMENT,
        success: options.success,
        error: options.error
      });
    }
  }, [isReady]);

  return {
    error: scriptError,
    ready: isReady
  };
};

export default useDwolla;

const dwollaAPIToken = req => {
  const data = {
    action: req.action,
    _links: !!req.links ? req.links : undefined
  };

  const headers = {
    Accept: "application/json",
    "Content-Type": "application/json",
    "X-Requested-With": "Dwolla-Drop-Ins-Library",
    "inc-client-id": localStorage.getAuthClientId()
  };

  return fetch(TOKEN_URL, {
    credentials: "include",
    method: "POST",
    body: JSON.stringify(data),
    headers
  })
    .then(response => {
      return response.json();
    })
    .then(result => {
      return result;
    })
    .catch(error => {
      return error;
    });
};

[shreya (Shreya | Developer Advocate @ Dwolla)]

Thanks for the detailed explanation, @marjanaet!

Looking at the code, everything looks to be in place to successfully call the tokens endpoint for generating tokens throughout the flow for the drop-in component.

Are you seeing this behavior in other browsers as well?

One thing that is new in the latest version of dwolla-web.js is that we’re now including a custom User-Agent whenever calls are made from the library which looks like this - “dwolla-web/2.2.0”. I wonder if this might be causing your security systems to block the request because the request to the tokenUrl doesn’t match the user’s regular user-agent string, which might look like this - “Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36”

We did this in order to explicitly identify requests originating from the dwolla-web.js library in our internal logs. It helps us identify and debug API requests from the Dwolla library efficiently.

If this is the case, you may need to adjust your security systems to allow requests with the custom user agent which will always have the signature dwolla-web/${version}.

Let us know if this was the case or not!

[marjanaet (Marjan Mukram)]

@shreya Thanks!
I’m seeing this behavior in other browsers as well.
I’m receiving a token from the token url from the server. That request has user-agent “Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36”.
Also other functionalities like enrolling the customer, verifying micro deposits are working fine.

So I don’t think the user agent is an issue here.

[shreya (Shreya | Developer Advocate @ Dwolla)]

Thanks for confirming that, @marjanaet. Apologies for getting back to you late!

I was able to recreate this in Sandbox with a Personal Verified Customer in document status. I’ll be working with the dev team on figuring out what’s causing the Submit button to stay disabled.

In the meantime, to get unblocked, are you able to use the <dwolla-document-upload> drop-in component to upload docs for Personal verified customers who are in the document status?

Here’s an example of how to use it to upload docs for a Customer:

<dwolla-document-upload customerId="5406ae1d-269b-4132-a4e8-cd0460d42380"></dwolla-document-upload>

We appreciate your patience while we work through this!

[shreya (Shreya | Developer Advocate @ Dwolla)]

I have som clarifying questions for our investigation. If you could help answer them, that would be great!

1. Are you seeing this behavior in Sandbox only or in Production as well?
2. Did you recently upgrade to dwolla-web.js v2.2.0 from v1?

[marjanaet (Marjan Mukram)]

Hi,

1. Yes. The issue is reproducible in production as well.
2. Yes. We recently upgraded. After the upgrade we noticed this issue.

Thanks!

[shreya (Shreya | Developer Advocate @ Dwolla)]

Thanks for confirming, @marjanaet!

[shreya (Shreya | Developer Advocate @ Dwolla)]

Hi @marjanaet,

Our investigation confirms that it is indeed a bug, and we’ve created a ticket to address it. However, I regret to inform you that due to our current development schedule and priorities, it’s unlikely that this bug will be fixed within the next month or so.

In the meantime, a workaround to mitigate the impact of the bug which involves using the <dwolla-document-upload> drop-in component. If you need further assistance with the workaround or have any questions, please don’t hesitate to reach out!

[shreya (Shreya | Developer Advocate @ Dwolla)]

Hi @marjanaet! Just wanted to provide a quick update and share that a bug fix for this issue has been implemented. You do not need to make any changes in your integration to incorporate the new change. It should work as is!

Thanks for your patience with us regarding this. Let us know if you have any questions!

[marjanaet (Marjan Mukram)]

Marjan Mukram reacted to your message:

[marjanaet (Marjan Mukram)]

Thanks!