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

Ensure Shopper Can Still Checkout Through Direct Checkout When WooPay Is Slow or Unavailable #9050

Merged
merged 10 commits into from
Jul 5, 2024

Conversation

lovo-h
Copy link
Contributor

@lovo-h lovo-h commented Jul 4, 2024

Fixes #8986

Changes proposed in this Pull Request

The changes in this PR ensure that the WooPay Direct Checkout flow does not hang when a message is posted to WooPay and WooPay does not respond. Additionally, it ensures that WooPay is available before redirecting shoppers to WooPay Checkout.

Testing instructions

Note

The changes in this PR should be tested with the changes in 2794-gh-Automattic/woopay.

  • Ensure test instructions from 2794-gh-Automattic/woopay successfully pass.

  • 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

lovo-h added 8 commits July 4, 2024 14:40
This allows WooPay to set a custom timeout for messages that are posted
to WooPay. If this custom timeout is not set, it defaults to 5 seconds.
Previously, if a message was posted to WooPay and WooPay did not
respond, it would be possible for the DC flow to hang. Now, a timeout
is added so that if a response is not returned within the allotted time,
an error is thrown and the DC flow short-circuits back to the standard
checkout flow.
@lovo-h lovo-h requested a review from a team July 4, 2024 21:35
@lovo-h lovo-h self-assigned this Jul 4, 2024
@lovo-h lovo-h requested review from bborman22 and removed request for a team July 4, 2024 21:35
@botwoo
Copy link
Collaborator

botwoo commented Jul 4, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 9050 or branch name add/8986-post-message-fail-safe-fallback 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: 7373293
  • Build time: 2024-07-05 16:42:47 UTC

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

Copy link
Contributor

github-actions bot commented Jul 4, 2024

Size Change: +1.51 kB (0%)

Total Size: 1.26 MB

Filename Size Change
release/woocommerce-payments/dist/blocks-checkout.js 52.9 kB +297 B (+1%)
release/woocommerce-payments/dist/cart.js 4.87 kB +322 B (+7%) 🔍
release/woocommerce-payments/dist/settings.js 202 kB +287 B (0%)
release/woocommerce-payments/dist/woopay-direct-checkout.js 5.25 kB +324 B (+7%) 🔍
release/woocommerce-payments/dist/woopay-express-button.js 15.6 kB +278 B (+2%)
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.08 kB
release/woocommerce-payments/assets/css/admin.rtl.css 1.08 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.06 kB
release/woocommerce-payments/dist/blocks-checkout.css 2.06 kB
release/woocommerce-payments/dist/bnpl-announcement-rtl.css 528 B
release/woocommerce-payments/dist/bnpl-announcement.css 529 B
release/woocommerce-payments/dist/bnpl-announcement.js 20.1 kB
release/woocommerce-payments/dist/cart-block.js 15.4 kB
release/woocommerce-payments/dist/checkout-rtl.css 600 B
release/woocommerce-payments/dist/checkout.css 600 B
release/woocommerce-payments/dist/checkout.js 31.7 kB
release/woocommerce-payments/dist/express-checkout-rtl.css 154 B
release/woocommerce-payments/dist/express-checkout.css 154 B
release/woocommerce-payments/dist/express-checkout.js 5.63 kB
release/woocommerce-payments/dist/index-rtl.css 41 kB
release/woocommerce-payments/dist/index.css 40.9 kB
release/woocommerce-payments/dist/index.js 295 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.05 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 3.41 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 59.8 kB
release/woocommerce-payments/dist/multi-currency.css 3.41 kB
release/woocommerce-payments/dist/multi-currency.js 54.9 kB
release/woocommerce-payments/dist/order-rtl.css 730 B
release/woocommerce-payments/dist/order.css 730 B
release/woocommerce-payments/dist/order.js 41.9 kB
release/woocommerce-payments/dist/payment-gateways-rtl.css 1.35 kB
release/woocommerce-payments/dist/payment-gateways.css 1.35 kB
release/woocommerce-payments/dist/payment-gateways.js 38.8 kB
release/woocommerce-payments/dist/payment-request-rtl.css 154 B
release/woocommerce-payments/dist/payment-request.css 154 B
release/woocommerce-payments/dist/payment-request.js 5.9 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 19.4 kB
release/woocommerce-payments/dist/product-details-rtl.css 397 B
release/woocommerce-payments/dist/product-details.css 398 B
release/woocommerce-payments/dist/product-details.js 11.2 kB
release/woocommerce-payments/dist/settings-rtl.css 11.1 kB
release/woocommerce-payments/dist/settings.css 11 kB
release/woocommerce-payments/dist/subscription-edit-page.js 668 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 19.5 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 694 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 18.6 kB
release/woocommerce-payments/dist/tokenized-payment-request-rtl.css 154 B
release/woocommerce-payments/dist/tokenized-payment-request.css 154 B
release/woocommerce-payments/dist/tokenized-payment-request.js 6.62 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 kB
release/woocommerce-payments/dist/woopay-express-button-rtl.css 154 B
release/woocommerce-payments/dist/woopay-express-button.css 154 B
release/woocommerce-payments/dist/woopay-rtl.css 4.26 kB
release/woocommerce-payments/dist/woopay.css 4.23 kB
release/woocommerce-payments/dist/woopay.js 69.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/src/js/i18n-loader.js 1.02 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 20 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 20 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 392 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 520 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/babel.config.js 159 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.css 2.36 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js 13.6 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css 2.36 kB
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

Copy link
Contributor

@bborman22 bborman22 left a comment

Choose a reason for hiding this comment

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

After addressing the message name mismatch we discussed this all tested well. I'll jsut re-iterate here the test flows I ran through on the WooPay PR:

  • I ran through all four regression scenarios with both PRs applied and all four worked as expected.
  • I tested commenting out the setPreemptiveSessionData and setRedirectSessionData listeners on WooPay and confirmed it fell back to the merchant checkout.
  • I tested with WooPay "down" and confirmed that it goes directly to merchant checkout after the timeout.
  • I also tested with an extremely low timeout on WooPay (30 ms) and confirmed it took me to merchant checkout in those cases. One thing to note is that the console error didn't show the timeout message and instead showed "Error: Could not retrieve WooPay checkout URL.", but I don't view this as a blocker just something to keep in mind if we see it in the wild.
  • I tested it with the WooPayments changes applied, but not the WooPay changes and found that shoppers with third party cookies blocked will not get DC in that case. Third party cookies allowed still worked.
  • I tested it with WooPay changes applied, but not WooPayments changes and it all worked as expected.

We'll coordinate the WooPay PR deployment in that PR, but otherwise this all tested well for me.

LGTM!

'get_is_reachable_success' to 'get_is_woopay_reachable_success'
@lovo-h lovo-h added this pull request to the merge queue Jul 5, 2024
Merged via the queue into develop with commit 52a3eec Jul 5, 2024
23 checks passed
@lovo-h lovo-h deleted the add/8986-post-message-fail-safe-fallback branch July 5, 2024 16:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Harden WooPay Direct Checkout: Add Fail Safe Mechanism When Posting Messages Through The iFrame
3 participants