Hi there, I have been experiencing issues with Stripe integration into Wordpress since I hooked up to Cloudfare. I need to turn off Rocket Loader for Payment pages, but I’ll be completely honest - I have no idea where to start, and what I’ve found online is way over my head.
Rocket Loader is preventing Captcha working on the page I have set up to accept updated credit card details, and it’s also preventing me uploading a logo to my popup stripe form.
Examining the Google ReCaptcha issue, it can also be traced back Cloudflare. There’s the following javascript error in the web console of the page (although I can’t reproduce it in full here as I’m limited to two links in my message):
When I try to add a logo to the stripe popup window, (https://checkout.stripe.com/) is throwing an error,
because Stripe downloads the logo image for some processing. Cloudflare is rejecting the request, presumably because it looks unfamiliar. I believe that I need to add a “pass-through” exception for the logo URL in my Cloudflare configuration but again, I don’t know how to do this.
If anyone can give me a beginner’s guide to fix these two issues, I’d be enormously grateful.
Many thanks!
I can see that I can turn off RocketLoader altogether - but if there’s a way to exclude these two issues from RocketLoader, that would be preferable, as I want to maintain site speed.
I don’t suppose you have the patience to explain to a Cloudfare beginner how to do that do you as I have absolutely no idea? I tried looking online, but it made no sense to me. Front end development and a bit of css is my limit at the moment. I basically need to know what code to insert in the page rules - my knowledge is that basic
So if you want to leave Rocket Loader on for the root and all but one directory, in Page Rules, you would Add a setting then select Disable Performance for something like example.com/payments*.
Thank you so much - that has fixed the issue regarding ReCaptcha. But I haven’t been able to fix the Stripe Image being blocked. I have added two rules - disable performance and security for the url of the image I want to use for the Stripe logo, but it still isn’t working. Any suggestions re what other options I can try in Page Rules to get this to pass-through?
Thank you so much for all your help - stoked that I’ve fixed one of the issues at least!
There must have been a caching issue, because the page rules have now fixed both issues. However, one issue remains - I use Printify to integrate my dropshipping into my store, and it’s showing Javacript errors caused by Cloudfare. The images are not displaying as a result. The url in question is https://kiwiearthmother.store/new-zealand-designer-apparel-home/kids-art-heavy-cotton-tee-fish-by-selby/. I don’t want to have to switch off all minification options and wondered if there’s another solution that just enables Printify to pass through?
Here’s a screenshot of the errors on the Inspector console.
I have since tested with RocketLoader off, and this is the culprit. I know it’s possible to add the following attribute to the relevant script tag - <script data-cfasync=“false” src="/javascript.js">
But I’ll be completely honest, I have no idea how or where to locate the script tags to add the attribute? Some advice on how to do this would be very much appreciated.
Modifying the script tags is a site-wide change. Its the same leaving Rocket Loader off. Its better to do what @Withheld said. Create a page rule so just your ecommerce pages dont use rocket loader.
Personally I receommned not using Mirage or Rocket Loader at all.
