Checkout Block occasionally incompatible with Shipping & Tax ("ZIP Code does not match the selected state.")

[csmcneill]

Describe the bug

When using the checkout block or a block based theme like Blockbase or Tsubaki while WooCommerce Shipping & Tax (WCS&T) is active, using a valid combination of state + ZIP will occasionally produce the following error for customers:

ZIP Code does not match the selected state.

There are no errors logged in WCS&T that indicate there is an invalid state and ZIP combination in use, which suggests that the issue is not stemming from WCS&T.

Disabling WCS&T, Jetpack (which is used to power WCS&T), or moving away from a block-based checkout will resolve this error.

This seems to be stemming from a 409 error associated with checkout?_locale=user. Here is a snippet from the payload:

shipping_address
: 
{first_name: "Woo", last_name: "Woo", company: "", address_1: "Woo", address_2: "", city: "Woo",…}
address_1
: 
"Woo"
address_2
: 
""
city
: 
"Woo"
company
: 
""
country
: 
"US"
first_name
: 
"Woo"
last_name
: 
"Woo"
phone
: 
""
postcode
: 
"38619"
state
: 
"MS"

Note that 38619 is a postcode used for Como, Mississippi, USA.

There is also a 409 error in the console:

index.js:102 
 POST https://haven-wear.com/wp-json/wc/store/v1/checkout?_locale=user 409
y   @   index.js:102
d   @   fetch-all-middleware.js:80
(anonymous) @   index.js:163
m   @   http-v1.js:40
(anonymous) @   index.js:163
n   @   namespace-endpoint.js:24
(anonymous) @   index.js:163
m.method.r  @   user-locale.js:24
(anonymous) @   index.js:163
(anonymous) @   root-url.js:37
n   @   namespace-endpoint.js:24
(anonymous) @   root-url.js:11
(anonymous) @   index.js:163
t   @   nonce.js:23
(anonymous) @   index.js:163
_.mediaUploadMiddleware @   media-upload.js:34
(anonymous) @   index.js:163
(anonymous) @   preloading.js:59
(anonymous) @   index.js:163
(anonymous) @   wc-blocks-middleware…29b584555b987607f:1
(anonymous) @   index.js:163
_   @   index.js:168
(anonymous) @   checkout-frontend.js…01e9c2ed351634531:2
(anonymous) @   checkout-frontend.js…01e9c2ed351634531:2
Vr  @   react-dom.min.js?ver=18:1
Cl  @   react-dom.min.js?ver=18:1
dl  @   react-dom.min.js?ver=18:1
Nn  @   react-dom.min.js?ver=18:1
ul  @   react-dom.min.js?ver=18:1
Dt  @   react-dom.min.js?ver=18:1
(anonymous) @   react-dom.min.js?ver=18:1
s   @   index.js:69
c   @   index.js:76
(anonymous) @   registry.js:247
(anonymous) @   index.js:327
p   @   redux.js:296
(anonymous) @   thunk-middleware.js:7
(anonymous) @   ??-eJyVzUEOgkAMQNELO…5n6+3tvsB9cxgAQ==:7
(anonymous) @   promise-middleware.js:20
(anonymous) @   resolvers-cache-middleware.js:51
(anonymous) @   index.js:202
(anonymous) @   wc-blocks-data.js?ve…8ce5b82d64731206b:8
Promise.then (async)        
(anonymous) @   wc-blocks-data.js?ve…8ce5b82d64731206b:8
(anonymous) @   thunk-middleware.js:4
(anonymous) @   ??-eJyVzUEOgkAMQNELO…5n6+3tvsB9cxgAQ==:7
(anonymous) @   promise-middleware.js:20
(anonymous) @   resolvers-cache-middleware.js:51
(anonymous) @   index.js:202
(anonymous) @   checkout-frontend.js…01e9c2ed351634531:2
Vr  @   react-dom.min.js?ver=18:1
Cl  @   react-dom.min.js?ver=18:1
dl  @   react-dom.min.js?ver=18:1
Nn  @   react-dom.min.js?ver=18:1
ul  @   react-dom.min.js?ver=18:1
Dt  @   react-dom.min.js?ver=18:1
(anonymous) @   react-dom.min.js?ver=18:1
s   @   index.js:69
c   @   index.js:76
(anonymous) @   registry.js:247
(anonymous) @   index.js:327
p   @   redux.js:296
(anonymous) @   thunk-middleware.js:7
(anonymous) @   ??-eJyVzUEOgkAMQNELO…5n6+3tvsB9cxgAQ==:7
(anonymous) @   promise-middleware.js:20
(anonymous) @   resolvers-cache-middleware.js:51
(anonymous) @   index.js:202
(anonymous) @   wc-blocks-data.js?ve…8ce5b82d64731206b:6
Promise.then (async)        
(anonymous) @   wc-blocks-data.js?ve…8ce5b82d64731206b:6
(anonymous) @   thunk-middleware.js:4
(anonymous) @   ??-eJyVzUEOgkAMQNELO…5n6+3tvsB9cxgAQ==:7
(anonymous) @   promise-middleware.js:20
(anonymous) @   resolvers-cache-middleware.js:51
(anonymous) @   index.js:202
(anonymous) @   checkout-frontend.js…01e9c2ed351634531:1
Vr  @   react-dom.min.js?ver=18:1
Cl  @   react-dom.min.js?ver=18:1
(anonymous) @   react-dom.min.js?ver=18:1
v   @   react.min.js?ver=18:1
ce  @   react.min.js?ver=18:1

There are several references to checkout-frontend.js, which seems to be related to /wp-content/plugins/woocommerce/packages/woocommerce-blocks/build/checkout-frontend.js.

