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 Pay for Order support in ECE #8994

Merged
merged 13 commits into from
Jul 3, 2024

Conversation

cesarcosta99
Copy link
Contributor

@cesarcosta99 cesarcosta99 commented Jun 20, 2024

Fixes #8869.

Changes proposed in this Pull Request

This PR is getting the Express Checkout Elements (ECE) rendered in the Pay for Order flow and introducing the payment processing implementation for the same flow.

Testing instructions

Important

This has been tested using Google Pay since it is currently difficult to test Apple Pay due to Apple Pay's requirements for test cards.

Important

You must test these changes on a public facing URL using HTTPS. Use something like Jurassic Tube or ngrok to create a tunnel to your local environment.

Setup

Ensure ECE is disabled by setting the _wcpay_feature_stripe_ece option to 0.

Regression test: Payment request buttons work as expected when ECE is disabled

  1. As a merchant, navigate to WooCommerce > Orders > Add order.
  2. Click on Add item(s), then on Add product(s).
  3. Type in some product name, such as "Beanie" and select it.
  4. Click on the Add button, and finally, on the Create button.
  5. Copy the Customer payment page link.
  6. As a customer, navigate to the link you copied.
  7. Pay using the Payment Request Button (PRB) and make sure the payment is processed successfully.
  8. Test paying with the PRB in the product page, in the cart and in the checkout page as well.

Regression test: Checkout with ECE still works in the standard flows

  1. Enable ECE by setting the _wcpay_feature_stripe_ece option to 1.
  2. As a customer, test paying with the ECE in the product page, in the cart and in the checkout page.

Regression test: Regular checkout works when no express checkout payment method is active

  1. As a merchant, navigate to Payments > Settings.
  2. Disable all express checkouts and save changes.
  3. As a customer, add a product to the cart, go to checkout and complete the order. Make sure the payment is processed successfully.

Test: Checkout with ECE in Pay for Order works with WooPay disabled

  1. As a merchant, navigate to Payments > Settings.
  2. Enable Apple Pay/Google Pay and save changes.
  3. Navigate to WooCommerce > Orders > Add order.
  4. Click on Add item(s), then on Add product(s).
  5. Type in some product name, such as "Beanie" and select it.
  6. Click on the Add button, and finally, on the Create button.
  7. Copy the Customer payment page link.
  8. As a customer, navigate to the link you copied.
  9. Pay using the ECE and make sure the payment is processed successfully.

Test: Checkout with ECE in Pay for Order works with WooPay enabled

  1. As a merchant, navigate to Payments > Settings.
  2. Enable WooPay and save changes.
  3. Navigate to WooCommerce > Orders > Add order.
  4. Click on Add item(s), then on Add product(s).
  5. Type in some product name, such as "Beanie" and select it.
  6. Click on the Add button, and finally, on the Create button.
  7. Copy the Customer payment page link.
  8. As a customer, navigate to the link you copied.
  9. Pay using the ECE and make sure the payment is processed successfully.

  • 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

@botwoo
Copy link
Collaborator

botwoo commented Jun 20, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 8994 or branch name add/8869-pay-for-order-support-in-ece 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: f6ab093
  • Build time: 2024-07-01 23:07:08 UTC

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

Copy link
Contributor

github-actions bot commented Jun 20, 2024

Size Change: +293 B (0%)

Total Size: 1.26 MB

