Dwolla-micro-deposits-verify component not showing up in production

General
1

Hi,

I have a Vue app that uses dwolla-funding-source-create to create a new funding source and dwolla-micro-deposits-verify to verify microdeposits. Everything works great in development, and I can create a new account in production, but the dwolla-micro-deposits-verify component just shows “Gathering Info” for a second then disappears.

Chrome console shows a successful request to load the funding source:

image
image698×833 64.7 KB

After this request succeeds, the dwolla-micro-deposits-verify component just hides the “Gathering Info” element and doesn’t show anything else. Below is the contents of the shadow-root HTML element since as a new user I’m only allowed to upload 1 media element with a new post, so can’t put a screenshot.

<div id="dwolla-micro-deposits-verify"><!--?lit$475827063$--> <!--?lit$475827063$--> <!--?lit$475827063$--><div class="dwolla-text-container dwolla-width-1 hide-class"><p>Gathering info...</p></div><!--?lit$475827063$--><!--?--></div>

My code looks like the following. Here’s the HTML (Vue) for the micro deposits component

  <modal v-if="verifyMicrodeposits">
    <div class="modal-exit" @click="verifyMicrodeposits = null">&times;</div>
    <h2>Verify Microdeposits for {{displayBankInfo(verifyMicrodeposits)}}</h2>
    <dwolla-micro-deposits-verify
      :customerId="user.dwollaCustomerId"
      :fundingSourceId="verifyMicrodeposits.dwollaFundingSourceId"
    >
    </dwolla-micro-deposits-verify>
  </modal>

Here’s my dwolla.configure() call. I confirmed that I’m calling with environment: 'production'. I don’t get any error logs when experiencing this issue.

    dwolla.configure({
      environment: nodeEnv === 'production' ? 'production' : 'sandbox',
      tokenUrl: '/.netlify/functions/getDwollaToken',
      success: res => {
        if (res?.resource?.endsWith('/micro-deposits')) {
          api.handleDwollaPaymentMethodUpdate({
            userId: this.user._id,
            dwollaFundingSourceId: res.resource.match(/^funding-sources\/(.+)\/micro-deposits$/)[1]
          }).then(res => {
            this.showNewPaymentMethodModal = false;
            this.verifyMicrodeposits = false;
            
            let updatedExisting = false;
            for (let i = 0; i < this.paymentMethods.length; ++i) {
              if (this.paymentMethods[i]._id === res.paymentMethod._id) {
                this.paymentMethods[i] = res.paymentMethod;
                updatedExisting = true;
                break;
              }
            }
            if (!updatedExisting) {
              this.paymentMethods.unshift(res.paymentMethod);
            }
          });
        }
      },
      error: err => {
        console.error('Dwolla error', err);
      }
    });

Any ideas?

2

From what I’ve been able to gather, the issue is in the _checkFundingSourceEligibility() function.

                  const i = null === (e = t._embedded["funding-sources"]) || void 0 === e ? void 0 : e.find((e=>e.id === this.fundingSourceId));
                  console.log('FL', i)
                  if (!i)
                      return this._updateAlert(Me, ze),
                      !1;
                  if ("verified" === i.status)
                      this._updateAlert(Ye, Fe);
                  else {
                      const e = i._links;
                      switch (!0) {
                      case !!e["verify-micro-deposits"]:
                          return !0;
                      case !!e["initiate-micro-deposits"]:
                          this._updateAlert(Me, Ue);
                          break;
                      case !!e["failed-verification-micro-deposits"]:
                          this._updateAlert(Me, $e);
                          break;
                      default:
                          return !1
                      }
                  }
                  return !1
              }

My funding source doesn’t have any of these links, only has “customer”, “micro-deposits”, “self”, “transfer-from-balance”, “transfer-receive” link.

If I change case !!e["verify-micro-deposits"]: to case !!e["micro-deposits"]: then the micro deposits component shows up correctly. Maybe this is an inconsistency with how sandbox vs production returns the micro deposits link?

3

Hi @vkarpov15! That’s a good observation, thanks for reporting this!

Maybe this is an inconsistency with how sandbox vs production returns the micro deposits link?

This is definitely correct – Sandbox returns both “verify-micro-deposits” and “micro-deposits” links as soon as MDs are initiated. On the other hand, Prod returns “micro-deposits” when MDs are initiated, then returns “verify-micro-deposits” when the MDs have finished processing and can be verified.

It looks like we need to add one more case for !!e["micro-deposits"]: which breaks the switch/case after throwing an error saying something like, “Microdeposits cannot be verified yet”.

I’ll get this added to our backlog. In the meantime, if you’d like, you can add a preliminary check to make sure the “verify-micro-deposits” link is present before loading the dwolla-micro-deposits-verify component.

Thanks again for bringing this up!

1 Like
4

Thanks for clarifying. I confirmed that the verify micro deposits component shows up correctly once the micro deposits showed up in my bank account. I was able to work around this by adding some extra logic on the backend to pull whether verify-micro-deposits is present or not in my endpoint to load payment methods.

exports.getFundingSource = async function getFundingSource(id) {
  const url = `${config.dwollaAPIUrl}funding-sources/${id}`;
  const { body } = await dwolla.get(url);
  return {
    body,
    accountType: body.bankAccountType,
    last4: body.name,
    name: body.bankName,
    sentMicrodeposits: !!body._links['verify-micro-deposits']
  };
}

  <modal v-if="verifyMicrodeposits">
    <div class="modal-exit" @click="verifyMicrodeposits = null">&times;</div>
    <h2>Verify Microdeposits for {{displayBankInfo(verifyMicrodeposits)}}</h2>
    <div v-if="!verifyMicrodeposits.sentMicrodeposits">
      Microdeposits have not been sent yet, please check back later.
    </div>
    <div v-else>
      <dwolla-micro-deposits-verify
        :customerId="user.dwollaCustomerId"
        :fundingSourceId="verifyMicrodeposits.dwollaFundingSourceId"
      >
      </dwolla-micro-deposits-verify>
    </div>
  </modal>
1 Like
5

Perfect!

Thanks for sharing your implementation. This will help other developers likely running into the same issue! :slight_smile:

6

This topic was automatically closed after 365 days. New replies are no longer allowed.