Woo payment gateway (clover) conflict

I have this page: https://smallcakesannapolis.com/checkout/

And the site uses clover payments for woocommerce.

AS of the past 2 updates, it is erroring, and not allowing people to input their card info to pay:

I reached out to the plugin people 1st, and they have done multiple tests, and asked me to troubleshoot by switching themes, I switched to twenty twenty one and the form works just fine:

(I also turned off all plugins not related to woocommerce, and the error was still there, so it does seam like a theme issue. I have provided secure login for you to investigate.

Thanks.

Please note, I have woo payments activated at the same time, to accept payments whilst you test. This does not cause the conflict, I repeat, it is with the theme.

Hello @oriol,

Thanks for writing to us.

It seems that there might be a plugin conflict issue. I suggest you troubleshoot a few of the common issues before we investigate your settings. If it doesn’t work, it would be best if you could copy your live website to your staging area and send your details in a secure note so that we can investigate your setting without breaking your live site. Please provide the following details

  • WordPress Login URL
  • Admin-level username and password

You can find the Secure Note button at the bottom of your posts

Thanks

I feel you have stalled the support here a little, or have not read in detial my post?

I had already told you above that I had tested with plugins, and the issue is 100% the theme, as it worked with all plugins activated, with twenty twenty one theme. I tested with xtheme, with all plugins (apart from woo) deactivated. I also provided login details.

You can test on the live site, as I have backups in case you break it. My host doesnt allow for staging.

Hello @Oriol,

You are using Clover for WooCommerce plugin and it is loading this iFrame in the field:

<iframe title="CARD NUMBER" src="https://checkout.sandbox.clover.com/widget.html?baseOrigin=https%3A%2F%2Fcheckout.sandbox.clover.com&amp;element=CARD_NUMBER&amp;origin=https%3A%2F%2Fsmallcakesannapolis.com&amp;apiKey=2fdbf172cd702dd27f3a841d40d0b574&amp;styles=%7B%22body%22%3A%7B%22fontSize%22%3A%221em%22%7D%2C%22input%22%3A%7B%22fontSize%22%3A%221em%22%7D%7D&amp;domainHost=https%3A%2F%2Fsmallcakesannapolis.com&amp;locale=en" style="border: 0px; height: 100%; width: 100%;"></iframe>

Be advised that the theme do not have any control on the elements loaded inside the iframe by the plugin. You may need to contact the creators of the plugin.

Best Regards.

Ok, thanks, but how do you explain the fact that when I use a different theme, the plugin, and form works as it should?

An update. I deleted the page I created in cornerstone, and regenerated the default woocommerce pages, and bingo! it works…so yeah, you might wanna check into things, seams a bit buggy to me.

Glad to hear that @oriol.

Sure, but will you be looking into this? its clearly a bug with the theme.

Hello @Oriol,

We do not have any special integration with the plugin. Please be informed that the plugins loads an iFrame and the contents of the iFrame has no connection with the theme. The issue could just be the cache. As you know, WooCommerce has this fragment cache feature. Once it is cleared, the styling should be reset just like when you tested using the WordPress theme.

Hope this helps.

I think it is pretty clear form my posts above, that there is a definite bug, how is it that if I create the page within cornerstone, the frame doesn’t work?, how is it that with the same page, if I use a different theme, the form works…? How is it that if I use the standard woo created checkout, the form works? Clearly everything is pointed to a conflict with your theme, and given this is one of 2 major woocommerce plugins, I would hope you would look into it, so I do find this reply a little surprising.

Very little was done on your end to fix this, I had to crawl the internet for fixes, as everything suggested above, just isn’t correct, how would I officially report this as a bug?

Hello Oriol,

Thank you for the info.

how is it that if I create the page within cornerstone, the frame doesn’t work?

Did you manually create the checkout page using Cornerstone? It’s possible that the plugin relies on the default checkout template, which can only be displayed using the [woocommerce_checkout] shortcode, and without this shortcode, the plugin fails to render the checkout fields.

Please check the documentation below for more info about the WooCommerce page shortcodes: https://woocommerce.com/document/woocommerce-shortcodes/#woocommerce-shortcodes

Anyway, glad to know that you managed to resolve the issue. We’ll forward this thread to our channel

Best regards,
Ismael

the one that didnt work, was created in cornerstone, and using [woocommerce_checkout], the one that worked, needed the default woocommerce checkout page re-created.

Thank you for the info.

Are you using the Block Editor ? If that is the case, then you have to insert the Checkout block instead of using the [woocommerce_checkout] shortcode. This is basically the same as regenerating the default WooCommerce pages.