Attempting to make a Firefox extension that alerts if a website supports Apple Pay
It works on some sites but not all of them
- SO post trying to accomplish this
- Reddit post by same author asking for help
- Stripe Apple Pay docs
- Mozilla extension tutorial
- Blog post about using Apple Pay
- Inserting content scripts into page scripts
- Stripe Demo page
- Apple demo page
- Apple Lightning Cable page, should pop up a "check out with Apple Pay"
- Minor Figures oat milk - works here
- Nike - doesn't work here
It seems like window.ApplePaySession is built into Safari and doesn't exist on other browsers, so it can't be used to check if we're on an Apple Pay website or not. There's an open W3C Payment Request API that might have something that would work, but from my reading it seems unlikely and Firefox says they haven't implemented it.
However when I test with Safari, sites that don't have any checkout at all still have a window.ApplePaySession element, so maybe I'm referencing the wrong thing.
The only thing I can think of is to run Apple's own JS as the content script but I'm not sure how to source it.
OR maybe we can make a fake window.ApplePaySession to trick websites into thinking it exists. It seems like websites mostly use Apple's example test of:
if (window.ApplePaySession && ApplePaySession.canMakePayments())
// Display Apple Pay ButtonSo if we can insert a fake element that resolves true, the button might show up but be nonfunctional. This may have been the idea of the SO post author.
I think this will be possible with the cloneInto content to page script function.
Added a cloneInto and it works for some sites but not others. They might be checking something else within ApplePaySession or the user agent. Switching user agent is kinda doing too much to just detect Apple Pay, I think it'd be good enough to just detect when sites look for ApplePaySession and alert the user then.
I found some good info about adding a browser notification but it's hard to test. Firefox seems to not allow self-loaded extensions to request notifications permissions. Just doing an alert inside the fake function ends up in triggering 4-5 times on most sites as they look for different stuff so running a notification inside that won't work too well anyway.
Mozilla's documentation says that the extension should be granted notifications permissions silently when it's loaded into Firefox. I'm able to call a function from within my fake Apple Pay Available function, but it won't send a notification. I also can't get a console.log to run after the browser.create should have run, so I think it might be erroring out somewhere beforehand.
Currently trying to use a separate dev environment: /Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -P dev &
This post (https://stackoverflow.com/questions/34912279/error-when-using-chrome-notifications-create-uncaught-typeerror-cannot-read-pr) says that content scripts in Chrome can't send notifications and you'd need to pass the info to a background script. That may be what's happening in FF too. This has some more info: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts
7/11 - Got the content to background message passing working. I'd like to do something to make sure that notifs only run once even if the inserted canMakePayments is called more than once on a page.
8/22 - Notifiction works and we can copy active URL but it doesn't only copy on click.