[BUG]: IntegrationError: payment Element didn't mount normally.

[baptisteArno]

What happened?

When calling:

const paymentElement = elements?.create('payment')
paymentElement?.mount(paymentElementContainer)

Where paymentElementContainer is an HTMLElement, I get this runtime error: Uncaught IntegrationError: payment Element didn't mount normally.

What could cause this? I'm in a Shadow DOM, could that be the issue?

Environment

No response

Reproduction

No response

[tylersmith-stripe]

Hey @baptisteArno,

Attempting to render the Element into a Shadow DOM is very likely why you're seeing this error.

This is a known limitation of Elements, as the Element frames need to be able to communicate with the Light DOM. This error is explaining that the Element iframe is unreachable.

[tylersmith-stripe]

You might find this comment, and referenced library, helpful! #143 (comment)

[baptisteArno]

Thank you for providing a workaround 🙏

[baptisteArno]

For those who'd like to embed a Payment Element form in a Shadow DOM, all you need to do is to mount it outside the Shadow DOM using a slot.

const slotName = 'stripe-payment-form'

const initShadowMountPoint = (element: HTMLElement) => {
  const rootNode = element.getRootNode() as ShadowRoot
  const host = rootNode.host
  const slotPlaceholder = document.createElement('div')
  slotPlaceholder.slot = slotName
  host.appendChild(slotPlaceholder)
  const paymentElementContainer = document.createElement('div')
  paymentElementContainer.id = 'payment-element'
  slotPlaceholder.appendChild(paymentElementContainer)
}

Then just render this anywhere:

<slot name={slotName} />