I'm trying to use Apple Pay within an iframe that I create and populate its DOM with Javascript.
(Context: I work on 3rd party widget that websites can embed into their existing websites, hence the need to isolate everything in an iframe; there are other options for isolating, but this is what we currently use).
Apple Pay has two requirements, as far as I know:
- The frame has a secure source
- The frame has the same origin as the main frame on the page.
In order to satisfy these two requirements, I have tried to use the following code (tested in Safari):
const iframe = document.createElement('iframe')
document.body.appendChild(iframe)
// the iframe origin is 'about:blank'
// let's try to fix that
iframe.contentDocument.open()
// Render the DOM content here
iframe.contentDocument.close()
// That seems to set the origin of the iframe to the origin of the caller of `open`
// Test
const script = iframe.contentDocument.createElement('script')
script.text = `
console.log(location.origin == parent.location.origin)
// true, so iframe origin should be secure now like the parent
console.log(ApplePaySession.supportsVersion(2))
// But it still triggers the following error:
// "InvalidAccessError: Trying to start an Apple Pay session from an insecure document."
`
iframe.contentDocument.head.appendChild(script)
As you can see, this does not work despite the fact that the document origin is recognized as being the same as the parent origin and it is secure.
In conclusion: Is there any way I can use Apple Pay from within an iframe which I dynamically create on a 3rd party website?
Any help will be appericiated.