Square credit card number field

Hi there @jason45kim,

I’m using square for credit card payment processing.
In the mobile browser, the credit card number field doesn’t show the full 16 digit credit card numbers. The field is too narrow to contain all 16 digits.

Square payment fields can be affected by your theme, so this is the first thing to test that comes to my mind.

Can you please verify if switching your theme to Storefront resolves it? If yes, please reach out to your theme developer to report that.

Cheers!

I’m using Kallyas theme and see the same issue. I haven’t tried the Storefront theme yet, but I’d be interested to know what theme @jason45kim is using.

Hi

The storefront theme shows all 16 digits but other themes still not working.
I’m using Astra theme and already contacted them for support.
Their answer is like below

I checked your query in detail. It seems like the font size comes via JS.

I tried to check this by switching to another theme like twenty-seventeen. The issue persists.

Please see here: https://share.getcloudapp.com/Koue84Dd

This implies that the issue is not coming from the theme. Could you please contact the respective plugin authors regarding this.

Thank you.

I would assume this could be easily fixed by adjusting the input fields size and/or padding via CSS.

I’m having the same problem and I’m using a different theme. I can use the Square plugin as an outdated version but none of the recent updates allow the field to be big enough to check out. Now I’m using an outdated version of the plugin since it’s the only one that will work, not ideal since this should be up to date and secure. Would it help I send support the last version of the plugin that worked correctly on the UI side?

I reached-out to the Kallyas theme people at Hogash Studio, and they provided a few lines of CSS that fixes the width issue. The Square input fields are now appropriate width in mobile mode, so I’m good now.

Hi there @xseedalena, @resonancedesigns, @jason45kim,

I’ve brought the issue to our developers’ attention and I’ll notify you of their comment as soon as I get it.

Cheers!

Hi there @xseedalena, @resonancedesigns, @jason45kim,

We had a discussion with our developers around the issue raised here and they commented that we don’t provide extra styling for checkout fields and leave it up to the theme.

It’s difficult for us to anticipate every possible theme styling and after having many issues created by theme compatibility styling, we’ve decided to remove as much of it as possible.

The outlook of Storefront theme with mobile Square shows that it is possible to properly style it with CSS:

Link to image: https://d.pr/i/xQYJ2U

@harleec maybe you can share the CSS code provided by your theme authors so others could tweak and use it for their themes?

Thank you ??

Below is the CSS that I received from the Kallyas theme developers. Previously, the theme wasn’t utilizing the full width of the mobile screen, causing the Square fields to be compressed and/or wrapped.

@media (max-width: 767px) {
.zn-wc-pages-style2 .checkout.woocommerce-checkout {
padding-right: 0;
padding-left: 0;
}
.zn-wc-pages-style2 .checkout.woocommerce-checkout .woocommerce-shipping-fields h3 label {
margin-left: 21px;
}
}

Hi there @harleec,

Thank you! I hope that would serve others as a good starting point ??

I’ll mark this thread as resolved now. Cheers!

I don’t think this is actually resolved…

I have this problem I am using the Astra theme. I have tried the Storefront, Twenty Seventeen, and Twenty Twenty themes (and others) and the problem persists across all themes.

The credit card entry on the payment form has a font size set to 1.3em, if I insprect and set it to 100% instead of 1.3em it displays correctly.

How and in what file do I need to update this so that it is fixed?

Thanks in advance.

Hi there @alistairjross,

Storefront theme shows Square fields properly on my test site (I shared a screenshot above).

Can you please share a screenshot of what you see and which device you use? I recommend https://snipboard.io/ for easily sharing screenshots – please follow the instructions on the page, then paste the URL in your reply.

Cheers!