hexiaolong

[warm lance]

Sure, how can we help?

[sharp jolt]

i use the PaymentElement from '@stripe/react-stripe-js',the code like this

<form id="payment-form" onSubmit={handleSubmit}>
<PaymentElement
onReady={() => {
setIsReady(true)
}}
id="payment-element"
/>
{isReady ? (
<>
<Button
loading={isLoading}
type="primary"
htmlType="submit"
className="pay-button"
disabled={isDisabled}
>
{/* 点击升级按钮 */}
<FormattedMessage id="upgrade" />
{price}
</Button>
{message && <div id="payment-message">{message}</div>}
</>
) : (
<Skeleton active />
)}
</form>

When I use the edge browser, if I turn on the translation function, when I use Alipay or wechat Pay, I click the pay button and the pop-up window will blink back

[sharp jolt]

See what I mean

[warm lance]

Yeah I see, does it output anything from console?

[sharp jolt]

DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

[warm lance]

Looks unrelated to Stripe. Do you recognize this camin.vip website?

If you try in different browser, or a browser without any plugin/adds-on, do you see the error?

[sharp jolt]

camin.vip is my website,If it is normal, the pop-up window of wechat Pay will pop up. This operation should be the operation of 'insertBefore', because there is no operation of 'insertBefore' in my project code. This should be the logic in Stripe

[warm lance]

Weird.. so does it work in other browser than Edge?

[sharp jolt]

I have now opened the translation in Chrome and it appears again

Translation plugin I don't know why it affects, if you turn off translation, Chrome and Edge are OK

[warm lance]

Yeah that seems to be the plugin. Is this Google Translate plugin?

[sharp jolt]

right

[warm lance]

Sorry don't know how it interfere. I would recommend turning off the plugin then

[sharp jolt]

It is suggested that you check the relevant operation of 'insertBefore' to see how it affects you, because we cannot control whether the user opens the switch of this plug-in, which will affect our subscription success rate. Many users encounter this problem, but they do not know the cause of the problem, so they may not subscribe. This is a very big loss for us, so this issue is very important

[warm lance]

Do you mean a lot of your customer is using this Translation plugin? How many?

[sharp jolt]

Yes, our main customers are all in China, so this proportion is very high. I cannot provide the specific data, but some users have reported that they have encountered this problem in payment

[warm lance]

Um so they are using Google Translation from which language to which language? Just curious how you would know they uses the plugin or not

[sharp jolt]

Most of them are translated from English to Chinese, and users give feedback on the problem, we find that when the problem occurs, we are using the official translation plug-in, and later we repeat ourselves, and find that when using the plug-in, the problem is inevitable

[warm lance]

So your website was built in English, but most of your customer is in China and then they use the Translator plugin? 🤔

[sharp jolt]

My website is bilingual, but the general use of translation plug-in users are often open this switch, so even if the user visits my Chinese website will be affected

[warm lance]

I see. I just want to highlight that maybe your customers are facing a different issue, and maybe they don't actually use the Translator plugin which is the error culprit here. But it's up to your analytics data. Sorry it seems PaymentElement has some incompatitible issue and thanks for your feedback. But how about just using Checkout? It supports Chinese natively

[sharp jolt]

Now it's not a matter of language, our website is already fully displayed in Chinese, including scenes using stripe. The problem is that we can not control the user's usage habits, as I just described, the user is likely to need to consult other English websites to open the translation plug-in, and then this plug-in has not been closed, so when visiting our Chinese website, this problem will occur

[sharp jolt]

At present, it has been confirmed that there will be this compatibility problem when the translation plug-in is opened, so I hope you can try to solve this problem, or how to find the cause of the problem and need my cooperation to solve it, because now PaymentElement is an embedded iframe, I cannot locate the cause of the problem

[warm lance]

Yes I understand that and you are not wrong! Happy to forward the feedback. But honestly we don't likely to resolve the issue with a specific plugin (there are thousands if not more of them!) I am trying to suggest the best alternative path forward, but using Stripe Checkout you will never likely to have this issue