Paypal-checkout-components: React: funding.disallowed causes error

[advance512]

Description

Setting disallowed funding on a Paypal React button causes an error:

Can not disallow funding source: venmo

Steps to reproduce

Create a Paypal React button:

    const PayPalButton = window.paypal.Button.driver('react', { React, ReactDOM });

    return (
      <div>
        <PayPalButton
          env={config.paypalMode}
          client={paypalClientConfig}
          style={{
            layout:   'vertical', // horizontal | vertical
            size:     'large', // small | medium | large | responsive
            shape:    'rect', // pill | rect
            color:    'gold', // gold | blue | silver | black
            branding: true, // optional
          }}
          funding={{
            allowed:    [
              window.paypal.FUNDING.CARD,
            ],
            disallowed: [
              window.paypal.FUNDING.CREDIT,
            ],
          }}
          payment={() => { return (paypalPaymentId); }}
          commit={paypalCommit}
          onAuthorize={onAuthorize}
          onCancel={onCancel}
          locale="en_US" // TODO: Customize this based on the locale of the user
        />
      </div>
    );

Note that if I remove the disallowed key from the funding prop argument, everything works perfectly.

Affected browsers

• [X] Chrome
• [ ] Safari
• [ ] Firefox
• [ ] Edge
• [ ] IE
• [ ] Chrome Mobile/Tablet
• [ ] Safari Mobile/Tablet
• [ ] Web View / Safari ViewController
• [ ] Other

[trainerbill]

This is intended functionality for now.

[advance512]

I am not disallowing venmo. How does this error even make sense?
And how can I disallow Paypal Credit with React?
@trainerbill

[trainerbill]

sorry i just assumed that paypal.FUNDING.VENMO was in the disallowed list. I can't reproduce this on the demo app

https://developer.paypal.com/demo/checkout/#/pattern/vertical

You can absolutely disable credit by moving paypal.FUNDING.CREDIT to the disallowed array.

[advance512]

But, look at the code. I am not talking about VENMO but I get an error about it.

[trainerbill]

I can't reproduce it on the demo app, so you are going to have to give me somewhere to reproduce it.

[alecwhittington]

@trainerbill - here is more information

Repo to show issue: https://github.com/alecwhittington/venmo-funding-issue

The bug is within the component.jsx file, lines 418 - 440.

I am having the exact same issue as the @advance512 is. We are not specifying Venmo in the our funding.disallow array, just CARD and CREDIT.

If you visit the page using a mobile browser (or change your user agent to a mobile one), you will not see the error. It only shows up when you visit the page in any non-mobile browser or use any non-mobile user agent string.

If you do not specify any funding configuration, the issue never appears, mobile browser or non-mobile browser.

In our case, we want Venmo for mobile, but we still want to disallow funding sources such as card and credit across all browsers. Seems to me, isDevice() returns false, venmo should be valid in the disallowed. Since neither our code or the OP's code are specifically disallowing Venmo, it poses a problem for our business model.

If you want me to open a new issue, please let me know.

[advance512]

@alecwhittington Thanks for the reproduction, great job.
Kudos to you.

[advance512]

Will this be reopened, @trainerbill ?

[trainerbill]

@alecwhittington thanks for the repo. I think the issue is actually that paypal.FUNDING is undefined so it may be defaulting to venmo. Regardless, you are installing and importing the paypal-checkout library which unfortunately is not really supported. The JS library in your app has to be the same library that is in our checkout experience so it needs to be included off the CDN. Here is an example of how to use the library in React.

https://github.com/paypal/paypal-checkout/blob/master/demo/react.htm

Give that a try and let me know how it goes.

[alecwhittington]

@trainerbill - I will try to get you an updated sample today, but one question: If the NPM package is not supported, why does it exist? Not trying to be an ass, serious question.

In our case, we use TypeScript so using the import worked out better for us, but if the CDN version solves the issue, we'll figure that piece out.

[trainerbill]

its a fair question and I don't have an answer. I think we should probably unpublish it since the architecture behind the package probably will not allow us to publish it.

[alecwhittington]

@trainerbill - I've updated the sample repo per your guidance. The issue persists.

Details

• Commented out import and replaced with CDN in ./public/index.html
• Adjusted code to get around no-undef error with CRA during build and start
• Added test.htm that is based off of paypal-checkout demo for React

Results

• test.htm works as expected, even using the same configuration that specifies the disallowed payment sources
• Running the CRA app (yarn start) produces the error. You'll need to look at the console to see the error about Venmo not being able to be disallowed due to CORS issue with paypalobject.com not specifying the return CORS header that would be valid for 'http://localhost:3000'.
• In the CRA app, if I comment out the 'funding' key from the configuration, it does not produce the error, but we are not able to disallow specific funding sources.

[bluepnume]

Going to re-open this issue while we investigate.

[advance512]

Any update?

[bluepnume]

Repro'd the issue, got a fix in for the next release. Thanks again for the report!

[advance512]

Please update here when the next release is released, and the bug is fixed. :)

[bluepnume]

Can you please check now? This should be resolved.

[alecwhittington]

I can confirm this has been resolved. Tested with version 4.0.209, desktop no longer throws errors when disallowed funding sources are provided.

Thank you for getting this fixed, sorry for the delay in response

[bluepnume]

Thanks for confirming!

[LallerNeha]

I need to disallow venmo but If I use
funding:{
disallowed: [
window.paypal.FUNDING.VENMO
]
}
My paypal button also disappears.

[bluepnume]

Disallowing venmo is not supported.

[LallerNeha]

Thank you for confirming.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.