search

stripe-archive / react-stripe-elements

Moved to stripe/react-stripe-js.
https://github.com/stripe/react-stripe-js
MIT License
3.03k stars 319 forks source link

Elements locale option not localizing #542

Closed adambarghouthi closed 3 years ago

adambarghouthi commented 3 years ago

Hi, I'm having trouble localizing the Elements component. Here's my code below:

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PK)

const PaymentMethodForm = (props) => {
  const { locale } = React.useContext(LocaleContext)

  return (
    <Elements key={locale} locale={locale} stripe={stripePromise}>
      <Body {...props} />
    </Elements>
  )
}

export default PaymentMethodForm

If I do loadStripe(process.env.NEXT_PUBLIC_STRIPE_PK, { locale: locale }), it works but obviously it won't detect if the user changes the locale because it loads outside the component.

Is the stripePromise overriding the locale I'm passing to the Elements component with my browser's locale? Because I keep seeing the Elements component render in English even when the locale changes. Would appreciate some help, thanks!

glaucopater commented 3 years ago

Hi @adambarghouthi, I found the same issue and also this thread with a "strong" workaround. Basically it forces to reload the component changing the key https://github.com/stripe/react-stripe-elements/issues/225

davedbase commented 3 years ago

I'm having a similar issue. This is how I'm invoking Elements:

<Elements key={language} locale={language} stripe={stripePromise}>

If I pass fr into locale the field it doesn't do anything. Furthermore my linter goes crazy because locale is apparently not set on ElementProps (supposedly).

Every other sample with Stripe.js works except for the hooks versions. I'm using it correctly given the documentation: https://github.com/stripe/react-stripe-elements#elements. I'm also on the latest version of the dpeendency.

adambarghouthi commented 3 years ago

@davedbase have you tried what @glaucopater suggested? A strong reset of the component using a key prop that changes with the locale should work (I haven't tried it yet but I've seen it used in other instances)

davedbase commented 3 years ago

@adambarghouthi I created a topic here: https://github.com/stripe/react-stripe-elements/issues/554 which shows the exact method I'm using. I'm basically giving it a key when it first mounts but there's more details in my specific issue that might be useful.

adambarghouthi commented 3 years ago

it's in the options prop! thanks @davedbase