Stripe Credit Card Fields Broken

I guess this one needs to be rid of the async attrib. as well;

<script type='text/javascript' async='async' src='https://js.stripe.com/v3/?ver=3.0'></script>

hope this helps,
frank

Actually…it looks like I may have fixed it. Autoptimize was disabled on my cart and checkout pages. Enabling it seems to have fixed the issue (I’m guessing because it moved the JavaScript files to the footer, after the external Stripe script).

I noticed the external one was async also after I posted initially and I think excluding it will also work.

I’ll keep an eye on it for a little bit to be sure. If I have any more problems I’ll exclude the external Stripe script also.

Thanks for the super fast response by the way.

I’m having the same problem. Can you tell me where you went to enable Autoptimize on your cart and checkout pages? I’ve looked in Autoptimize, WP EasyCart, and on the Cart page itself and can’t find how to enable.

Thanks!

Nevermind, I found and tried both of your suggestions in Async Javascript. But neither worked. I tried both together and each individually. Do you have any other suggestions?

Frank, where would I enter that html to fix the issue? I’m using WP EasyCart (not Woocommerce).

your issue might be similar, but the solution might have to be different Kimberly, can you share your site’s URL so I can have a quick look?

Thanks for replying @optimizingmatters !

Here’s a product page https://kimberlyblaker.com/store/?model_number=1016415

My home page is https://kimberlyblaker.com

I see “jQuery is not defined”-errors on the browser console, so for starters you’ll have to exclude jQuery from being asynced Kimberly.

I tried that, but no luck. I also tried playing around with different settings in Async Javascript without success.

The simple solution is to just deactivate Async Javascript. But when I do, my page speed scores drop by 20 points for both desktop and mobile.

OK, now that that jQuery thing is out of the way, what JS errors do you see on the browser console on the payment page?

Here’s the message I get: “Your WP EasyCart with Stripe has a problem: Stripe is not defined.”

The payment page pulls up except the credit card fields are missing.

But Stripe is defined and works when Async Javascript is disabled.

OK, so what plugin are you using for ecommerce/ cart/ checkout?

Just saw: WP easycart ??

OK, I’ll follow up on this tomorrow

• This reply was modified 5 years, 6 months ago by Optimizing Matters. Reason: I should look first, write second ... ;-)

OK, can you try adding stripe.com to the Async JS “Script Exclusion”-field?

That did it! Thanks so much for your help, Frank!

you’re welcome Kimberly, you’re welcome, feel free to leave a review of the plugin and support here! ??

FYI; I’ve reached out to the wp easycart people for technical info with the purpose of making AsyncJS/ Autoptimize also recognizing it in the context of (not) optimizing cart/ checkout pages.

enjoy your Sunday!
frank