Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for allowedShippingCountries in Express Checkout Element #9592

Conversation

asumaran
Copy link
Contributor

@asumaran asumaran commented Oct 18, 2024

Implements #9104

Changes proposed in this Pull Request

Adds support for specifying allowed shipping countries (allowedShippingCountries) in the Express Checkout Element.

Testing instructions

Tip

If you want to test with multiple addresses from different countries, you can add yourself to the Google test card suite group. In test mode, you’ll have access to a set of test cards, rather than the cards associated with your production account.
https://developers.google.com/pay/api/web/guides/resources/test-card-suite

Note

To test the changes introduced here, we first need to create shipping options for at least two countries. In this case the countries will be USA and Brazil. You can create a "Flat rate" shipping method for both countries. That will be sufficient.

Note

The test results should be the same for all the pages affected by this PR: Product Page, Cart Page, Checkout Page, Cart shortcode, and Checkout shortcode. (Does not apply to the "Pay for Order" page.)

Note

All cases should be tested in the same way:

  1. If you are on the page of a physical product (that is, it requires shipping), simply click the Express Checkout button and proceed to checkout.
  2. If you are testing on other pages (except "Pay for Order"), add a product to the cart and then visit the desired page. Click the Express Checkout button and proceed to checkout.
  3. There's no need to test the "Pay for Order" page since all orders on this page are defined as not requiring shipping in the Express Checkout settings.

Note

Since this PR includes many combinations to test, and given that ECE has two different implementations, I would suggest testing at least the Checkout (block) page and the Shortcode Checkout page. That would cover both ECE implementations currently in WooPayments.

Important

Test with Apple Pay on at least the pages mentioned above. The results should be the same for each test.

Case 1: "Shipping location(s)" is set to "Ship to all countries you sell to"

  • "Selling location(s)" is set to "Sell to all countries"
    • ✅ The checkout process should work without issues for any shipping address from any country.
    • Note that it won't be possible to checkout using a shipping address from a country without shipping options.
  • "Selling location(s)" is set to "Sell to all countries, except for…" and "Sell to all countries, except for…" is set to "United Kingdom (UK)"
    • ✅ Checkout should work without issues for any shipping address except one from the UK.
    • Note that it won’t be possible to checkout using a shipping address from a country without shipping options. For this PR, it should be possible to checkout with shipping addresses from the USA and Brazil only, as these are the only countries with shipping options.
  • "Selling location(s)" is set to "Sell to specific countries" and “Sell to specific countries” is set to "United States (US)"
    • ✅ Checkout should complete without issues with any US address.
    • It shouldn't be possible to select a shipping address from Brazil or any country other than the USA.

Case 2: "Shipping location(s)" is set to "Ship to all countries"

This option ignores the value set in "Selling location(s)", therefore:

  • ✅ Checkout should complete without issues for all countries.
  • Note that it won't be possible to checkout using a shipping address from a country without shipping options.
  • Therefore, for this case, it should allow shipping to the USA and Brazil. If desired, you can add another country with shipping options to verify that shipping works to that country as well.

Case 3: "Shipping location(s)" is set to "Ship to specific countries only" and "Ship to specific countries" is set to "Brazil"

  • ✅ Checkout should complete without issues with shipping addresses from Brazil.
  • It shouldn’t be possible to select a shipping address from any other country.

Potential Issues:

If, during testing, you find that you can’t open the payment sheet and see the following error in the browser console:

Uncaught (in promise) IntegrationError: When `shippingAddressRequired` is true, you must specify `shippingRates`.

This is a known issue and has been reported here. One way to fix it is by clearing all cookies and starting again. Another way is to go to the checkout page and change the shipping address to a country with shipping options, such as the USA or Brazil.


  • Run npm run changelog to add a changelog file, choose patch to leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.
  • Covered with tests (or have a good reason not to test in description ☝️)
  • Tested on mobile (or does not apply)

Post merge

@asumaran asumaran self-assigned this Oct 18, 2024
@asumaran asumaran linked an issue Oct 18, 2024 that may be closed by this pull request
@botwoo
Copy link
Collaborator

botwoo commented Oct 18, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 9592 or branch name 9104-add-support-for-allowedshippingcountries-in-express-checkout-element in your-test.site/wp-admin/admin.php?page=jetpack-beta&plugin=woocommerce-payments

Option 2. Jurassic Ninja - available for logged-in A12s

🚀 Launch a JN site with this branch 🚀

ℹ️ Install this Tampermonkey script to get more options.


Build info:

  • Latest commit: dbbf82f
  • Build time: 2024-10-28 22:04:42 UTC

Note: the build is updated when a new commit is pushed to this PR.

Copy link
Contributor

github-actions bot commented Oct 18, 2024

Size Change: +44 B (0%)

Total Size: 1.34 MB

