Add support for allowedShippingCountries in Express Checkout Element

[bborman22]

Description

With the Express Checkout Element from Stripe (ECE), there is an option to provide an allowedShippingCountries parameter when clicking the element. We can retrieve a list of available countries from the merchant settings to provide to this parameter. This enhancement would make the experience smoother for the shopper in a case where some countries they may have saved aren't allowed by the merchant.

Acceptance criteria

• When using the "Shipping location(s)" setting in WooCommerce the list of available countries is provided to the Stripe ECE to limit addresses to just those countries.
• The limitation works when the setting is set to all, all except some, and set specific.

Designs

Testing instructions

1. Set the selling locations to all and confirm all shipping addresses are displayed in Google Pay and Apple Pay.
2. Set the shipping locations to exclude some countries and confirm any addresses from those countries are not displayed in Google Pay and Apple Pay.
3. Set the shipping locations to specific countries and confirm only addresses from those countries are displayed in Google Pay and Apple Pay.

Dev notes

Additional context

pcJe93-4x9-p2#comment-4622

[bborman22]

Hey team! Please add your planning poker estimate with Zenhub @asumaran @cesarcosta99 @lovo-h @rafaelzaleski @reykjalin @ricardo

[asumaran]

@bborman22 I found a bug while working on this. I tried debugging it without getting too much info about it as it originates on the Stripe library.

The issue occurs when a shipping address from a country without shipping options defined is selected.

If the address is selected, the payment sheet is closed, the page is refreshed, and then the Google Pay button is clicked, the error is thrown in the browser console.

v3/?ver=3.0:1 Uncaught (in promise) IntegrationError: When `shippingAddressRequired` is true, you must specify `shippingRates`.
    at H (v3/?ver=3.0:1:40043)
    at v3/?ver=3.0:1:361350
    at v3/?ver=3.0:1:354353

This is an existing bug, so it is unrelated to the allowedShippingCountries param we’re defining in this issue. I think we can go ahead and implement this PR and address the bug in a separate issue. If no issue exists, I will create one for it. Sounds good to you @bborman22?

[asumaran]

I can confirm the same error happens with Apple Pay.

edit:

If we go to the Checkout page and the addres is changed from the address that has no shipping options to an address that has shipping options defined then Apple Pay/Google Pay works again.

[bborman22]

I think we can go ahead and implement this PR and address the bug in a separate issue. If no issue exists, I will create one for it. Sounds good to you

Yep that is perfect, let's get an issue captured for it and we'll pull into our maintenance rotation, thanks!

[asumaran]

@bborman22 issue created: #9593

[asumaran]

@bborman22, just to confirm, this should apply to all areas where ECE can be used, correct? That includes the Product Page, Cart Page, Checkout Page, Cart shortcode, Checkout shortcode, and Pay for Order page.

This will require extensive testing, so I’m going to revise my original estimate, as I initially thought it was only needed for the Cart and Checkout pages.

Additionally, I foresee potential issues with the Pay for Order page if we introduce allowedShippingCountries. Since orders can be created manually, restricting countries could cause problems for existing orders. I think we should exclude the Pay for Order page for now and address it in a separate issue as we need to ensure that we’re not breaking the "Pay for Order" functionality with this change.

[asumaran]

@bborman22 I just noticed we don't ask for shipping details on the "Pay for Order" page.

woocommerce-payments/client/express-checkout/index.js

Line 594 in 7f8cad7

requestShipping: false,

so this issue won’t impact that page. Please disregard my previous comment.