Paypal-checkout-components: Problem with button on firefox 52, 53

[dmitry-kostin]

Hello,

We have a problem here with paypal button on the firefox Only. Other browsers work perfect.
On a button click - nothing happens - no errors, no requests, absolutely nothing
The only errors and warning in the console on the screen below:
https://www.dropbox.com/s/0sajsoti4djptnf/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202017-05-15%2018.36.08.png?dl=0

the only idea i have it has some correlation with this header:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security

To summarize: we have a https with tls 1,2; Button is rendered, but not clickable in firefox
¯_ツ_/¯

[bluepnume]

• Do you see this problem in sandbox, or production, or both?
• Do you see a request for /webapps/hermes/button in your network tab, and does it return a 200 status code?

[dmitry-kostin]

• The problem is in sandbox, dont sure if we can push it to live
• yes all paypall requests passed as 200, there are no non-200 requests at all, button is showed just fine
  have any ideas?

[bluepnume]

Do you see the same issue with https://developer.paypal.com/demo/checkout/#/pattern/client

(tried this myself with firefox 53 just now, and it worked just fine)

[dmitry-kostin]

at the demo actually i see paypal popup is blinking and here is result from console:
https://www.dropbox.com/s/0hnyre4kuswgoia/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202017-05-16%2010.10.14.png?dl=0

but on my website its not even blinking - just nothing happens as well as in console

[dmitry-kostin]

btw it works perfect even on facebook mobile app browser, whats wrong with firefox?

[bluepnume]

OK. Sounds like a different problem on your site vs on the demo app.

Could you either paste your integration code, or link me to a dev version of your site? I'm still trying to repro this problem but not having any luck so far.

[dmitry-kostin]

https://gist.github.com/dmitry-kostin/012224bde06c8bc388270018d8240976

[bluepnume]

Thanks, this is really useful. I see the problem now. I'll try to narrow it down.

[bluepnume]

OK, I think I see the problem here.

You're trying to render the button into a <button></button> element. That messes with firefox and prevents the iframe button from getting the click event.

Can you try rendering into a <div> instead?

In the mean time I'll keep this open to remind me to add a warning for this.

[dmitry-kostin]

Thank you!! This helped!

[bluepnume]

Great!

[robsterlini]

I was tearing my hair about this bug! Could we have something added to the docs that avoids this pain for future users as it seems likely that people will look to put these inside <button> elements.

Thanks for the fix though! 🎉

[bluepnume]

@sterlini-fueled -- we have an issue to track this here: https://github.com/paypal/paypal-checkout/issues/349

The plan is to error out and refuse to render the button if we detect it's being rendered into a <button> element.

[zetasyanthis]

This is still failing. :(

[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.