#kristineannmon_error

1 messages ¡ Page 1 of 1 (latest)

floral bronzeBOT
#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1283232625762242685

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

obtuse warren
#

The full code:

const stripeElement = Stripe('pk_.....').elements({
mode: 'setup',
currency: 'aud',
paymentMethodCreation: 'manual'
});

const cardNumberElement = stripeElement.create('cardNumber', {
showIcon: true,
iconStyle: 'solid'
});

cardNumberElement.mount(this.refs.cardNumber);
const cardExpiryElement = stripeElement.create('cardExpiry');
cardExpiryElement.mount(this.refs.cardExpiry);

const cardCardCvc = this.stripeElement.create('cardCvc');
cardCardCvc.mount(this.refs.cardCvc);

stone eagle
#

hello! Are you using any framework? or just plain html/JS?

#

also, can you share your site where you're seeing this error so that we can take a look too?

obtuse warren
#

Other framework. Salesforce's Lightning Web Component.

obtuse warren
obtuse warren
stone eagle
#

yep, i can access it

#

I'm not familiar with Salesforce's Lightning Web Component at all, but taking a quick look at it, it allows you to create components in both the Shadow DOM and Light DOM? Are you sure the component which / where you're trying to mount the card element in isn't a Shadow DOM? Cause that seems like the most likely possibility

obtuse warren
#

Does that mean it is advisable to mount the elements in a Light DOM?

stone eagle
#

Like what the error message says : Elements cannot be mounted in a ShadowRoot. Please mount in the Light DOM.

#

so yes, mount the elements in the Light DOM

obtuse warren
#

Okay, we will try Light DOM if this will fix the issue.

obtuse warren
#

Hi @stone eagle, we tried using another element where it renders all of the card fields in 1 element. For example, we used "Payment Element" (https://docs.stripe.com/payments/payment-element).

The "Payment Element" is mounted in a Shadow DOM in our Lightning Web Component and there is no problem with it.

We noticed that if we used "Other Element" where we referenced each card element ("cardNumber", "cardExpiry", and "cardCvc") in the same page (Lightning Web Component), that's the time the error shows stating that we should mount it in a Light DOM. Can you confirm it on your end if that's the case? Thank you!

#

This is our sample page for testing/debugging purposes.

stone eagle
#

that's interesting, afaik, Stripe doesn't support the Shadow DOM. I think my recommendation here is to always use the Light DOM anyway.

floral bronzeBOT