[BUG]: Customer retrieved address state value does not match client side <option> value.

[Sladeck]

What happened?

What Happened

When retrieving a Customer data from the V1 endpoint and using the ReactJS Stripe npm package (@stripe/react-stripe-js @stripe/stripe-js), the string state in the address dict does not match any values inside the select HTML element.

If the Customer's address is in Tokyo, the value of state is equal to 東京都 (Tokyo in Japanese) but the expected value is Tokyo, therefore passing the customer's data directly into the option result in an empty select.

To Reproduce

• Fetch a customer through the V1 API endpoint (Django/Python in my case):

import stripe
stripe.api_key = "sk_test_51Lfw0gHat61Je61xWjIjc5cq1i9KcV8lne5PMVimX5KtXDtotRJCUpaX12OQJNSrruafGnfPkYceJX2f3z24zpFl00sgWJGgkm"

stripe.Customer.retrieve("cus_NffrFeUfNV2Hib")

• Retrieve the data on your front-end, here is what it looks like for someone's address in Japan, Tokyo (omitting non-essential dicts for this problem):

const customer = {
    "object": "customer",
    "address": {
          "city": "Shinjuku-ku",
          "country": "JP",
          "line1": "Address Line 1",
          "line2": "Address Line 2",
          "postal_code": "101-8656",
          "state": "東京都"
      }
}

• Injecting customer dict into the options of the AddressElement:

const options = {
  defaultValues: {
      address: customer.address
  }
}

// .... return function ->
<AddressElement 
  options={options}
/>

The Customer state value is 東京都, however the generated list of states (or prefectures in that case) inside the AddressElement is waiting for values in English, so Tokyo:

// ...... Inside the AddressElement component after rendering ->
<option value="Tokyo">東京都 — Tokyo</option>

I could not find any informations regarding any parameter to change the language when retrieving customer data, it seems like the AddressElement component adapts to the browser's locale settings to automatically localize placeholder text, thereby influencing elements like country/state/city dropdowns.

In such cases, those dropdowns input are empty.

---

Expected behavior:

One of the <option> value inside the <select> of the AddressElement component should match state: state_value.

Suggestions:

• By retrieving the preferred language of the Customer, the front-end could load the correct translation by checking the preferred language.
• Using a different value for the states that is consistent over every languages.

Environment

No response

Reproduction

No response