Stripe Elements cannot be mounted in a ShadowRoot. Please mount in the Light DOM

Question

I have been using Stripe for my lit element project. The mounting the card element doesn't works at all. Here is my code sample that I am using

import { LitElement, html, css, property, query } from "lit-element";
import { connect } from "pwa-helpers";
import { store } from "../redux/store";
import { loadStripe } from '@stripe/stripe-js';

export class Checkout extends connect(store)(LitElement) {

async init() {
    stripe = await loadStripe(clientSecret);
    element = stripe.elements();
    card = element.create('card');
    card.mount(this.shadowRoot.querySelector('#stripe-payment-form'));
 }
render() {
return html`
    <div id="stripe-payment-form"></div>
`

}

Every time I run this I am getting the following error

Uncaught (in promise) IntegrationError: Elements cannot be mounted in a ShadowRoot. Please mount in the Light DOM.

I know we don't have DOM in Lit element, but how can we mount the element in shadowDom?

If they specifically say no shadow root, then the entire Web Components chain breaks because you might be mounting custom components within custom components? Not using a framework right now, plain web components, same issue. — David Min, Sep 05 '22 at 19:48

David Min · Answer 1 · 2022-09-07T16:22:02.373

Currently there's still no support, likely due to how Stripe is currently implementing Elements (inserting iframes outside of just the payment box, fraud analysis etc on the light DOM level, using query selectors to find elements etc).

There is a third party library that creates a web component wrapper here.

Alternatively, you can use slot to push the light DOM Stripe Element into your shadow DOM, or may be able to simply overlay the Stripe Element at the desired position in the viewport.

Stripe Elements cannot be mounted in a ShadowRoot. Please mount in the Light DOM

1 Answers1