Recent issue with credit card fields

Solved
Highlighted
Excursionist
15 1 4

Hello,

Our company has recently seen an uptick of calls about the checkout process with our Shopify store. It seems the credit card fields don't get loaded (they sit and spin in the browser).

In one case, we found a user was using IE 11, but in some cases even modern browsers are not working. I know that sometimes when end users order from a company with strict web filtering rules, this can happen. But it's odd that this just started happening.

Have any other store owners seen this issue?

Ben

1 Like
Highlighted
New Member
2 0 1

we have just started seeing this issue - appears to not be an issue on Chrome but we shouldn't have to worry about the customers browser - I hope shopify plans to address this

1 Like
Highlighted
Excursionist
15 1 4

Good to know we aren't the only ones seeing this

0 Likes
Highlighted
New Member
2 0 0

I am also experiencing this issue with customers.

0 Likes
Highlighted
Shopify Expert
9973 110 1783

Do you see this on a theme without edits? Out of interest, what are your typography settings for checkout?

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
New Member
2 0 0

Hi the font being used is Lato and a logo has been added custom image - the rest is just standard checkout.

0 Likes
Highlighted
Excursionist
15 1 4

We haven't customized the checkout beyond adding our company's logo that I'm aware of. The body text and navigation use Helvetia Neue.

0 Likes
Highlighted
Excursionist
15 1 4

This is an accepted solution.

I just received a reply from Shopify support. They said this guide - https://help.shopify.com/en/manual/shopify-admin/supported-browsers?utm_source=gurucopy&utm_medium=l... - applies to both the admin portal and the storefront, and that we should write our own warnings to users about unsupported browsers.

Here is the code I put in our theme.liquid file, right above our store banner

 

<div id="user-browser" style="position: relative;color: red; font-weight: bold; font-size: 1.5rem;"></div>
<script>
// broswer detect
var isIE = /*@cc_on!@*/false || !!document.documentMode;

if(isIE){
document.getElementById("user-browser").innerHTML = "Your browser is not secure. This site will not support checkout with Internet Explorer 11 or earlier versions. Please use a different browser (i.e. Safari, Edge, Chrome or Firefox).";
}

// end browser detect
</script>

0 Likes