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

Register Independent ECE Payment Methods within the Blocks Implementation #9047

Merged
merged 9 commits into from
Jul 10, 2024

Conversation

rafaelzaleski
Copy link
Contributor

@rafaelzaleski rafaelzaleski commented Jul 3, 2024

Fixes #9045

Changes proposed in this Pull Request

This PR registers each Express Checkout Element (ECE) payment method individually in WC Blocks, allowing the Blocks API to manage these payment methods separately.

Testing instructions

Pre-requisites:

  • The ECE feature flag is enabled (npm run wp option update _wcpay_feature_stripe_ece 1).
  • Confirm that Apple Pay and Google Pay are enabled in the merchant settings.
  • Use Safari on an Apple Pay-enabled site to view both buttons (Apple Pay and GooglePay).

Test the WC Blocks ECE implementation:

  1. Add a product to the cart.
  2. Navigate to the Blocks cart page.
  3. Verify that both buttons are visible.
  4. Complete the purchase using Apple Pay or Google Pay, then repeat the process with the other payment method to confirm both buttons function correctly.

Repeat these steps for the Blocks Checkout page.


  • 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

@rafaelzaleski rafaelzaleski self-assigned this Jul 3, 2024
@botwoo
Copy link
Collaborator

botwoo commented Jul 3, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 9047 or branch name add/9045-split-ece-pms-registration-for-blocks 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: 53461e4
  • Build time: 2024-07-09 19:54:15 UTC

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

@rafaelzaleski rafaelzaleski changed the title Add/9045 split ece pms registration for blocks Register Independent ECE Payment Methods within the Blocks Implementation Jul 3, 2024
Copy link
Contributor

github-actions bot commented Jul 3, 2024

Size Change: +7.86 kB (+1%)

Total Size: 1.28 MB

Filename Size Change
release/woocommerce-payments/dist/blocks-checkout.js 60.9 kB +7.86 kB (+15%) ⚠️
ℹ️ 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.08 kB
release/woocommerce-payments/dist/blocks-checkout.css 2.08 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/cart.js 4.87 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 6.31 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 55 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.35 kB
release/woocommerce-payments/dist/payment-gateways.css 1.35 kB
release/woocommerce-payments/dist/payment-gateways.js 38.9 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.2 kB
release/woocommerce-payments/dist/settings.css 11.1 kB
release/woocommerce-payments/dist/settings.js 215 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-direct-checkout.js 5.25 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-express-button.js 15.6 kB
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

@rafaelzaleski rafaelzaleski marked this pull request as ready for review July 8, 2024 19:08
@rafaelzaleski rafaelzaleski requested review from a team and ricardo and removed request for a team July 8, 2024 19:09
Copy link
Member

@ricardo ricardo left a comment

Choose a reason for hiding this comment

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

PR looks really good. Nice work!

Tests went well:

  • ✅ Apple Pay and Google Pay show up in separate ECE in the blocks cart page.
  • ✅ Apple Pay and Google Pay show up in separate ECE in the blocks checkout page – however there's currently a limit of 2 buttons so I had to disable WooPay.
  • ✅ I was able to checkout with both Apple Pay and Google Pay in the cart and checkout pages.

❌ I only see one issue with the preview being duplicated for Apple Pay, but this could be tackled in a separate issue perhaps.

@rafaelzaleski rafaelzaleski requested a review from ricardo July 9, 2024 19:50
Copy link
Member

@ricardo ricardo left a comment

Choose a reason for hiding this comment

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

LGTM and tests well.

The new preview looks awesome.

@rafaelzaleski rafaelzaleski added this pull request to the merge queue Jul 10, 2024
Merged via the queue into develop with commit cb9a48e Jul 10, 2024
23 checks passed
@rafaelzaleski rafaelzaleski deleted the add/9045-split-ece-pms-registration-for-blocks branch July 10, 2024 15:00
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.

Register ECE Payment Methods Individually in the WC Blocks API.
3 participants