Styling Square Payment Input Fields

Resolved mcmayhem
(@mcmayhem)

5 years, 2 months ago

It seems that Square uses iframe elements to deliver the credit card input fields. I’m assuming this is for enhanced security which is great, but it leads to a big issue in trying to style those fields.

Because the fields are delivered through iframe, I don’t have direct access to the style via CSS. This is a particular problem for me because the input fields have absurdly large font size making it get cut off on mobile devices.

To be clear, I’m not talking about anything outside the iframe elements such as the labels or the surrounding elements.

I’ve seen this question brought up in two other threads I could find. In both cases it seems like the person gave up and switched to another plugin, which I would like to avoid.
Topic 1: Square credit card number field
Topic 2: Issue customising the css for square payment form

In the first topic, it is suggested to switch to the “Storefront” theme to see if that fixes it, but I don’t see how that could possibly fix the issue as the CSS for the iframe content is determined by the document within the iframe. If there is a way to do this via CSS, please let me know what selector to use and that will take care of it.

In the second topic, the response seemed more what I was expecting. The style cannot be changed by CSS alone because of the iframe document. Unfortunately, the response was vague about what WOULD fix the problem. It just says “It would require custom coding”.

Can anyone elaborate on that? Is there some kind of filter or action hook I can use to manipulate the font size of the payment input field values?

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Support Grigorij S. a11n
(@grigaswp)

5 years, 2 months ago

Hi there,

Thank you for reaching out!

Indeed, the size of credit card fields cannot be controlled as easily as we’d like, unfortunately.

Those are rendered by Square and sent to the checkout page of your site, so regular CSS alone can’t be used to make it smaller. It’s possible to change that but it will require diving into the PHP code and it will not be an easy change and you will need a developer.

I’ve opened an enhancement request with our developers so that they can add a way to adjust the size of these fields, however, it will likely take a while before such functionality is implemented.

Plugin Support Grigorij S. a11n
(@grigaswp)

5 years, 1 month ago

Hi there,

I was able to change the width and the height of the fields with some custom CSS:

https://d.pr/i/s5ikqD

https://d.pr/i/mdnmkG

Although quite a few changes to CSS might be necessary in order to make the Square credit card fields look good with the smaller size and I can’t promise this will work well for you, but I hope this helps!
Plugin Support Grigorij S. a11n
(@grigaswp)

5 years, 1 month ago
This CSS code can be used as a base for further adjustment:
```
.wc-square-credit-card-hosted-field {
	max-width: 50%;
	font-size: x-small
}
```
Further adjustments to the CSS code might be required in order to make the fields usable/good looking. Please note that the above code comes without a warranty.
Thread Starter mcmayhem
(@mcmayhem)

5 years, 1 month ago
Hey there and thank you for the replies and ideas, I appreciate you following up on this.

Regarding the rendering of the fields, I figured as much and I suppose arguments can be made in favor of that from a security perspective.

I do a significant amount of work in PHP and while I could make changes on the backend to the plugin directly, I’d prefer not to as it would mean keeping track of all the changes so that I could reinstate them once the plugin updates.

Thank you for putting in the enhancement request. It would be great to have the ability to style not just the size but the other elements of the field as well.

For my situation, I got by with some simple css to set the zoom on the field:
```
.woocommerce #payment div.payment_method_square_credit_card .wc-square-credit-card-hosted-field
    {
        width: 115%;
        -ms-zoom: 0.85;
        -moz-transform: scale(0.85);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.85);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.85);
        -webkit-transform-origin: 0 0;
    }
```
It’s a rather hacky way to go about it, but it suits my needs as it provides plenty of room for the 16-digit card numbers without them being covered by the credit card icon.
Plugin Support Grigorij S. a11n
(@grigaswp)

5 years, 1 month ago

Hi there,

Thank you for the additional details, I’ve added those to the enhancement request as well!

It’s hard to say how long will it take before such changes make it into a release of Square for WooCommerce extension but this should help other users attempting to style the Square credit card fields.

Have a lovely day!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Styling Square Payment Input Fields’ is closed to new replies.

Tags