Multi Problem Over Different Vendors, Helix, SP Pagebuilder, Event Booking On IOS Safari - Question | JoomShaper
Back to the questions

Multi Problem Over Different Vendors, Helix, SP Pagebuilder, Event Booking On IOS Safari

T

Torsten.S

SP Page Builder 1 month ago

Well, longer Text, also to Template Builder / Maintainer, Event Booking and so on

Issue: Square Card Payment field failing intermittently on iOS Safari Component: EventBooking 5.3.1 Payment Plugin: os_squarecard 4.5.0 CMS: Joomla 5.4.1 Template: LT Joyfull with Helix Ultimate + SP Pagebuilder Description of the Problem

Square’s embedded card payment fields inside EventBooking work on:

Desktop (Firefox, Chrome, Safari)

Android (Chrome)

Some iOS Safari versions (e.g., iOS 15.8.5 confirmed working)

However, on many newer iOS Safari builds, the checkout process fails in one of these ways:

A) The Square card iframe loads, but the Terms checkbox becomes unclickable

Safari WebKit appears to create an invisible overlay/hitbox above the form elements, preventing interaction with:

Terms & Conditions checkbox

Sometimes the Captcha field

The iframe is visually correct but sits on a higher z-index on iOS.

B) On certain iOS versions the payment does not complete

The user presses Register & Pay, but:

Nothing happens, OR

The page reloads back to /tickets, OR

The Square token is never generated

This only occurs on iOS Safari — Android and PC work reliably.

Technical Findings • The Square iframe loads correctly

The browser console confirms:

main-iframe.html loaded successfully Square JS v1 loaded Card Element initialized

• CSS/JS overlays from the template previously caused click-blocking

This was fixed by removing all custom CSS/JS overrides.

After cleanup:

✔ Terms checkbox works ✔ Captcha works ✔ Square iframe visible ✔ Payments succeed on iOS 15.8.5

• However, failures still occur on newer iOS Safari versions

Based on user reports and logs.

Relevant Access Log Example (Successful iOS Purchase) “POST /tickets?task=cart.process_checkout” 303 “GET /tickets/registration-complete” 200 User-Agent: iPhone OS 15_8_5 Safari/604.1

This confirms the flow works in some iOS environments.

Remaining Problem

Despite the success on certain versions, other iOS Safari builds still show:

Inability to click the Terms checkbox

Square token not generated

Payment form not completing

Random failures depending on iOS WebKit version

This suggests an issue with:

❗ Square Web Payments SDK + iOS WebKit iframe interaction

AND/OR

❗ The outdated os_squarecard 4.5.0 plugin implementation inside EventBooking 5. Request for Support For Square Support:

Please confirm whether the Web Payments SDK version that EventBooking uses (likely older) has known issues on:

iOS 17.x

iOS 18.x

Safari’s dynamic state partitioning

iframe hitbox / focus handling

token generation failures on embedded forms

We need guidance on:

Any required JS updates for iOS WebKit.

Whether Square recommends replacing embedded card forms with Web Payments SDK v2.

A fix for iframe sizing or focus issues on Mobile Safari.

For EventBooking (JoomDonation) Support:

Does os_squarecard 4.5.0 include the latest Square Web Payments SDK?

Has the plugin been updated for iOS 17–18 WebKit changes?

Are there known issues with:

iframe overlay sizes

token creation callbacks

z-index / transform handling on iOS Safari

Can you provide an updated plugin version or patch?

Users on newer iPhones are still experiencing failed checkouts, even though older iOS versions now work reliably.

Additional Information

CSP rules are correctly configured (fonts, frame-src, script-src).

No caching system is active.

The iframe loads successfully in all tests.

The issue is specific to Safari on iOS, not macOS Safari.

Your assistance is needed to verify:

Whether the Square JS implementation in EventBooking is up-to-date,

Whether known Square Web Payments issues with iOS Safari apply here,

And if a plugin update or patched SDK integration is required.

With the default Joomla 5.4.1 Template Cassiopeia these issues don’t exist.

The problem is that the templates, as well as Helix, SP Page Builder, etc., are not coded cleanly enough and repeatedly cause issues. Especially when you choose such a technology because you want—or need—to spend less time working on the template, it seems to have the opposite effect. You end up spending more time fixing the various template and plugin bugs from the various vendors than on actually building the website itself.

Certainly this won’t convince me to renew my business subscription. The websites may look nice and appealing, but once you try to adapt them to your own needs, things quickly fall apart. You soon realize that they were thrown together poorly and done in a rush .

So maybe i get a xmas gift und people start fixing some stuff. (Also went to LT Themes and so on)

0
Website
https://www.santaphotoshooting.org
1 Answers
Order by
Oldest Newest Votes
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 1 month ago #212390

Hello Torsten.S,

Thank you for taking the time to share such a detailed breakdown of the issue. I understand how frustrating it is to deal with intermittent payment failures, especially when they occur only on specific iOS Safari versions. I truly appreciate the effort you invested in isolating the variables and documenting your findings so thoroughly.

Based on your analysis, it is clear that:

  1. The Square Web Payments SDK loads correctly on all platforms.
  2. The issue occurs only on newer iOS Safari builds, not on macOS Safari, Android, or desktop browsers.
  3. Several behaviors indicate an iOS WebKit rendering and iframe interaction issue, particularly around hitboxes, z-index stacking, focus handling, and token generation.
  4. Using the default Joomla Cassiopeia template eliminates the issue, while Helix Ultimate, SP Page Builder, and LT Joyfull introduce inconsistent behavior, despite cleanup and removal of overrides.
  5. The os_squarecard 4.5.0 payment plugin used in EventBooking likely embeds an older Square Web Payments SDK version.

Given this, there appear to be two parallel problem sources:

  1. Outdated Square SDK implementation in the os_squarecard payment plugin
  2. Template-level CSS/JS interactions with iOS Safari’s evolving WebKit engine, which handles iframes differently in iOS 17–18

To move forward, I kindly request you to record a clear screencast with Helix Ultimate and Casseopeia separately. So, I get to see the issue happening with Helix Ultimate (or not). You can share screencast via sharing platform like Google Drive, One Drive, Files FM etc.

Notes Regarding Templates (Helix, SP Page Builder, LT Joyfull, etc.)

You are correct that the template stack introduces additional complexity. Even after removing overrides, mobile Safari’s strict iframe handling can expose issues caused by:

  • Nested CSS transforms
  • Overflow rules
  • Animated containers
  • Invisible overlay elements
  • Elevated stacking contexts created by Page Builder rows/columns
  • Helix template scripts manipulating DOM event layers

This can lead to exactly the type of hitbox and focus problems you observed.

That said, modern Web Payments SDKs are expected to handle these scenarios robustly, so plugin-level updates remain essential.

I understand your concerns about template and builder reliability, especially when you selected these tools to streamline your development process rather than spend time debugging third-party interactions. Your experience is completely valid, and I hope that with coordinated effort from Square, EventBooking, and the template maintainers, we can identify a lasting solution.

If any of the vendors can provide updated builds, patches, or even temporary workarounds, it would certainly help avoid further user-side payment failures — and perhaps arrive just in time for the holiday season.

Thank you again for your detailed report, your patience, and your persistence in troubleshooting across multiple iOS environments. We look forward to your updates.

Best regards

0