Elements tag doesn't accept locale

[davedbase]

Summary

I cannot seem to change the locale of my elements. Here's a basic sample of my reproduction. When I run the app it always displays English even though I'd expect French.

const Checkout = ({
  item,
  onClose,
  summary,
}: {
  item: Item;
  onClose: Function;
  summary: Array<object>;
}) => {
  const { checkout_token, currency, language } = useContext(Context);
  const lang = useContext(LocalisationContext);
  const [state, setState] = useState(CheckoutState.Idle);
  const stripePromise = useMemo(() => loadStripe(checkout_token), []);
  return (
    <Modal
      onClose={state === CheckoutState.Charged ? null : () => onClose()}
      icon={null}
      loading={false}
      title={lang.checkout}
      size={ModalSize.Narrow}
    >
      <CheckoutStyle>
        <Elements key={language} locale="fr" stripe={stripePromise}>
          <CheckoutDetail
            currency={currency}
            summary={summary}
            item={item}
          />
        </Elements>
      </CheckoutStyle>
    </Modal>
  );
};

Other information

What's strange is that Typescript also complains about that locale doesn't exist on ElementProps. I'm using ts-ignore to supress the warning:

I believe I'm following examples and documentation correctly. Does anyone have a workaround? This is rather critical for our application. Removing the hooks would be a pretty big set back for us.

[tylersmith-stripe]

Hi @davedbase 👋 ,

Are you posting this issue in the correct repo? Based on your configuration, it looks like you're trying to use the (newer) https://github.com/stripe/react-stripe-js, but this is the legacy repo.

Assuming you are actually using @stripe/react-stripe-js, your <Elements /> component needs to pass locale as part of the options prop (https://stripe.com/docs/stripe-js/react#elements-provider).

So, your example would change to: <Elements key={language} options={{locale: "fr"}} stripe={stripePromise}>

It would also be worth ensuring this component does not mount/unmount more than once in the lifetime of a session, as loadStripe would be triggered multiple times. It may be worth moving this call to a top-level export, or initiated within a route handler and imported here, etc.

[davedbase]

Yes, if you hadn't made it obvious that the value exists in options, I doubt I would have found a viable solution. The other conditions you mentioned aren't a concern. I didn't at any point recognise the legacy vs current release versions. I suppose I was reading the docs and getting confused by this repo version. It should maybe be made a bit clearer? It's possible that I made an error on this as well, I suppose it just wasn't obvious.

Thank you!