Stripe Elements (i.e. Stripe.js), including the Payment Element, apparently now supports localisation/internationalisation out of the box, and the documentation for the locale
parameter says it detects the browser's locale by default and changes the messaging to reflect this:
locale string A locale to display placeholders and error strings in. Default is auto (Stripe detects the locale of the browser).
However, when I change my browser's language to French, for example, neither omitting the locale field nor explicitly specifying it with locale: "auto"
translates the language to French - I can only force this behaviour by manually specifying locale: "fr"
, which seems to suggest that Stripe isn't detecting the browser locale correctly.
What's going on here, and how can I get Stripe to detect the browser's locale like the documentation says it's capable of?
This is due to how Firefox lays out language settings. They split settings in two. Under about:preferences > Language, the dropdown menu you see there is for browser menus. Immediately below the dropdown, you'll see "Choose your preferred language for displaying pages" with a "Choose" button to the right. When clicked, that button opens up "Webpage Language Settings". If you add French here and move it to the top of the language list, you should see the PaymentElement rendered in French.