Postal code on its own row on iPad

Hi!

Does anybody know, why SqPaymentForm renders so weirdly on an iPad? It is putting the postal code field on its own row, left aligned. See attachment. Funnily enough, it looks okay on an iPhone. And here I thought, they both use the same browser…

All other browsers/devices I’ve tried look fine. Firefox, Chrome, ME Edge, IE11, Android Phone, iPhone.

recalculateSize() doesn’t help either.

Thanks,
Frank

What iPad and iOS version? Are you embedding the form in another div (as the “Donate” button looks squashed as well)? I tried loading our sample on an iPad Pro 12 using iOS 13 in Safari, and it looks correct. Note the styles can also be changed by you as well, those just look like the walkthrough, but you can definitely change it to fit your need.

Can you provide an online link to your live sample? If that renders correctly, then it would in fact just be me going over my changes one-by-one and figure out what screws it up. I’ve made some changes, nothing so major though that I would have expected to cause a layout change like this.

It’s an iPad mini 2 (yes, I know it’s old) under iOS 12. I can reply with the exact version tonight, I assume it is 12.4.8.

I don’t have a live sample running publicly, but it literally is the download from the walkthrough. I didn’t change anything other than the application id in the JS.

Sorry for the delay. I am getting “Secure Connection Failed - Error code: SSL_ERROR_RX_RECORD_TOO_LONG” from the web server in the Walkthrough. This is when connecting to port 3000. Is there another port for SSL connections by any chance? Connecting without SSL doesn’t work of course as SqPaymentForm doesn’t render and throws an error message that only https is supported. iPad Mini 2, iOS version 12.4.8 confirmed.

Honestly I’m not familiar with that error; I believe for HTTPS the port should be 443, but that’s getting a bit beyond my scope of support unfortunately. I also see suggestions around upgrading your server to use TLS 1.3, doing a quick Google search.

Ok, so I can’t get the nodemon web server from the walkthrough to work with https. You may want to have somebody look at that documentation as well, it keeps referring to "Open a browser and enter http://localhost:3000. Unless there is there is normally a redirect in that web server that for some reason does not work on my system, regular http connections do not work and throw a “Uncaught HttpsRequiredError: SqPaymentForm can only be embedded on sites that use HTTPS. See: https://developer.squareup.com/docs/payment-form/troubleshooting#the-sqpaymentform-iframe-is-not-loading” error.

So, I did the next best thing and copied the active files (index.html and mysqpaymentform.css are the only required files as far as I can tell) over to my own web server (lighttpd) and tried again with my iPad. And I still see the issue described above. And just to be extra sure, I also installed apache2 and copied the two files there, same weird layout on the iPad.

Thus, it really does not look like it is anything I did that caused this, the problem must be at your end.

Sorry for the misunderstanding here. The walkthrough doesn’t use HTTPS; The walkthrough is meant to be run on your localhost, which doesn’t require HTTPS. If you plan on using HTTPS, then there’s some additional steps, which I’m not super familiar with, but I can try to assist (this is not on Square’s side, to be clear).

Using Express, which the walkthrough does, I believe you can do something like:

var https = require('https');
var privateKey  = fs.readFileSync('sslcert/server.key', 'utf8');
var certificate = fs.readFileSync('sslcert/server.crt', 'utf8');
var credentials = {key: privateKey, cert: certificate};
var express = require('express');
var app = express();

var httpsServer = https.createServer(credentials, app);
httpsServer.listen(8443);

Where privateKey and certificate are pointed to your SSL key and certificate.

sjosey came up with a solution that works for me:

For the “sq-card-number” class in the CSS, add the following two lines:

width: 1px;
min-width: 100%;

For the “third” class in the CSS, replace

width: calc((100% - 32px) / 3);

by

width: 1px;
min-width: calc((100% - 32px) / 3);