Changing locale doesn't automatically update the form

[oddlyfunctional]

In the application I'm currently working on the user can change his locale at will from the navbar. Updating the locale prop in the Elements component is not enough to change the elements locale:

import React from 'react';
import { StripeProvider, Elements } from 'react-stripe-elements';

const StripeWrapper = ({ children, locale }) => (
  <StripeProvider apiKey={'STRIPE-KEY'}>
    <Elements locale={locale}>
      {children}
    </Elements>
  </StripeProvider>
);

To solve the issue I had to force a re-render using the key prop:

import React from 'react';
import { StripeProvider, Elements } from 'react-stripe-elements';

const StripeWrapper = ({ children, locale }) => (
  <StripeProvider apiKey={'STRIPE-KEY'}>
    <Elements locale={locale} key={locale}> { /* forcing a re-render with the `key` prop */ }
      {children}
    </Elements>
  </StripeProvider>
);

This fix is enough for my application, but I thought it'd be nice to let you know about this bug!

[asolove-stripe]

@oddlyfunctional thanks for reporting this! That behavior certainly looks unreasonable. That said, I believe the elements object in the underlying stripe.js api does not allow updating the locale after it is created. Maybe we should name this property initialLocale to make that clearer?

To update the locale, you'd probably still need to set a distinct key to tell React that you want the previous Elements instance to be torn down and the new one to be created fresh. (Although note that this will lose any data the user has entered into the element, which may not be what you expect.)

[asolove-stripe]

Hi all! After further thought, and not making progress on this in more than a year, I think I'm going to close this issue for now.

I admit that accepting a locale prop and not letting it update is not ideal. But having locale update by completely reloading the element is a big footgun with unexpected UI and performance implications.