sssssssss

[shrewd aurora]

Hi there, did you get this error when you pass a different stripeAccountId ?

[prime sluice]

I'm sure the stripeAccountId is one of the user's account ids that I can see on my stripe dashboard → Connect tab → Connected accounts.
If I statically set the stripeAccountId like the following, there's no warning, and successfully the _stripe_account will be sent to the Stripe api as Form Data on the request header.

loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY, {
        stripeAccount: 'acct_xxxxxx',
      }),

I'm getting stripeAccountId using react-query's useQury, so It can be undefined if the fetching is not finished.

[shrewd aurora]

OK, your code will create a new stripePromise when stripeAccount is changed (i.e., from undefined to set). To solve this problem. I'd suggest you to create a new Element for the new stripeAccount.

[prime sluice]

create a new Element for the new stripeAccount
means, by using some APIs from stripe-js? I'm sorry if I'm asking an off-base question as I'm unfamiliar with stripe connect.

[shrewd aurora]

Don't worry about it. I'd suggest you to update your code to

return ( stripeAccountId && (
    <Elements stripe={stripePromise}>
      <Payment />
    </Elements>
  );

So the Elements is rendered only when stripeAccountId is set.

[prime sluice]

Thanks!!!
It worked with the way you first suggested which is using a ternary operator with a placeholder component!