To reproduce

Steps to reproduce the behavior:

1. Enable WooCommerce.
2. Install/activate/configure Jetpack.
3. Install/activate/configure WooCommerce Shipping & Tax to provide automated taxation.
4. Modify the theme template so that it uses the Checkout Block instead of the checkout shortcode.
5. Try to make a purchase using the Checkout Block with any payment method (e.g. Check Payments)
6. Encounter the error.

Note for step 6: this may require using a guest checkout, clearing the browser cache, and/or attempting multiple different postcode/state combinations, as it's finicky if a postcode is used that's been validated before. Here are some that I use that can help with debugging:

• Sacramento, California, US 95816
• Beverly Hills, California, US 90210
• Vinita, Oklahoma, US 74301
• New York, New York, US 10001
• Oxford, Mississippi, US 38655
• Como, Mississippi, US 38619
• Horn Lake, Mississippi, US 38637

Expected behavior

The checkout block will not throw ZIP code validation errors for customers when they enter a valid postcode and state combination.

Screenshots

Environment

WordPress (please complete the following information):

• WordPress version: 6.3.1
• Gutenberg version (if installed): 16.5.1
• WooCommerce version: 8.0.2
• WooCommerce Blocks version: tried with 11.0.0 and the 10.x.x version in core.
• Site language: English
• Any other plugins installed: Can reproduce under conflict test conditions.

Desktop (please complete the following information):

• OS: Mac OS 13.5.1 (22G90)
• Browser Chrome Version 116.0.5845.140 (Official Build) (x86_64), Arc Version 1.6.0 (41215) Chromium Engine Version 116.0.5845.140

Additional context

6761785-zen 6662493-zen p1692249095376639-slack-C028SDRAAJF p1689055060770119-slack-C028SDRAAJF p1692225907962829-slack-C015MKUHB2M

[csmcneill]

Note: We've so far only seen this issue on AT sites. It might affect self-hosted sites, but that is still TBD.

[csmcneill]

There are a few options as a temporary workaround, including:

1. Temporarily change the checkout template to use the [woocommerce_checkout] shortcode instead of the checkout block.
2. Temporarily disable automated taxation via WooCommerce Shipping & Tax.
3. Temporarily deactivate WooCommerce Shipping & Tax.
4. Temporarily change to a different theme that doesn't use the checkout block.

These options are listed in order from least to most invasive.

[maxlaf]

I can consistently replicate this with some minor tweaks to @csmcneill's steps. The key is to place an order with one State/ZIP, then try and place another order with a different State/ZIP

1. Enable WooCommerce.
2. Install/activate/configure Jetpack.
3. Install/activate/configure WooCommerce Shipping & Tax to provide automated taxation.
4. Modify the theme template so that it uses the Checkout Block instead of the checkout shortcode.
5. In a private window as a guest customer, make a purchase using the Checkout Block with any payment method (e.g. Check Payments) - Use Como, Mississippi, US 38619
6. In the same window, go to checkout again and change the State, City, and ZIP to Sacramento, California, US 95816
7. Click Place Order. Error is thrown.

What's strange is, as Chris mentioned, the request/response has the correct info

Clearing the woocommerce_cart_hash, woocommerce_items_in_cart, and the wp_woocommerce_session_ cookies fixes this until another order is placed with 1 State/ZIP and a different combo is used within the same session. Which makes me wonder if this is caused by the same cookie conflict between WCPay and Jetpack Sync: https://github.com/Automattic/woocommerce-payments/issues/5491 (Jetpack team is working on a fix here: https://github.com/Automattic/jetpack/pull/31423)

I've disabled Dedicated Sync on my JN site, but the issue still occurs. In the workaround mentioned, it can take some time to take effect, so I'll check again tomorrow: p1687117159732829-slack-CB37YNEH1

Edit: Disabling Dedicated Sync did not fix this issue.

[mikejolley]

Hi, thanks for the report.

I can tell you for certain, the validation error you're reporting is not coming from blocks—the error code/text does not match anything in either blocks or Store API.

There is also no validation "against states". We only check the format against country codes, and the resulting error code is The provided postcode / ZIP is not valid.

I did however find the error code you reported in the TaxJar integration of WooCommerce Shipping & Tax (WooCommerce Services).

@ralucaStan should we move this issue to there or track here?

[maxlaf]

Thanks for the context. Despite the error coming from WCS&T, I think the reasoning for opening this here was because it only seems to happen with the Checkout block, and not the shortcode.

[kmanijak]

There's another mention of this issue in the WordPress Support forum: https://wordpress.org/support/topic/disable-zipcode-validation/.

[kmanijak]

@ralucaStan, heads-up there's another thread on WordPress Support forum that seems like the same issue: https://wordpress.org/support/topic/checkout-error-zip-code-does-not-match-selected-state/

[ralucaStan]

Thank you @kmanijak. I asked for some testing steps. We haven't been able to replicate this so far

[maxlaf]

Hi @kmanijak and @ralucaStan, thank you both for looking into this and replying to those forum threads! I believe this will be fixed in WCS&T with https://github.com/Automattic/woocommerce-services/issues/2683. More context here: p1695137216084799/1694506091.052629-slack-C04KWSNPSE5

Since this seems to be an issue on the WCS&T side, I'm unsure if we should close this issue now or leave it open until we've confirmed it's fixed.

[Brianmitchtay]

7075851-zen

[ralucaStan]

I think it's safe to close this ticket as there is nothing actionable on our side, the solution will come from https://github.com/Automattic/woocommerce-services/issues/2683.

Thank you so much for the update and happy to see progress is being made on this one

[nawaz0705]

7127464-zen