Can’t enter input Stripe details

Hi @vinzmendoza123,

Thank you for reaching out and providing a detailed description of the issue you’re experiencing with the WooCommerce Stripe Gateway. I’ve tested this on my test website to see if I could replicate the issue, but everything was working properly. To help us narrow down the cause of the issue, could you please perform a conflict test? Here are the steps:

1. Deactivate all plugins except WooCommerce and WooCommerce Stripe Gateway.
2. Switch to a default WordPress theme like Twenty Twenty.
3. Check if the issue still occurs.

If the issue is resolved, reactivate your theme and plugins one by one until you find the one that’s causing the conflict.

If the issue persists, please share with us the System Status Report which you can find via WooCommerce > Status > Get system report > Copy for support. You could copy and paste your reply here or paste it via https://gist.github.com/ and send the link here.

Please let us know the results of your tests. We’re here to help!

?? hey @vinzmendoza123

I’m using WooCommerce Stripe Gateway and is at version 8.0.0. I tried to rollback to 7.3.2 but the problem is still there.

Just to add, this sounds like the issue is not with the WooCommerce Stripe Payment Gateway.

To clarify, did you already have a chance to test whether the same issue persists across classic and block checkout fields, or otherwise?

When did this started happening? Was there a backup available at that point in time? Did you already have a chance to revert to it, and see what has changed? (theme/plugins added/updated, for example)

One solution I found was having the user change country. After that, the input fields turned back to normal and you can input again.

Could you please elaborate further on how exactly are the customers directed to change country?

I hope this is helpful! We look forward to your response. In the meantime, please let us know if you have any further questions or concerns.

We haven’t heard back from you in a while, so I’m going to mark this as resolved – we’ll be here if and/or when you are ready to continue.

Hi @anastas10s

Apologies for the late response.

To clarify, did you already have a chance to test whether the same issue persists across?classic?and?block?checkout fields, or otherwise?

I haven’t tried this one yet. Going over the links of these two, I’m confused on recreating the steps to this as I can’t find the options being mentioned. The website is using Divi as the theme. I assume this using block theme but can’t figure out how to recreate the steps mentioned.

When did this started happening? Was there a backup available at that point in time? Did you already have a chance to revert to it, and see what has changed? (theme/plugins added/updated, for example)

Unfortunately, I don’t recall when this happened exactly. The only way for me to try was to run a separate backup locally to test but the issue is the payment fields won’t show locally since I assume this requires SSL or it just won’t show locally for security reasons. I don’t think deactivating all plugins at once is an option since the website is live.

Could you please elaborate further on how exactly are the customers directed to change country?

It’s not that a customer is directed to change country but more of a workaround I found while testing. For example a customer is on the checkout page, initially the customer won’t be able to add their payment information on the respective Credit Card section fields for Stripe. But say, I update my billing address to a different one, somehow the payment details reloads and the Credit Card section fields goes back to normal and the customer can type in the fields. But I feel this is more of a hacky alternative rather than a solution.

?? hey @vinzmendoza123

Thank you for reaching back, with further details on this.

The website is using Divi as the theme. I assume this using block theme but can’t figure out how to recreate the steps mentioned.

In this case, best make sure Divi theme/plugin files are updated to their latest version, and fully support the WooCommerce version in use at the site.

The only way for me to try was to run a separate backup locally to test but the issue is the payment fields won’t show locally since I assume this requires SSL or it just won’t show locally for security reasons. I don’t think deactivating all plugins at once is an option since the website is live.

Feel free to create a local test site, from a backup, while enabling test mode for the Stripe plugin — as detailed here, in its documentation.

While testing locally, you could switch to a default theme, like TT3, and see if the issue persists without having any of the Divi functionality activated.

It’s not that a customer is directed to change country but more of a workaround I found while testing. For example a customer is on the checkout page, initially the customer won’t be able to add their payment information on the respective Credit Card section fields for Stripe. But say, I update my billing address to a different one, somehow the payment details reloads and the Credit Card section fields goes back to normal and the customer can type in the fields. But I feel this is more of a hacky alternative rather than a solution.

Let’s look further into this (and if it persists) when testing with a local instance is ongoing.

I hope this helps! We look forward to your response. In the meantime, please let us know if you have any further questions or concerns.

