React-stripe-elements: Update <StripeProvider/> apikey

[alenadrex]

Hello guys,

First of all, thank you for bringing Stripe V3 to React, it's quite simple to use and does the job.

Our current architecture constrains us to use two different Stripe accounts, thus we have two different apikeys. The apikey we use depends directly upon the user's Credit Card's country. Using Stripe V2, we could change the Stripe apikey on the fly, but with V3 this is impossible because we cannot update the apikey prop of <StripeProvider/> Wrapper on the fly.

Is there any way to achieve this ?

Regards,

Alex

[atty-stripe]

Hi @alenadrex, this is an interesting request. Could you share some more details as to why and how you're using two different API keys?

You're right that Elements currently does not expose the card number or the country as the user types their details. One way to achieve this in the meantime is to ask the user for their billing country first, and then show the form corresponding to that API key.

[shlajin]

@alenadrex Just came across this issue; since we cannot update the prop, then we have to create a new instance of StripeProvider. It's easy to do by using key prop:

      <StripeProvider apiKey={apiKey} key={apiKey}>
        {children}
      </StripeProvider>

Keep in mind that it will re-mount all the children.

[anto-parking]

Thanks @shlajin !