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 ECE Payment buttons on Pay for Order page #3440

Merged
merged 78 commits into from
Sep 27, 2024

Conversation

james-allan
Copy link
Contributor

@james-allan james-allan commented Sep 19, 2024

Closes #3411

Changes proposed in this Pull Request:

This PR adds support for processing Express payment button payments via the Pay for Order page.

Screenshot 2024-09-19 at 10 13 42 am
Google Pay and Apple Pay buttons on the Pay for Order

Testing instructions

SETUP

  1. Enable Apple Pay / Google Pay in your Stripe plugin settings.
  2. Enable the ECE feature flag.
    • Update the _wcstripe_feature_ece option. See WC_Stripe_Feature_Flags::is_stripe_ece_enabled()

PAYMENTS

  1. Go to WooCommerce → Orders on your WP Admin dashboard.
  2. Click the Add order button.
  3. Add your current user as the customer.
  4. Add any items.
  5. Calculate totals.
  6. Create the order.
  7. In the order details section click the "Customer payment page" link. (Screenshot)
  8. On the following page note that the Apple Pay and/or Google Pay buttons are shown.
  9. Choose either Google Pay or Apple Pay
  10. Confirm the modal that pops up has correct totals etc.
Order totals Apple Pay screens
Screenshot 2024-09-19 at 10 33 02 am Screenshot 2024-09-19 at 10 28 53 amScreenshot 2024-09-19 at 10 28 47 am
  1. Complete the payment.
  2. Confirm you are redirected to the order received page.
  3. In your Stripe Dashboard confirm the payment is completed and the total matches the order total.

Screenshot 2024-09-19 at 10 40 18 am


  • Covered with tests (or have a good reason not to test in description ☝️)
  • Added changelog entry in both changelog.txt and readme.txt (or does not apply)
  • Tested on mobile (or does not apply)

Post merge

Mayisha and others added 30 commits September 2, 2024 19:20
Base automatically changed from add/ece-for-shortcode-checkout to develop September 25, 2024 14:50
@james-allan james-allan requested review from a team and mattallan and removed request for a team September 26, 2024 03:12
@@ -130,7 +130,8 @@ If you get stuck, you can ask for help in the Plugin Forum.

= 8.8.0 - xxxx-xx-xx =
* Add - Implemented the "Update all subscriptions payment methods" checkbox on My Account → Payment methods for UPE payment methods.
* Add - Add support for the new Stripe Checkout Element on the shortcode checkout page.
* Add - Add support for the new Stripe Checkout Element on the shortcode checkout page.
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This change is just a blank space at the end of the line which is being removed.

Copy link
Contributor

Choose a reason for hiding this comment

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

Weird that GH isn't showing the whitespace being removed!

@@ -0,0 +1,3 @@
#wc-stripe-express-checkout-element iframe {
max-width: unset;
Copy link
Contributor Author

@james-allan james-allan Sep 26, 2024

Choose a reason for hiding this comment

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

This fixes an issue on all shortcode powered pages and follows the same approach WooPayments took in Automattic/woocommerce-payments#9094 and discussed with Stripe internallly here: p1720833500937719-slack-C9976E5MJ

PAY FOR ORDER

Screenshot 2024-09-26 at 4 44 10 pm
Gap on the right hand side of the payment elements.

CHECKOUT

Screenshot 2024-09-26 at 5 20 45 pm

CART

Screenshot 2024-09-26 at 5 11 45 pm

Copy link
Contributor

@mattallan mattallan left a comment

Choose a reason for hiding this comment

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

Really well put together PR @james-allan ! 💯

I've performed code review and the changes look good.
I've also tested the following flows/cases:

  • Paying for an order with virtual/downloadable products
  • Paying for an order with various shipping & tax totals
  • Paying for an order with/without prices includes tax
  • Paying for an order with discounts applied
  • Paying for an order with multiple products
  • Paying for an order with mix of variable/simple products
  • Confirm orders have correct payment method title
  • Order under minimum amount (0.20). Confirmed buttons don’t show.
  • Test Apple Pay and Google Pay

Something I noticed is the Pay for Order doesn't add the quantity label like we do for the product page.

I.e.

Pay for Order Product Page
image image

This is a very minor detail and I noticed WooPayments does the same thing so happy to run with it as is.

@james-allan
Copy link
Contributor Author

Something I noticed is the Pay for Order doesn't add the quantity label like we do for the product page.

oh neat. I'll file a separate issue for this because I think that's a good enhancement.

@james-allan james-allan merged commit 20d8440 into develop Sep 27, 2024
34 of 35 checks passed
@james-allan james-allan deleted the add/ece-for-pay-for-order-page branch September 27, 2024 03:04
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.

[ECE] Implement ECE for payment processing on pay for order page
4 participants