How to Resolve Stripe Payment Gateway Icons Displayed in Large Size and Credit Card Fields are not Editable?

In this article, we will help you to understand and fix the issue with the Cart Icons displaying in Large Size and the Card Fields are not editable for the Stripe Payment gateway.

There could be several reasons for this unexpected behavior. The main reason behind this issue is that the Checkout page and the Stripe’s Ajax call to get the CSS & the card fields get cached at the local & the server-side. 

As the stripe’s Ajax call is cached then the website sends the request to get the data it receives the 403 response error. 

You can find this 403 response error message in the browser’s console area. To view the console area you need to follow the below steps.

• Open the page where these issues are occurring
• Right click the the mouse button on that page and select the inspect option
• Now, select the Console tab from the opened inspector tool

Due to this 403 response error, the stripe’s JS is not fully loaded and thus does not returns any CSS file which has the CSS for the card icons and the HTML of the card fields. So, as there is no data the response is not correctly evaluated by the website it thus generates these issues on the Checkout Page.

There could be other reasons behind this issue and they are as follows –

1. Using a firewall plugin: Sometimes, the firewall may block the request/response if it finds any suspicious activity.
2. The host/server is not allowing that request for other pages than WooCommerce: CartFlows page is a custom checkout page which is not the WooCommerce’s checkout page. So, usually, all the hosting providers have already excluded the default checkout page from the restriction but not the CartFlows. So you have to exclude it from the cache and other settings manually or by contacting the hosting provider.
3. Not using the correct Cache plugin or Cache setting: Cache is a crucial part of any website. It helps websites to load faster but if that plugin is caching the dynamic pages such as cart, checkout, and the dynamic data calls then this should be excluded. Here is the article for disabling caching.
4. Conflict with one or more plugins: If all of the above options did not solves the issue then it can be a conflict with the plugin or theme. To find out the conflict you can follow these troubleshooting steps.

Common Questions!

What is a 403 response error?

Receiving a 403 response is the server telling you, “I’m sorry. I know who you are – I believe who you say you are – but you just don’t have permission to access this resource. Maybe if you ask the system administrator nicely, you’ll get permission. But please don’t bother me again until your predicament changes.”

What to do if the issue is not solved?

If you have cleared the cache and excluded the CartFlows Checkout page from the server as well as a local cache and still facing the same issue then please follow the below steps.

• Open the page in the new tab
• Open the inspect element on that page and go to the Console tab of it.
• Check for any possible JS error if any.
• Check the file name from which the error is coming by hovering on the error or else there will be files mentioned for reference.
• Contact the particular author of the plugin or open a support ticket from the CartFlows website.

Note: As the Payment Gateway requests are dynamic and used to fetch the fresh data for the current user that is why they are not cached.