Interesting, I am still not able to replicate this issue on Chrome. @howardmw what browser are you testing on?
-
This reply was modified 6 months, 3 weeks ago by
Clayton R.
I tested with both chrome and edge. I can screen share with you if it will help? I have a few minutes.
Hi @howardmw
Please reach out to us via our WordPress Admin > Stripe > Support widget. That will create a support ticket in our system.
Kind Regards
Do you mean I should “create topic” on your support page? Sorry, not a dev.
Hi @howardmw
Do you mean I should “create topic” on your support page?
No, you need to navigate to your site’s WordPress Admin > WooCommerce > Stripe > Support page. There is a support widget built into our plugin that you can use.
Kind Regards
@jkomar I’ve run about 10 tests across different browsers and have not been able to replicate the place order button issue.
Kind Regards
Thank you for checking Clayton. I am not sure what happened with that customer, but I think I will revert to the previous version of the plugin for now just in case.
If it is pertinent, my host uses Varnish for caching and also provides the Object Cache Pro plugin which interfaces with Redis.
Thanks again.
Hi @jkomar
Thank you for your reply. The interesting thing is there isn’t any code in the Apple Pay or Google Pay integrations that set’s the place order button to disabled.
Kind Regards,
-
This reply was modified 6 months, 3 weeks ago by Clayton R.
Hi @ph1lm @jkomar we were able track down the issue and it’s related to place order buttons that have a CSS style of float: right. What happens is because the place order button has the float property, it is removed from the normal document flow but still affects the position of surrounding content. In version 3.3.98 the Apple Pay HTML was rendered in a <div> element where as in the past a <button> element was used.
That has the effect of the surrounding HTML “blocking” the button which makes it appear disabled. The resolution is to add this CSS code:
#wc-stripe-payment-request-container{
clear: both;
}
We are going to render the buttons in a <button> element instead of a div in the next release to account for scenarios where the place order button is using the float property.
Kind Regards
@ph1lm @jkomar Here is a link to an update which you can test. I believe that will resolve your issue with the place order button.
https://drive.google.com/file/d/1_h31EsZlYPzfPPP8b2WPvLwRe9qBEEwx/view?usp=drive_link
Please test that update and then confirm the result.
Kind Regards
Cudos to Clayton for getting right on this issue, figuring it out and putting out a fix in a matter of hours!
Just installed the update from your link and it seems to be working well as far as I can tell. Thank you for figuring out the issue and fixing it so quickly! Much appreciated!
@jkomar awesome, thank you for confirming. We will be releasing an update later today.
Kind Regards
I had the same issue. The solution was to add this css code to website:
#place_order { position: relative !important; z-index: 9999 !important; }
Also this stripe element was overlapping ability to click order button:
class="__PrivateStripeElement" style="margin: -4px 0px !important; padding: 0px !important; border: medium !important; display: block !important; background: transparent !important; position: relative !important; opacity: 1 !important; transition: height 0.35s !important;"><iframe name="__privateStripeFrame70914" frameborder="0" allowtransparency="true" scrolling="no" role="presentation" src="https://js.stripe.com/v3/elements-inner-express-checkout-ded0a478066b3c5bbce23af3f521b13c.html#__shared_params__[version]=v3&__shared_params__[light_experiment_assignments]=%7B%22token%22%3A%222ec63596-e651-4980-8b54-37972d732332%22%2C%22assignments%22%3A%7B%22elements_controller_frame_shrink%22%3A%22treatment%22%7D%7D&wait=false&rtl=false&publicOptions[buttonHeight]=40&publicOptions[buttonTheme][applePay]=black&publicOptions[buttonType][applePay]=plain&publicOptions[paymentMethods][applePay]=always&publicOptions[paymentMethods][googlePay]=never&publicOptions[paymentMethods][paypal]=never&publicOptions[paymentMethods][link]=never&publicOptions[paymentMethods][klarna]=never&publicOptions[paymentMethods][amazonPay]=never&publicOptions[billingAddressRequired]=false&publicOptions[emailRequired]=false&publicOptions[phoneNumberRequired]=false&publicOptions[shippingAddressRequired]=false&elementsInitSource=stripe.elements&elementId=expressCheckout-c88be4a7-0649-45b9-9e5d-b411c596efdd&componentName=expressCheckout&keyMode=live&apiKey=pk_live_51MY7MAJpkMI3TeyIX46u9Lw9SPykpgqtx5XmdN2lzDcmYpStqGMo4uxYGmIe9broRHd6QQfIDEsYlxxxyzQdyadF00RNavuMRq&frameMessagingStrategy=direct&controllerId=__privateStripeController7091" title="Bezpieczne pole szybkiej finalizacji" style="border: 0px !important; margin: -4px; padding: 0px !important; width: calc(100% + 8px); min-width: 100% !important; overflow: hidden !important; display: block !important; user-select: none !important; transform: translate(0px) !important; color-scheme: light only !important; height: 8px; transition: height 0.35s, opacity 0.4s 0.1s;"></iframe></div>
After deleting this element or settings custom css for #place_order it started working normally… Not sure what caused the issue.
Strangely enough, it works flawlessly on a mobile device without custom CSS. On a desktop, when I reduce the window size to mobile size, the button also magically starts working…
