I've a apple pay integration on my website. The new sdk, that allows third party browsers.
My integration works well everywhere, except on third party when I read the QR code it results in a "payment incomplete".
I have gone through several threads in apple dev forums, and several guides on implementation steps and troubleshooting. But I'm still without solution.
When Debugging in iOS device I get: "Application failed to provide a valid merchant session. We can't proceed to authorize the transaction."
I've doublechecked, the values I send to create the payment Session are correct, the domain and merchantIds. (It works well with the same implementation on safari, what's the difference here?)
I've also doublechecked the values i'm sending to the completeMerchantValidation, and they are all in the right format and types.
What else can iIcheck?
General
RSS for tagExplore the integration of web technologies within your app. Discuss building web-based apps, leveraging Safari functionalities, and integrating with web services.
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Activity
Hello,
When I view my website (lasaluade) on iphone or ipad the top of my page bodies are cut off (3-4 first lines). However, on PC, Mac or Android everything is OK (see screenshots).
For the record, I built this site with Wordpress and Divi Builder, and I've the same result on Safari and Chrome.
Not being a developer, I don't know where to look (I just think it's iOS-related).
Have you already had this problem? Do you have any ideas?
Thanks for your help!
Topic:
Safari & Web
SubTopic:
General
I'm currently experimenting to add 3d stereo images in HEIC format to my daily Mars Rover Images website https://areo.info/mars20 which can be opened on a Vision Pro. Only a few images are yet converted into that mode, those on the sol 1411 page.
As I'm currently only working in the Vision Pro Simulator from Xcode, no real 3d effect if of course visible and I'm curious if anyone using the real hardware can confirm that the images are working.
Especially the eye distance correction is important to know about as the Mars Rover camera has a much wider pupil distance than humans and while I entered that distance in the conversion tool, I'm not sure if it worked well. So feedback is welcome!
For those who like to try to create stereo images themselves: I used https://developer.apple.com/documentation/ImageIO/writing-spatial-photos to create a HEIC file from two JPEGs.
How can I set it as a formal payment environment if I can make the payment now without any deduction?
I'm experiencing issues with audio playback in my React video player component specifically on iOS mobile devices (iPhone/iPad). Even after implementing several recommended solutions, including Apple's own guidelines, the audio still isn't working properly on iOS Safari. It works completely fine on Android. On iOS, I ensured the video doesn't autoplay (it requires user interaction). Here are all the details:
Environment
iOS Safari (latest version)
React 18
TypeScript
Video files: MP4 with AAC audio codec
Current Implementation
const VideoPlayer: React.FC<VideoPlayerProps> = ({
src,
autoplay = true,
}) => {
const videoRef = useRef<HTMLVideoElement>(null);
const isIOSDevice = isIOS(); // Custom iOS detection
const [touchStartY, setTouchStartY] = useState<number | null>(null);
const [touchStartTime, setTouchStartTime] = useState<number | null>(null);
// Handle touch start event for gesture detection
const handleTouchStart = (e: React.TouchEvent) => {
setTouchStartY(e.touches[0].clientY);
setTouchStartTime(Date.now());
};
// Handle touch end event with gesture validation
const handleTouchEnd = (e: React.TouchEvent) => {
if (touchStartY === null || touchStartTime === null) return;
const touchEndY = e.changedTouches[0].clientY;
const touchEndTime = Date.now();
// Validate if it's a legitimate tap (not a scroll)
const verticalDistance = Math.abs(touchEndY - touchStartY);
const touchDuration = touchEndTime - touchStartTime;
// Only trigger for quick taps (< 200ms) with minimal vertical movement
if (touchDuration < 200 && verticalDistance < 10) {
handleVideoInteraction(e);
}
setTouchStartY(null);
setTouchStartTime(null);
};
// Simplified video interaction handler following Apple's guidelines
const handleVideoInteraction = (e: React.MouseEvent | React.TouchEvent) => {
console.log('Video interaction detected:', {
type: e.type,
timestamp: new Date().toISOString()
});
// Ensure keyboard is dismissed (iOS requirement)
if (document.activeElement instanceof HTMLElement) {
document.activeElement.blur();
}
e.stopPropagation();
const video = videoRef.current;
if (!video || !video.paused) return;
// Attempt playback in response to user gesture
video.play().catch(err => console.error('Error playing video:', err));
};
// Effect to handle video source and initial state
useEffect(() => {
console.log('VideoPlayer props:', { src, loadingState });
setError(null);
setLoadingState('initial');
setShowPlayButton(false); // Never show custom play button on iOS
if (videoRef.current) {
// Set crossOrigin attribute for CORS
videoRef.current.crossOrigin = "anonymous";
if (autoplay && !hasPlayed && !isIOSDevice) {
// Only autoplay on non-iOS devices
dismissKeyboard();
setHasPlayed(true);
}
}
}, [src, autoplay, hasPlayed, isIOSDevice]);
return (
<Paper
shadow="sm"
radius="md"
withBorder
onClick={handleVideoInteraction}
onTouchStart={handleTouchStart}
onTouchEnd={handleTouchEnd}
>
<video
ref={videoRef}
autoPlay={!isIOSDevice && autoplay}
playsInline
controls
crossOrigin="anonymous"
preload="auto"
onLoadedData={handleLoadedData}
onLoadedMetadata={handleMetadataLoaded}
onEnded={handleVideoEnd}
onError={handleError}
onPlay={dismissKeyboard}
onClick={handleVideoInteraction}
onTouchStart={handleTouchStart}
onTouchEnd={handleTouchEnd}
{...(!isFirefoxBrowser && {
"x-webkit-airplay": "allow",
"x-webkit-playsinline": true,
"webkit-playsinline": true
})}
>
<source src={videoSrc} type="video/mp4" />
</video>
</Paper>
);
};
Apple's Guidelines Implementation
Removed custom play controls on iOS
Using native video controls for user interaction
Ensuring audio playback is triggered by user gesture
Following Apple's audio session guidelines
Properly handling the canplaythrough event
Current Behavior
Video plays but without sound on iOS mobile
Mute/unmute button in native video controls doesn't work
Audio works fine on desktop browsers and Android devices
Videos are confirmed to have AAC audio codec
No console errors related to audio playback
User interaction doesn't trigger audio as expected
Questions
Are there any additional iOS-specific requirements I'm missing?
Could this be related to iOS audio session handling?
Are there known issues with React's handling of video elements on iOS?
Should I be implementing additional audio context initialization?
Any insights or suggestions would be greatly appreciated!
I have a local HTML file used to display mixed content with images and text. Here's the issue: the same file displays everything correctly in Google Chrome, showing both images and text as expected. However, when opened in Safari, only the text is shown—images are missing, which is very strange.
Interestingly, if I remove .png from the title attribute of the tag, the images show up properly in Safari. Alternatively, if I comment out the inclusion of html2canvas.min.js, the images also display correctly (although the layout breaks without it).
I'm not sure if this is a Safari-specific issue. Can anyone explain what might be causing this problem?
Topic:
Safari & Web
SubTopic:
General
We have an app store app that hosts an internal webserver we use as a proxy and it works for a period until iOS 18.3.x decides our cert is no longer valid at which point our customer have reinstall the app. This has only become a problem on iOS18.3. We publish the self-signed with out app, and it is valid and accepted until it's not. We know the cert is valid and our implementation of the local proxy has not changed. If we install a cert on the device and trust it, then the app will start behaving normally again without reinstall. We have replicated this locally and the error we are seeing is:
Error Domain=NSURLErrorDomain Code=-1200 "An SSL error has occurred and a secure connection to the server cannot be made." UserInfo={NSLocalizedRecoverySuggestion=Would you like to connect to the server anyway?, _WKRecoveryAttempterErrorKey=<WKReloadFrameErrorRecoveryAttempter: 0x301111e40>, networkTaskDescription=LocalDataTask <541390E2-65FA-47AB-80B1-10209D6C761A>.<3>, _kCFStreamErrorDomainKey=3, NSErrorPeerCertificateChainKey=(
"<cert(0x108e3b700) s: 127.0.0.1 i: 127.0.0.1>",
"<cert(0x108e3b980) s: 127.0.0.1 i: 127.0.0.1>"
), NSErrorClientCertificateStateKey=0, NSErrorFailingURLKey=https://localhost:8082/Blablal/?device=ios&sftouch=1&pgport=8081&secure=1, NSErrorFailingURLStringKey=https://localhost:8082/blahblah/?device=ios&sftouch=1&pgport=8081&secure=1, NSUnderlyingError=0x301e1d680 {Error Domain=kCFErrorDomainCFNetwork Code=-1200 "(null)" UserInfo={_kCFStreamPropertySSLClientCertificateState=0, _kCFNetworkCFStreamSSLErrorOriginalValue=-9802, _kCFStreamErrorDomainKey=3, _kCFStreamErrorCodeKey=-9802}}, _NSURLErrorRelatedURLSessionTaskErrorKey=(
"LocalDataTask <541390E2-65FA-47AB-80B1-10209D6C761A>.<3>"
), _kCFStreamErrorCodeKey=-9802, _NSURLErrorFailingURLSessionTaskErrorKey=LocalDataTask <541390E2-65FA-47AB-80B1-10209D6C761A>.<3>, networkTaskMetricsPrivacyStance=NotEligible, NSURLErrorFailingURLPeerTrustErrorKey=<SecTrustRef: 0x302670a50>, NSLocalizedDescription=An SSL error has occurred and a secure connection to the server cannot be made.}
Hi,
when I display an HTML page with a on Safari iOS, I get a nice UI. Great! At the first look I see a video frame with an arrow-in-a-circle button in the middle. Very nice. I click on the arrow and I get a fullscreen view while the video begins to play. I watch the video then I pause it then I click on the top-left x button. So I go back to my html page and the video is perfectly there as it was before.
But, there is an annoying new detail. The video frame is really dark, it still presents all the controls and a "different" arrow button to play it again. In other words that nice video-frame, that nice picture, is not longer visible on the page. That nice page with nice pictures has now an almost-black rectangle. Too bad.
Sure I can click on the video (outside the controls) then the controls and the black overlaying frame disappear. I can see that nice picture again. Finally. Well, but the arrow-in-a-circle button to play the video disappeared. Now the user cannot longer understand that's a video to play. It looks just like any other pictures to admire statically.
Is any way to get the previous first look of the video? The one clear, with the current frame and the arrow-in-a-circle look?
HI, please can someone help?
I have a web app where push notifications are in place for Chrome, Firefox, and Edge. Providing the user allows notifications then when they log in for the first time their details are registered to the subscriptions table in the backend. All good so far.
When trying to do the same with Safari on Mac I'm faced with this issue:
"Safari doesn’t support invisible push notifications. Present push notifications to the user immediately after your service worker receives them. If you don’t, Safari revokes the push notification permission for your site."
and the user is not registered in the subscription table with the Safari console just saying variations of this:
[Warning] Notification permission denied. (notifications_frontend.js, line 177, x2)
[Log] Enable Notifications button clicked (notifications_frontend.js, line 245)
[Log] Safari Push Notifications detected (notifications_frontend.js, line 248)
[Warning] Safari Push Permission denied. (notifications_frontend.js, line 278)
I've found this on an another forrum:
"Safari requires that you immediately post a notification when a push message is received. "Immediately" means that it cannot be after some async operation.
If you display a notification immediately from the service worker itself, it will stop displaying that error. I cannot remember 100% but I think if you clear your cache and cookies you will be able to receive push messages again if you accidentally get blocked while testing."
and I've tried adding buttons to trigger allowing notifications but it all seem to late to get the subscription registered in the subscription table.
I'm pretty new to coding so if any has a similar experience and can advice how to get the subscriptions registered when the user logs on for the first time in Safari in a Mac it would be greatly appreciated.
Thanks...
Hello,
We do not have explicitly set it our website, but still Smart Banner appears since we have universal link setup. (current URL matches the universal link patterns set in your apple-app-site-associations file ). Also, I understand it appears only for users having our app installed.
We do not want to show this banner in any case. is there any way to choose not to show the app banner? either setting additional meta or any other way would work.
regards,
Hussain
Hello. In Safari there are no eorking nee skins or walpapers!
Topic:
Safari & Web
SubTopic:
General
Hi,
I’m working with the SFExtensionProfileKey in my Safari Web Extension. As I understand it, this key is to get the UUID of the profile currently in use. However, it seems to be missing (no key in userInfo) when the default profile is active. Also, I haven’t found any API to get a profile’s human-readable name or list all available profiles.
Could someone clarify:
If the value of SFExtensionProfileKey is absent, can I safely assume the default profile is in use?
Is there a supported way to get a profile’s display name?
Does Safari expose an API for getting all profiles?
Thanks in advance for your insights!
I can open an app (e.g. tiktok) from a website of mine by using the deeplink “tiktok://open”, if the app is installed on my iphone. What's the deeplink to launch TestFlight? Thanks in advance
Topic:
Safari & Web
SubTopic:
General
Is it a specification that the Service Worker doesn’t work in an internal iframe only when the parent page in a WebView is file://? It works in Mobile Safari under the same conditions, and we couldn’t find any specification that says Service Worker-like behavior doesn’t work with this combination.
Step to reproduce:
We use Vite to develop the application.
For the iframe in Webview,
Install vite-plugin-pwa with version ^0.20.5
Add VitePWA({...}) to plugins[] array in vite.config.ts
Build and preview the app: npm run build && npm run preview.
We open a Webview with file:// and then open the iframe with the URL to which we preview the app (We use ngrok to create the URL).
Then we open Safari and inspect the Webview but inside the Developer > Service workers tab doesn’t have a registered service worker.
For safari, we do the same step 1-3,
We open Safari browser with the URL that we have deployed the app (The same URL we used in the iframe in Webview).
We go inside the Developer > Service workers tab and it has a registered service worker.
Environment:
Simulator: IOS 18.2
Safari: MacOS 15.2
Expectation: Safari and the iframe in Webview should have a registered service worker inside the Developer > Service workers.
I'm not sure if this is even the right place to ask this, or voice this complaint if there's no fix. If not, please direct me where to go.
I'm trying to switch all my development over to Safari, but the tab sidebar is driving me absolutely insane.
Let's say I have a bunch of tab groups expanded, and I collapse the sidebar to focus on the webapp I am building. When I toggle to show the sidebar again, every single tab group is collapsed.
Why is it 2 clicks to see the tabs in the sidebar?
Even with zero tab groups, and just tabs in the workspace, if you collapse the sidebar it'll collapse the list of tabs.
Is there some hidden setting for this? Who do we have to complain to?
Topic:
Safari & Web
SubTopic:
General
My website ccflood.us is a simple map that uses a CSV file for the data that is displayed on the map. It uses the ESRI JS API.
Recently the points on the map began missing the text in the boxes only on Apple devices that have been upgraded to iOS 18.
Has anyone also had this happen to their site? If you have upgraded to iOS 18, try this site on your iPhone then look at it on an Android phone or your desktop browser. You should seet the values in the boxes and a "+" at points that have no value.
If you've had this happen with your site or have heard of a fix, please reply to this post.
Topic:
Safari & Web
SubTopic:
General
How can i add Authorization header to a wkwebview. I checked https://developer.apple.com/documentation/foundation/nsurlrequest#1776617 which says Authorization header is a reserved http header and shouldn’t be set. I want to set it when requesting a url to the server which will be used for verification. How can i do that?
After upgrading to Xcode 15.2 or above(Till Xcode 16.2), users are unable to open Site B (HTTP URL) from Site A (HTTP URL) within our Browser app when loaded in WKWebView. Clicking the link to Site B results in a spinning wheel, but the site does not load. This issue is not present when the app is built with Xcode 15.0.1.
Additionally:
Users are connected to a VPN, which is required to access the sites.
Site A and Site B are on different domains (cross-domain request).
Expected Behavior:
Clicking the link to Site B should successfully load the site with user information passed from Site A.
Current Behavior:
Clicking the link results in a spinning wheel, but Site B does not load inside WKWebView.
Technical Details:
Both Site A and Site B use HTTP (not HTTPS).
Site A and Site B have different domains (cross-domain request).
Do not use location.href for transitions. Instead, we temporarily set about:blank in an iframe and then submit data via a form to the target system’s URL within the iframe.
This approach worked in Xcode 15.0.1 but fails in Xcode 15.2 or above.
Users are connected to a VPN, which is required to access the sites.
WKWebview is not receiving navigation delegate callback for Site B
Steps to Reproduce:
Ensure the device is connected to a VPN.
Open the app (using WKWebView) built with Xcode 15.2 or above.
Load Site A (HTTP) within the app in WKWebView.
Click the link to Site B (HTTP), which should open in an iframe.
Observe that a spinning wheel appears, but Site B does not load.
Environment:
Xcode Versions Affected: 15.2 or above (issue present), 15.0.1 (no issue)
iOS Version: All iOS versions
Devices: iPad
Questions:
Has there been any change in WKWebView’s handling of HTTP URLs or VPN-related network traffic in Xcode 15.2?
Are there any new security policies, iframe restrictions, or VPN-related changes in this version that might be affecting this behavior?
Request for Assistance:
Can you confirm if this is a known issue or an intended change?
Are there any workarounds available?
by turning web content restriction setting turned on
why the facebook and twiiter havn’t blocked ???pls fix this…..
Topic:
Safari & Web
SubTopic:
General
Hi everyone,
I’m working on a web project developed on Adobe Experience Manager (AEM), where we’ve built a custom component that embeds Apple Podcasts episodes using the official iframe provided via https://embed.podcasts.apple.com.
Everything works correctly from a rendering point of view, but we are now exploring ways to track user interactions with the embedded player, specifically events such as: start, play, pause,
progress milestones (e.g. 25%, 50%, etc.).
This data would be used to send analytics events to Adobe Analytics.
So far, we haven’t found any documentation or JavaScript API that would allow us to listen to these events.
We'd like to ask:
Is there any official way to track playback events from an Apple Podcasts iframe?
Any information, clarification, or direction would be really appreciated.
Thanks in advance!
Thanks,
Adriana
Topic:
Safari & Web
SubTopic:
General