Since upgrading from 3.3.108 to 4.0.11, the express checkout buttons, particularly Google Pay, take around 3–4 seconds to render. By the time they appear, most customers will have long since scrolled past them.
I rolled back to 3.3.108 and they render pretty much instantly. The problem started with 4.0.0 and seems to have got worse with the later versions.
Thank you for contacting Payment Plugins. In 4.0+ the buttons are rendered via an iFrame using Stripe’s JS SDK. This is what makes it possible to offer Apple Pay on browsers other than Safari and iOS devices. Similarly, this is why Google Pay no longer requires the merchant approval process.
seems to have got worse with the later versions.
It’s the same code from 4.0.0 – 4.011. If you’re using the checkout block, the rendering actually got faster because of internal improvements made in the plugin.
Can you share a product page url to your site so it can be reviewed?
Well 3.3.108 renders it very fast and the 4.0.0 versions are very slow, so something is causing an issue. I have updated to the latest version so you can see, let me know when you are done so I can roll back.
Everything looks fine when testing your checkout page and there aren’t any errors with the Stripe plugin.
You do have what appears to be some custom code that’s triggering the following Javascript error:
Uncaught TypeError: $ is not a function at HTMLDocument.<anonymous> (checkout/:2939:31)
The integration for Apple Pay and GPay is different in 4.0.0+. In the past, an HTML button was rendered to the page where as now an iFrame is used. That is because Stripe deprecated the old integration and their recommendation is to use the design we’re currently utilizing.
I would recommend you try a standard theme with Funnelkit disabled. Does that make a difference? Their checkout page templates have some code that relies on MutationObservers and that can cause a delay in the rendering of the express payment buttons.
If it worked fine with 3.3.108, then its not Funnelkit causing it, the rendering is occurring much later in the process in 4.0.0+. If you test it with Chrome on mobile, the Google Pay button is slow to render.
If it worked fine with 3.3.108, then its not Funnelkit causing it
As stated in previous replies to this thread, the way the buttons render has changed in 4.0.0+ and the MutationObserver used by Funnelkit might be causing some delay. My recommendation is to try a standard theme to rule that out as a possibility as part of normal troubleshooting.
I don’t think it’s accurate to characterize it as an issue. As stated previously, the buttons now render via an iFrame where as previously, Google Pay rendered directly as HTML on the page. Directly rendering HTML on the page will always be faster than the iFrame path.
However, direct rendering has been deprecated by Stripe and they are only supporting the new design going forward.
You can continue to use 3.3.108 if you prefer that version of the plugin.
We do have plans to add a loading UX to the express checkout section so there is immediate feedback that express checkout is supported while the buttons load.
Just wanted to add my voice to this thread. I agree that the delay is very long. It takes several seconds to appear, at which point a lot of people will have either bounced or scrolled down without realising Apple/Google Pay is available.
I appreciate this isn’t a bug with the plugin itself, and is caused by the slowness of the iframe of a 3rd party. However I believe this is still an issue that deserves attention. Is there a workaround? E.g. preloading the iframe or delaying the load of checkout until the iframe as had a couple of seconds to load.
We’re working on a skeleton loader for the express checkout which I believe will resolve any concerns with the express buttons loading. Here is an example of it:
