requestPaymentMethod() unexpectedly returns a "No payment method is available" error

[clarkware]

General information

• SDK/Library version: dropin.js 1.32.1
• Environment: Production
• Browser and OS: latest versions of Safari, Firefox, and Chrome

Issue description

We've been experiencing an intermittent issue where the dropinInstance.requestPaymentMethod function returns a "No payment method is available" error when it would appear that a payment method has indeed been selected. For example, when a customer selects PayPal as their payment method (and logs into their PayPal account), they get redirected back to our payment page and PayPal has a green checkmark as expected. But then when they submit the form, the error appears in the console:

What's odd is this only happens with some transactions. And when this happens, reloading the page and selecting the payment method again resolves the issue. It seems to occur more often with PayPal transactions than credit card transactions.

Also what's strange is we've only begun seeing this problem in the last few weeks.

Relevant Code

Here's the JS code we're using, which hasn't changed in quite some time.

var form = document.querySelector('#payment-form');

braintree.dropin.create(
  {
    authorization: client_token,
    container: "#dropin-container",
    paypal: {
      flow: "checkout",
      amount: amount,
      currency: "USD"
    }
  }, function (err, dropinInstance) {
    if (err) {
      console.error(err);
      return;
    }

    form.addEventListener("submit", function (event) {
      event.preventDefault();

      dropinInstance.requestPaymentMethod(function (err, payload) {
        if (err) {
          console.error("Error requesting payment method", err);
          return;
        }

        // ...
      });
    });
  }
);

[jplukarski]

Hi @clarkware , thanks for reporting this to us. Are you calling clearSelectedPaymentMethod in the callback of requestPaymentMethod? We did discover that there was a race condition where if this was called too quickly the Drop-In could be put into an usable state.

Can you try to upgrade to the latest version of the Drop-In (1.33.0) to see if that resolves your issue?

[clarkware]

Thanks for the help, @jplukarski.

I'm not calling clearSelectedPaymentMethod in the requestPaymentMethod callback. Literally the first thing I do in the callback is check if requestPaymentMethod returns an error, and that's when I'm getting the "No payment method is available" error in some cases even through a payment method has indeed been selected.

I just upgraded to Drop-In (1.33.0) to see if that resolves it anyway. What's strange though is I've been using an earlier version for several months without any issues, and then just last week start getting the "No payment method is available" error in some cases. Unfortunately, I haven't been able to isolate under what conditions that error occurs.

Thanks again.

[ryangibbsnc]

Bump ➕

[ajitdas123]

The same issue, even though the same thing is working with react-native-dropin-ui , so I belive there is no configuration issue with this. So why this error for web UI

[armandodlvr]

Hi @ajitdas123 , we don't maintain the react-native-dropin-ui repository, so we can't help you with that. I will recommend that you try to update to the latest version of Drop-In (1.33.7).