All payment options failed to load

[mikekanter]

General information

• SDK/Library version: 1.27.0
• Environment: Production
• Browser and OS: Chrome 88.0.4324, Windows 10

Issue description

name: DropinError, message: All payment options failed to load.

We are seeing this in our production environment, and have been unable to reproduce it. Our integration looks like this:

dropin.create(
      {
        authorization: [AuthorizationToken],
        container: [container],
        card: {...},
        paypal: { flow: 'vault' }
      },
      (createErr, instance) => {
        if (createErr) {
            return onError(createErr)
          }
         ....
        }
  )

Unfortunately we don't really have much more additional info because we have been unable to reproduce it, although we have been seeing users hitting this error, generally several dozen users per day. We are seeing this issue on all operating systems and browsers. We also suspect that the drop-in might still load despite this error, as we are not seeing users complain about the drop-in not showing up.

[crookedneighbor]

Was this happening before upgrading to v1.27.0?

[mikekanter]

yes, we've been seeing this for months. It has been happening at the very least since 1.24.0

[crookedneighbor]

I'd only expect this to happen in the case that the customer has either a browser extension that is blocking the Braintree assets from loading or such a poor internet connection that it fails to load.

[mikekanter]

Ok; is there a list of known problematic extensions?

[crookedneighbor]

No, all the ones that have come up in the past, we've worked with the extension owner to allow Braintree.

How is your website set up? Are you using a single page app framework? Is it possible that your users are starting the checkout, then leaving before Drop-in is finished setting up, causing your app to remove the DOM nodes that Drop-in would have used to set up?

[mikekanter]

Yes, we use react. We were just able to reproduce this error by having browser extensions block requests to pertinent url's, and/or block iframes.

[gesa]

@mikekanter Thanks for that info. Are you able to specify which browser extensions you were using?

if it's the extensions causing problems for your customers, we'd love know so we can work on fixing that.

If it was one you just whipped up quickly for testing purposes, that may be a smokescreen for the real issue—there are other ways those elements can fail to load than just the browser extension

[armandodlvr]

closing for inactivity. If you continue to encounter errors, please contact Support

[shailesh108]

@armandodlvr i am facing same issue steps to reproduce.

1 Load the DropIn ui and we have another payment method Braintree Paylater. first we are loading DropIn and then Paylater. and after that we move to the next page and visit again on the checkout page we are getting this error.

We are using NextJS and ReactJS .

{
    "name": "DropinError",
    "message": "All payment options failed to load."
}

[kukadiyaAni]

@shailesh108 did you get a solution? if yes can you share here