Zooming in on Android web sdk

Questions
1

hi! we noticed on Android that for some reason when user clicks to checkout with square, it zooms in a ton. is there a way to prevent this from happening? thanks!

1 Like
2

:wave: Do you have the site address where the Web Payments SDK is loaded to where we can see this behavior and replicate? :slightly_smiling_face:

3

Is it possible to somehow send you a video? I posted in on the Slack channel, but I can’t seem to upload videos on here. Attached is a pic.

image
image946×1982 148 KB

4

:wave: I tested on iOS and Android and it did it for both. I believe this is expected given the screen size of the mobile device when the customer goes to enter the card information. Are you not wanting it to zoom in at all? :slightly_smiling_face:

5

No, since it looks a bit strange when it zooms in so much. Is it possible to prevent the zoom in? Thanks!

6

Bryan, I am in the processing of moving my web ordering system from SqPaymentForm to the new Web Payments SDK. It really is completely unusable on an Android device. When the user starts typing a card number it zooms unnecessarily but you can still at least see what’s going on. Once the user finishes entering the card number it zooms again - so large that all that is visible is a very small portion of the window - and you cannot see the input fields at all.

You can manually reduce the zoom level to the point where you can continue but by then most of my customers have given up. This is really a serious issue.

It used to occur randomly on some iOS devices with sqPaymentForm but I could never reproduce it on the iOS devices I have available. With the new SDK my iPad seems OK but my Android phones and tablets are basically unusable. Here is a screenshot.

Screenshot_20220527-150525_Brave
Screenshot_20220527-150525_Brave1080×2400 137 KB

If you want to try it go to Fernleaf Bakery - you have to order something and when you checkout use an email and junkable password - this is our qa system.

I really need a resolution to this since the slightly more functional SqPaymentForm is being discontinued in July.

Thanks,
Thys Geldenhuys
Fernleaf Bakery

7

:wave: Thanks for providing an example. The team is looking into this. :slightly_smiling_face:

1 Like
8

+1 for this. Our customers have also started complaining about this issue :grimacing:

9

Hi! Any known workarounds for this?

10

Same issue here! Clientes are also complaining about it.

11

Hey all, got an update from the team on this. It happens when a mobile browser detects on a tap event that the form needs to be zoomed in for the customer:

  • Could be too large or a non-responsive page

  • Could be font size is too small (16px or 18px is baseline)

  • We’re 16px

It can be solved by adjusting page size, or disabling zooming with a viewport change or style change.

  • Viewport change will need to be from the base of your website.

  • Setting the style of the iframe body or input to touch-action:none stops the issue (Disable’s swipe zoom and touch zoom)

We recommend:

  1. Add maximum-scale=1 to your viewport.

  2. Ex. Add <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 ">

  3. This will disable all zooming (or limit it depending on the maximum-scale value)

  4. Add a style touch-action: none to the container that holds the SDK iframe

  5. Ex. <div class="sq-container" style="touch-action: none"> Iframe_rendered_here </div>

  6. This will disable swipe zoom and touch zoom on this element. Better than disabling it on the whole page.

  7. Adjust the web page to a more responsive width and height styling. :slightly_smiling_face:

1 Like