title: Using Apple Pay in a dynamically rendered iframe (same-origin)
body: <p>I'm trying to use Apple Pay within an iframe that I create and populate its DOM with Javascript.</p>
  <p>(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).</p>
  <p>Apple Pay has two requirements, as far as I know:</p>
  <ol>
  <li>The frame has a secure source</li>
  <li>The frame has the same origin as the main frame on the page.</li>
  </ol>
  <p>In order to satisfy these two requirements, I have tried to use the following code (tested in Safari):</p>
  <pre class="lang-js prettyprint-override"><code>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:
  // &quot;InvalidAccessError: Trying to start an Apple Pay session from an insecure document.&quot;
  `
  iframe.contentDocument.head.appendChild(script)
  </code></pre>
  <p>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.</p>
  <p>In conclusion: Is there any way I can use Apple Pay from within an iframe which I dynamically create on a 3rd party website?</p>
  <p>Any help will be appericiated.</p>