Can't Configure Paypal

[jwworth]

Thank you for maintaining this library! 👍

General information

• SDK/Library version: 1.32.1
• Environment: Sandbox
• Browser and OS: Chrome Version 97.0.4692.71 (Official Build) (arm64) on MacOS BigSur 11.6

Issue description

Scenario

Given I add Paypal configuration to my configuration object

Expected

Then I see Paypal as an option in the dropin UI

Actual

Then I see "Developer Error: Something went wrong"

In the console, I see the following: errorCollection.js:97 TypeError: Cannot read properties of undefined (reading 'FUNDING'). That points to this line of code in dropin.js:

Object.keys(global.paypal.FUNDING).forEach(function (key) {

Here's the paypal portion of our configuration.

    paypal: {
      flow: "vault",
      amount: amount,
      currency: "USD",
      buttonStyle: {
        color: "silver",
        size: "medium"
      }
    }

I've searched issues on this repo and message boards and am stuck. The console error is suggesting that paypal should be defined on global, but I'm not sure where that was supposed to happen, or where it is being overwritten or cleared.

Note: we have this same configuration in an older version of our checkout, and we can use PayPal there. So, it could be 'our' issue, but the provided error message isn't driving me to a solution.

[jplukarski]

Hey @jwworth, thanks for using the Braintree Web Drop-in and reaching out to us! Can you confirm if this is happening in production and/or sandbox and that you have enabled PayPal in your Braintree control panel?.

Additionally, can you share the rest of your Drop-In snippet?

Thanks, we look forward to hearing back from you.

[jwworth]

Thanks for getting back to me, @jplukarski. This is in the sandbox, where Paypal is enabled.

Here's the minimal, reproducible version of our configuration object.

  {
    authorization: token,
    container: "#braintree-container",
    vaultManager: true,
    paypal: {
      flow: "vault",
      amount: amount,
      currency: "USD",
      buttonStyle: {
        color: "silver",
        size: "medium"
      }
    }
  };

And its use:

    dropIn.create(config, (err, instance) => {
      // handling result
    });

[jplukarski]

Thanks for providing this information. This looks pretty straightforward and I am unable to reproduce the error on my end using that same configuration object.

You mentioned that it worked in a previous version of your checkout, which makes me think that something you introduced in your new version is breaking things. I suggest taking a look at the difference between your two checkout flows to see if something new is causing this issue. It looks like something is either overriding your global object as you mentioned or preventing the PayPal object from loading on the page in the first place.

I did find this thread on a WooCommerce plugin that is the same issue you are experiencing and one of the commenters mentioned that a function in their child themes that assists with page speed load times was preventing the PayPal object from loading entirely. Did you add anything to help with queuing resources to help with the load times of your page?

If you're unable to find the culprit, are you able to provide us with a testing site so we can reproduce the issue and troubleshoot? If you don't feel comfortable providing a test site via GitHub feel free to write to our support team.

[jwworth]

Thanks again @jplukarski. The problem ended up being close to what I theorized. If anyone else has this issue, general advice would be to make sure no other code is erroring when reading from global state, before Paypal gets a chance to do so.