Filename Size Change
release/woocommerce-payments/dist/blocks-checkout.js 52.2 kB +75 B (0%)
release/woocommerce-payments/dist/cart-block.js 15.4 kB +15 B (0%)
release/woocommerce-payments/dist/checkout.js 31.5 kB +18 B (0%)
release/woocommerce-payments/dist/express-checkout.js 5.64 kB +130 B (+2%)
release/woocommerce-payments/dist/payment-request.js 5.93 kB +13 B (0%)
release/woocommerce-payments/dist/product-details.js 11.2 kB +16 B (0%)
release/woocommerce-payments/dist/tokenized-payment-request.js 6.7 kB +12 B (0%)
release/woocommerce-payments/dist/woopay-express-button.js 15.2 kB +14 B (0%)
ℹ️ 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 172 B
release/woocommerce-payments/assets/css/success.rtl.css 172 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css 2.07 kB
release/woocommerce-payments/dist/blocks-checkout.css 2.07 kB
release/woocommerce-payments/dist/bnpl-announcement-rtl.css 530 B
release/woocommerce-payments/dist/bnpl-announcement.css 531 B
release/woocommerce-payments/dist/bnpl-announcement.js 20 kB
release/woocommerce-payments/dist/cart.js 4.57 kB
release/woocommerce-payments/dist/checkout-rtl.css 599 B
release/woocommerce-payments/dist/checkout.css 599 B
release/woocommerce-payments/dist/express-checkout-rtl.css 155 B
release/woocommerce-payments/dist/express-checkout.css 155 B
release/woocommerce-payments/dist/index-rtl.css 41.3 kB
release/woocommerce-payments/dist/index.css 41.3 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.42 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 59.5 kB
release/woocommerce-payments/dist/multi-currency.css 3.42 kB
release/woocommerce-payments/dist/multi-currency.js 54.7 kB
release/woocommerce-payments/dist/order-rtl.css 733 B
release/woocommerce-payments/dist/order.css 735 B
release/woocommerce-payments/dist/order.js 41.8 kB
release/woocommerce-payments/dist/payment-gateways-rtl.css 1.36 kB
release/woocommerce-payments/dist/payment-gateways.css 1.36 kB
release/woocommerce-payments/dist/payment-gateways.js 38.6 kB
release/woocommerce-payments/dist/payment-request-rtl.css 155 B
release/woocommerce-payments/dist/payment-request.css 155 B
release/woocommerce-payments/dist/plugins-page-rtl.css 388 B
release/woocommerce-payments/dist/plugins-page.css 388 B
release/woocommerce-payments/dist/plugins-page.js 19.3 kB
release/woocommerce-payments/dist/product-details-rtl.css 398 B
release/woocommerce-payments/dist/product-details.css 402 B
release/woocommerce-payments/dist/settings-rtl.css 11.1 kB
release/woocommerce-payments/dist/settings.css 11 kB
release/woocommerce-payments/dist/settings.js 201 kB
release/woocommerce-payments/dist/subscription-edit-page.js 669 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css 527 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 527 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 19.4 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 693 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.5 kB
release/woocommerce-payments/dist/tokenized-payment-request-rtl.css 155 B
release/woocommerce-payments/dist/tokenized-payment-request.css 155 B
release/woocommerce-payments/dist/tos-rtl.css 235 B
release/woocommerce-payments/dist/tos.css 236 B
release/woocommerce-payments/dist/tos.js 21 kB
release/woocommerce-payments/dist/woopay-direct-checkout.js 4.94 kB
release/woocommerce-payments/dist/woopay-express-button-rtl.css 155 B
release/woocommerce-payments/dist/woopay-express-button.css 155 B
release/woocommerce-payments/dist/woopay-rtl.css 4.25 kB
release/woocommerce-payments/dist/woopay.css 4.22 kB
release/woocommerce-payments/dist/woopay.js 69.4 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 622 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 815 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js 2.44 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js 1.01 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.css 196 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 196 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.css 627 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 628 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-users.js 390 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js 522 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js 581 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.css 214 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.js 523 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.css 722 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.js 408 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-users.js 517 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/babel.config.js 160 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.5 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.03 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-empty-state.css 291 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css 403 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css 3.6 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css 299 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css 742 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css 572 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css 411 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js 544 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.8 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js 3.83 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js 544 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.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js 11.6 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 502 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js 355 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js 429 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 781 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js 1.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js 1.27 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css 392 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js 3.05 kB

compressed-size-action

Base automatically changed from as-8868-ece-product-page to develop June 21, 2024 05:04
@cesarcosta99 cesarcosta99 force-pushed the add/8869-pay-for-order-support-in-ece branch from cc36642 to 62083f6 Compare June 22, 2024 02:38
@cesarcosta99 cesarcosta99 marked this pull request as ready for review June 22, 2024 03:34
@cesarcosta99 cesarcosta99 requested review from a team and lovo-h and removed request for a team June 22, 2024 03:34
Copy link
Contributor

@lovo-h lovo-h left a comment

Choose a reason for hiding this comment

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

Code changes are looking good and testing well.

I left a few nit comments, but there were two we may want to handle before merging:

  • Unintentionally left behind comment.
  • Duplicate code that we may be able to de-duplicate for easier maintenance. This one might be optional.

Testing Instructions

  1. 🟢 Regression test: Payment request buttons work as expected when ECE is disabled.
  2. 🟢 Regression test: Checkout with ECE still works in the standard flows.
  3. 🟢 Regression test: Regular checkout works when no express checkout payment method is active.
  4. 🟢 Test: Checkout with ECE in Pay for Order works with WooPay disabled.
  5. 🟢 Test: Checkout with ECE in Pay for Order works with WooPay enabled.
  6. 🟢 npm run test:js.

client/express-checkout/event-handlers.js Outdated Show resolved Hide resolved
client/express-checkout/event-handlers.js Outdated Show resolved Hide resolved
@cesarcosta99 cesarcosta99 enabled auto-merge July 1, 2024 23:18
@cesarcosta99 cesarcosta99 requested a review from lovo-h July 1, 2024 23:18
Copy link
Contributor

@lovo-h lovo-h left a comment

Choose a reason for hiding this comment

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

Code changes look good and test well.

Testing Instructions

  1. 🟢 Regression test: Payment request buttons work as expected when ECE is disabled.
  2. 🟢 Regression test: Checkout with ECE still works in the standard flows.
  3. 🟢 Regression test: Regular checkout works when no express checkout payment method is active.
  4. 🟢 Test: Checkout with ECE in Pay for Order works with WooPay disabled.
  5. 🟢 Test: Checkout with ECE in Pay for Order works with WooPay enabled.
  6. 🟢 npm run test:js and npm run test:php.

Note: For the test Regression test: Payment request buttons work as expected when ECE is disabled, I was not able to get the PRBs to load due to the issue reported here:

  • p1719971520784039-slack-CU6SYV31A

However, I got things to work as intended by checking out to the commit right before.

@cesarcosta99 cesarcosta99 added this pull request to the merge queue Jul 3, 2024
Merged via the queue into develop with commit 05e7d86 Jul 3, 2024
23 checks passed
@cesarcosta99 cesarcosta99 deleted the add/8869-pay-for-order-support-in-ece branch July 3, 2024 02:19
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.

Integrate ECE Payment Processing for the Pay for Order Endpoint
3 participants