Feel free to create a local test site, from a backup, while enabling test mode for the Stripe plugin — as detailed here, in its documentation.

While testing locally, you could switch to a default theme, like TT3, and see if the issue persists without having any of the Divi functionality activated.

I did enable the test mode for Stripe on a local test site. It seems to be working properly and the fields are accessible.

I also switched themes and it works fine as well.

One thing I noticed was that in my local test site, when I load the Checkout page, it loads for a bit then after the load it goes to the normal state (See attached image for reference). The Checkout page on the live website is not doing any loading state upon visiting the page.

I’m thinking if this is the one causing the fields to not work. As I mentioned before when changing a billing address, the loading will happen and the fields can now be accessible. I’m not sure what’s causing the checkout page to not do the loading state upon visiting. Maybe there’s a way to force the loading state upon visiting the page?

Appreciate your patience and help.

?? hello again @vinzmendoza123

I did enable the test mode for Stripe on a local test site. It seems to be working properly and the fields are accessible.

I also switched themes and it works fine as well.

That’s great to hear! Thanks for letting us know.

To clarify, when switching themes, were the card detail input fields showing as expected at all times, or otherwise?

One thing I noticed was that in my local test site, when I load the Checkout page, it loads for a bit then after the load it goes to the normal state (See attached image for reference). The Checkout page on the live website is not doing any loading state upon visiting the page.

That sounds like an issue with how caching might be configured at the live server. Feel free to reach out to the site’s hosting provider about this, and/or the support channel of any caching/performance plugins that might be installed.

I hope this is helpful! Please let us know if you have any further questions or concerns.
We will be happy to help you further.

To clarify, when switching themes, were the card detail input fields showing as expected at all times, or otherwise?

Yes, no issues whatsoever when switching themes.

That sounds like an issue with how caching might be configured at the live server. Feel free to reach out to the site’s hosting provider about this, and/or the support channel of any caching/performance plugins that might be installed.

I’ll probably have to need more time to get information on this.

I wanted to give more information that I found. It seems there’s an error in the console that shows in the live website but not in the local test site. Refer to the image attached. I think it is something related to the checkout since it is referring to checkout.js and something about rocket-loader.min.js, but correct me if I’m wrong. You can visit the live website checkout page here. Though you might need to add a product to the cart to see the checkout page.

Hey there!

Yes, no issues whatsoever when switching themes.

As I understand the theme you were using and that has the issue is Divi, right?

Have you had a chance to contact their support so they can take a look at the issue?

Since the issue is solved when you switch to a default theme, it is most likely the theme is the cause.

Also, on the test site, do you have all the plugins you also have on the live site or do you only have WooCommerce and Stripe?

Looking forward to your reply.

Have a wonderful day!

As I understand the theme you were using and that has the issue is Divi, right?

No, I think Divi is not the issue as my local test site is using Divi but the input fields work properly.

Also, on the test site, do you have all the plugins you also have on the live site or do you only have WooCommerce and Stripe?

Yes, the local test site has the same plugins as the live site activated but the local test site works properly.

I also tried to deactivate all plugins except WooCommerce and WooCommerce Stripe Gateway on the local test site. Sure enough it still works on the test site.

Hi

No, I think Divi is not the issue as my local test site is using Divi but the input fields work properly.

This may also be related to a cache or CDN issue. Do you have any of those for live but not for your staging site? Additionally, can you check your Divi → General → Performance options to make sure they match on your staging and live site?

Thanks!
-OP

For anyone experiencing this issue and using the Divi builder. I was experiencing this issue on a client’s website and the problem was with using the Divi builder on the checkout page. I removed the checkout Woo Modules and replace with a text box with the default Woocommerce shortcode [woocommerce_checkout]. This resolved my issue. I’ve reached out to Elegant Themes to report the issue. Hopefully they will address it soon.

Nevermind. The workaround above did not work for me either.

Hi there @lwtrumpet,

Nevermind. The workaround above did not work for me either.

Sorry to hear that the workaround you shared above did not work. As you’ve mentioned reaching out to Elegant themes, they should be able to address the issue from their end.

You can share their response with the community to assist anyone facing a similar issue.

Thanks for your patience and understanding.