Filename Size Change
release/woocommerce-payments/dist/blocks-checkout.js 67.3 kB +19 B (0%)
release/woocommerce-payments/dist/express-checkout.js 14.8 kB +25 B (0%)
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.37 kB
release/woocommerce-payments/assets/css/admin.rtl.css 1.37 kB
release/woocommerce-payments/assets/css/success.css 173 B
release/woocommerce-payments/assets/css/success.rtl.css 173 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css 2.64 kB
release/woocommerce-payments/dist/blocks-checkout.css 2.64 kB
release/woocommerce-payments/dist/cart-block.js 16.8 kB
release/woocommerce-payments/dist/cart.js 5.73 kB
release/woocommerce-payments/dist/checkout-rtl.css 1.21 kB
release/woocommerce-payments/dist/checkout.css 1.21 kB
release/woocommerce-payments/dist/checkout.js 32.8 kB
release/woocommerce-payments/dist/express-checkout-rtl.css 230 B
release/woocommerce-payments/dist/express-checkout.css 230 B
release/woocommerce-payments/dist/frontend-tracks.js 858 B
release/woocommerce-payments/dist/index-rtl.css 39.2 kB
release/woocommerce-payments/dist/index.css 39.2 kB
release/woocommerce-payments/dist/index.js 302 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.08 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 4.46 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 60.6 kB
release/woocommerce-payments/dist/multi-currency.css 4.46 kB
release/woocommerce-payments/dist/multi-currency.js 57.3 kB
release/woocommerce-payments/dist/order-rtl.css 730 B
release/woocommerce-payments/dist/order.css 730 B
release/woocommerce-payments/dist/order.js 42 kB
release/woocommerce-payments/dist/payment-gateways-rtl.css 1.32 kB
release/woocommerce-payments/dist/payment-gateways.css 1.32 kB
release/woocommerce-payments/dist/payment-gateways.js 38.4 kB
release/woocommerce-payments/dist/payment-request-rtl.css 230 B
release/woocommerce-payments/dist/payment-request.css 230 B
release/woocommerce-payments/dist/payment-request.js 14.2 kB
release/woocommerce-payments/dist/plugins-page-rtl.css 386 B
release/woocommerce-payments/dist/plugins-page.css 386 B
release/woocommerce-payments/dist/plugins-page.js 20.1 kB
release/woocommerce-payments/dist/product-details-rtl.css 433 B
release/woocommerce-payments/dist/product-details.css 436 B
release/woocommerce-payments/dist/product-details.js 12 kB
release/woocommerce-payments/dist/settings-rtl.css 11.6 kB
release/woocommerce-payments/dist/settings.css 11.5 kB
release/woocommerce-payments/dist/settings.js 224 kB
release/woocommerce-payments/dist/subscription-edit-page.js 703 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css 524 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 524 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 20.2 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 730 B
release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css 120 B
release/woocommerce-payments/dist/subscriptions-empty-state.css 120 B
release/woocommerce-payments/dist/subscriptions-empty-state.js 19.3 kB
release/woocommerce-payments/dist/tokenized-payment-request-rtl.css 230 B
release/woocommerce-payments/dist/tokenized-payment-request.css 230 B
release/woocommerce-payments/dist/tokenized-payment-request.js 15 kB
release/woocommerce-payments/dist/tos-rtl.css 235 B
release/woocommerce-payments/dist/tos.css 235 B
release/woocommerce-payments/dist/tos.js 21.8 kB
release/woocommerce-payments/dist/woopay-direct-checkout.js 6.14 kB
release/woocommerce-payments/dist/woopay-express-button.js 24.6 kB
release/woocommerce-payments/dist/woopay-rtl.css 4.52 kB
release/woocommerce-payments/dist/woopay.css 4.49 kB
release/woocommerce-payments/dist/woopay.js 71.6 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 625 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 814 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js 2.46 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/jetpack-script-data.js 735 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/react-jsx-runtime.js 553 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js 1.02 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/script-data.js 69 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/babel.config.js 163 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.css 2.45 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.js 14.2 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.rtl.css 2.45 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.css 198 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.js 280 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.rtl.css 198 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.css 625 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.js 333 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.rtl.css 626 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-users.js 417 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js 521 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js 584 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.css 215 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.js 521 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.css 721 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.js 412 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-users.js 621 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css 1.04 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-empty-state.css 294 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css 408 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css 3.59 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css 301 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css 746 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css 574 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css 414 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js 543 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin.js 9.4 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.js 6.78 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js 3.84 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js 545 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-subscription.js 2.52 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.js 22.2 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js 11.7 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/payment-method-restrictions.js 1.29 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/wcs-meta-boxes-order.js 507 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js 358 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js 428 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/view-subscription.js 1.38 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/wcs-cart.js 782 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js 1.09 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js 1.26 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css 391 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js 3.04 kB

compressed-size-action

@asumaran asumaran force-pushed the 9104-add-support-for-allowedshippingcountries-in-express-checkout-element branch from f3552d8 to 606ec49 Compare October 20, 2024 07:04
@asumaran asumaran marked this pull request as ready for review October 28, 2024 23:46
@asumaran asumaran requested review from a team and rafaelzaleski and removed request for a team October 28, 2024 23:46
Copy link
Contributor

@rafaelzaleski rafaelzaleski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

✅ Verified checkout functionality across all specified shipping and selling location configurations (product, cart, and checkout pages—blocks and shortcode). All cases functioned as expected.

@asumaran asumaran added this pull request to the merge queue Oct 29, 2024
Merged via the queue into develop with commit d5819b0 Oct 29, 2024
25 checks passed
@asumaran asumaran deleted the 9104-add-support-for-allowedshippingcountries-in-express-checkout-element branch October 29, 2024 22:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add support for allowedShippingCountries in Express Checkout Element
4 participants