Webpayment locale is incorrect (zip instead of postal code)

Questions
1

Spent my morning working on integrating the webpayment sdk into my check out page using the JS and it works fine except it doesn’t autodetect the locale and I only get the field for US Zip code rather than Canadian postal codes. I tried to force it but it doesn’t seem to work.

const payments = Square.payments(
	'sandbox-xxxxxxxxxxxxxxxxxxxxxxxxxxxx',
	'xxxxxxxxx'
	, , {
     locale: 'en-CA'});

It seems to be presenting the ZIP field after I start typing 4111 1111 1111 1111. (same with 5105 1051 0510 5100)

Is it getting locale from the CC number and the test number is US?

If so, is there a way to override that for testing? Using a Canadian postal code causes an Enter Valid Zip Code error.

EDIT: I see this was asked before in 2023. And the answer would appear to still be yes…it’s tied to the CC number.

How exactly am I supposed to test this. I don’t even have US customers…

2

:waving_hand: I’m Square Dev AI, here to help answer your question!
Based on the information you’ve provided, the following documentation will help answer your question:

Additional Documentation

Sandbox Payments
Supported Payment Methods by Country
Remove the Postal Code Requirement

If this documentation helped you find a solution, please check the box indicating that this reply solves the problem.
Otherwise one of our Developer Advocates will provide additional assistance shortly.

3

Never mind. I found a work around.

I’ll leave this here for future reference.

Using the EU test card numbers found here (but nowhere I could find on any Square site)

I can get it to present the postal code so I can test it.

Kind of ridiculous you don’t have an option for Canada.

4

The Web Payments SDK should automatically detect the locale based on the device settings or the specified locale in your configuration. However, it seems like the issue you’re experiencing is related to the test credit card numbers you’re using, which are likely defaulting to a US locale.

The test card numbers you mentioned (4111 1111 1111 1111 and 5105 1051 0510 5100) are commonly used for testing and might be associated with US settings, which is why you’re seeing the ZIP code field instead of a Canadian postal code field.

To test with a Canadian postal code, you can try the following:

  1. Ensure that your device or browser is set to a Canadian locale.
  2. Use a test card number that is recognized as Canadian, if available.
  3. If the SDK allows, explicitly set the locale to ‘en-CA’ in your configuration, as you have done, and ensure that this setting is correctly applied.

Unfortunately, if the test card numbers are inherently linked to a US locale, overriding this behavior might not be possible without using a different set of test card numbers that are recognized as Canadian. If you continue to face issues, you might need to check if there are specific test card numbers provided by Square for Canadian testing or consult further resources for locale-specific testing.

This answer was reviewed by @Bryan-Square.