Hello Square Developer Community,
We are integrating the Square Web Payments SDK to process payment transactions inside a dynamic client intake portal (hdclaims.co.uk).
Issue Description:
When initializing the payments.card() container inside a dynamic DOM view, calling card.tokenize() intermittently throws an UNAUTHORIZED or tokenization_failed error on mobile Safari. The identical API credentials and location ID function properly when tested on desktop Chrome environments.
Technical Setup:
API Version: Square Web Payments SDK v1.x / REST API v2
Target Domain: (hdclaims.co.uk)
Server Stack: Nginx with TLS 1.3 Reverse Proxy
Browsers Affected: Mobile Safari (iOS 17.5), Mobile Chrome 125
Steps Taken:
Validated that Application ID and Location ID match Sandbox/Production environments correctly.
Verified CORS headers (Access-Control-Allow-Origin) explicitly permit origin handshakes from our web application.
Inspected browser console logs; the iframe container generated by Square SDK loses event listener scope when single-page view transitions reload dynamic DOM nodes.
Is there a recommended lifecycle method or re-initialization hook required when re-mounting the Square Web Payments SDK on dynamic .co.uk web applications with client-side DOM updates?
Any technical insights from Square API developers would be greatly appreciated!
