Estoy tratando de usar Apple Pay dentro de un iframe que creo y relleno su DOM con Javascript.

(Contexto: trabajo en un widget de terceros que los sitios web pueden integrar en sus sitios web existentes, de ahí la necesidad de aislar todo en un iframe; hay otras opciones para aislar, pero esto es lo que usamos actualmente).

Apple Pay tiene dos requisitos, que yo sepa:

1. El marco tiene una fuente segura.
2. El marco tiene el mismo origen que el marco principal de la página.

Para satisfacer estos dos requisitos, he intentado usar el siguiente código (probado en 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)

Como puede ver, esto no funciona a pesar de que el origen del documento se reconoce como el mismo que el origen principal y es seguro.

En conclusión: ¿hay alguna forma de que pueda usar Apple Pay desde un iframe que creo dinámicamente en un sitio web de un tercero?

Cualquier ayuda será apreciada.