Stripe script element doesn't inject `Stripe` into iframe's `window`

[baptisteArno]

I'm having this issue: https://github.com/stripe-archive/react-stripe-elements/issues/134#issuecomment-359123436

So I'm currently trying to add the Stripe script tag into the iframe head:

<Frame
      head={[
        <style>
          ...
        </style>,
        <script src="https://js.stripe.com/v3"></script>,
      ]}
      name="Typebot viewer"
    >

But then whenever I look for the Stripe global var on iframe's window it doesn't exist:

const { window: frameWindow } = useFrame()
...
console.log(frameWindow.Stripe)
//undefined

[baptisteArno]

As a workaround, I inject the script programmatically using this function with the frame document as a param:

export const initStripe = (document: Document): Promise<void> =>
  new Promise((resolve) => {
    const existingScript = document.getElementById('stripe-script')
    if (existingScript) return resolve()
    const script = document.createElement('script')
    script.src = 'https://js.stripe.com/v3'
    script.id = 'stripe-script'
    document.body.appendChild(script)
    script.onload = () => {
      resolve()
    }
  })

[ryanseddon]

Yeah scripts don't execute when injected via react/innerHTML your solution is the only way around it. You can also just hook into the contentDidMount callback and inject it then too.