Conversation
supportHi Team, In the checkout page, clover payment form loading with non-clickable like opacity overlay in firefox browser and recaptcha also not loaded. If we hard refresh the page using (Ctrl+F5) (or) If browser developer console enabled then payment form loading correctly. In the browser developer console getting some error lines are related to captcha loading error “Content-Security-Policy: The page’s settings blocked a JavaScript eval (script-src) from being executed because it violates the following directive: “script-sr”. But there is no issue on chrome browser and form loading correctly. Thanks,
Same thing here.
This is still an issue. I have been working with another vendor’s plugin which uses the same Clover tokenization/iframe APIs. Just thought I would comment a few things I have found out about this since I started my investigation about a month ago: The issue is restricted to a subset of Firefox users. Here are the things I am sure about: Firefox on macOS with the M-series chips are impacted Firefox on macOS with older Intel-series chips are NOT impacted Firefox on Windows is NOT impacted Firefox on Linux is mixed. One guy could not replicate the problem on his Linux setup (I didn’t get his Linux config details unfortunately), but I installed Ubuntu on two new vms and replicated the problem easily. One vm was the arm64 version of Ubuntu running on my M1 mac, and the other was a x86_64 version of Ubuntu running in a vm on Google Cloud. Other browsers besides Firefox are not experiencing the issue (Edge, Chrome, Safari, etc). As the OP said, when you open Web Console (ie dev tools) and you have the Network tab’s “disable cache” checked this fixes the problem and it isn’t possible to replicate the issue. That being said when “disable cache” is unchecked have been able to replicate the issue occasionally – it is flakey and intermittent though. If you turn on “Troubleshoot mode” (menu -> Help -> Troubleshoot mode -> click Restart -> when it is restarting click Open in the popup) the issue goes away and it is not possible to replicate the problem. It works 100% consistently, like in other browsers. If you turn off Troubleshoot mode it will again revert to not working properly Deep Technical Mumbo Jumbo: I did a somewhat deep investigation to understand what was happening and found out that the way it is supposed to work is that for each field (cc#, exp#, exp date, etc) it is supposed to create a separate iframe – and that iframe loads an HTML document at a URL similar to this: https://checkout.clover.com/widget.html?baseOrigin=https%3A%2F%2Fcheckout.clover.com&element=CARD_NUMBER&origin=https%3A%2F%2Fwww.yoursite.com&apiKey=XXXXXXXXXXXXXXXX&styles=%7B%22body%22%3A%7B%22fontSize%22%3A%221em%22%7D%2C%22input%22%3A%7B%22fontSize%22%3A%221em%22%7D%7D&domainHost=https%3A%2F%2Fwww.yoursite.com&locale=en … but for some reason this iframe’s html doc doesn’t load properly into Firefox. I have inspected the network traffic with mitmproxy and I can confirm that the widget.html document is a legit document, nothing funny about it, but Firefox doesn’t render it properly… and then the JS and CSS files that widget.html are supposed to include to make all this functionality work just don’t get requested by Firefox at all. It is relatively clear to me that this “Clover Payments for WooCommerce” plugin is not “at fault” since I am experiencing this exact same problem in another plugin by another developer ( Clover Gateway for WooCommerce which is in the WooCommerce Marketplace). Instead the problem is either with Firefox itself (as in some sort of browser bug) OR it is a problem with the backend Clover e-Commerce APIs ( https://docs.clover.com/dev/docs/clover-ecommerce-homepage ). I would recommend that anybody with complaints for this issue please reach out to Clover at wordpress@clover.com to make it known to the team that maintains this plugin (they apparently don’t monitor this forum), and also email developer-relations@devrel.clover.com to make your issue known. The support guy from my other plugin said he had previously been in contact with clover about 9-10 months ago about this issue but nothing was figured out and it got forgotten, and this past month I was able to get ahold of someone at Clover named Jacob via developer-relations@devrel.clover.com , but so far they are very slow to make any efforts to confirm the issue even though I have provided lots of detail to them… so the more people complain about this the better chance that it will get looked at.
Same thing here.
This is still an issue. I have been working with another vendor’s plugin which uses the same Clover tokenization/iframe APIs. Just thought I would comment a few things I have found out about this since I started my investigation about a month ago: The issue is restricted to a subset of Firefox users. Here are the things I am sure about: Firefox on macOS with the M-series chips are impacted Firefox on macOS with older Intel-series chips are NOT impacted Firefox on Windows is NOT impacted Firefox on Linux is mixed. One guy could not replicate the problem on his Linux setup (I didn’t get his Linux config details unfortunately), but I installed Ubuntu on two new vms and replicated the problem easily. One vm was the arm64 version of Ubuntu running on my M1 mac, and the other was a x86_64 version of Ubuntu running in a vm on Google Cloud. Other browsers besides Firefox are not experiencing the issue (Edge, Chrome, Safari, etc). As the OP said, when you open Web Console (ie dev tools) and you have the Network tab’s “disable cache” checked this fixes the problem and it isn’t possible to replicate the issue. That being said when “disable cache” is unchecked have been able to replicate the issue occasionally – it is flakey and intermittent though. If you turn on “Troubleshoot mode” (menu -> Help -> Troubleshoot mode -> click Restart -> when it is restarting click Open in the popup) the issue goes away and it is not possible to replicate the problem. It works 100% consistently, like in other browsers. If you turn off Troubleshoot mode it will again revert to not working properly Deep Technical Mumbo Jumbo: I did a somewhat deep investigation to understand what was happening and found out that the way it is supposed to work is that for each field (cc#, exp#, exp date, etc) it is supposed to create a separate iframe – and that iframe loads an HTML document at a URL similar to this: https://checkout.clover.com/widget.html?baseOrigin=https%3A%2F%2Fcheckout.clover.com&element=CARD_NUMBER&origin=https%3A%2F%2Fwww.yoursite.com&apiKey=XXXXXXXXXXXXXXXX&styles=%7B%22body%22%3A%7B%22fontSize%22%3A%221em%22%7D%2C%22input%22%3A%7B%22fontSize%22%3A%221em%22%7D%7D&domainHost=https%3A%2F%2Fwww.yoursite.com&locale=en … but for some reason this iframe’s html doc doesn’t load properly into Firefox. I have inspected the network traffic with mitmproxy and I can confirm that the widget.html document is a legit document, nothing funny about it, but Firefox doesn’t render it properly… and then the JS and CSS files that widget.html are supposed to include to make all this functionality work just don’t get requested by Firefox at all. It is relatively clear to me that this “Clover Payments for WooCommerce” plugin is not “at fault” since I am experiencing this exact same problem in another plugin by another developer ( Clover Gateway for WooCommerce which is in the WooCommerce Marketplace). Instead the problem is either with Firefox itself (as in some sort of browser bug) OR it is...