ECE on shortcode cart page (#3490)

* show button before 'proceed to checkout'

* add gap below the ece button

* add separator on cart page

* refresh ece button when total amount is updated

* changelog entry

* fix condition

Author: Mayisha

changelog.txt

@@ -8,10 +8,11 @@
 * Fix - Updates the display logic for the OAuth re-connect promotional surface to follow the latest changes made to the connection settings object.
 * Fix - Remove unexpected HTML in error message for shortcode checkout.
 * Fix - Ensure ordering for Stripe payment methods is saved even when setting up from scratch.
-* Add - Add support for Stripe Express Checkout Element on the block cart and checkout page.
 * 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 pay for order page.
+* Add - Add support for the new Stripe Express Checkout Element on the block cart and checkout page.
+* Add - Add support for the new Stripe Express Checkout Element on the shortcode checkout page.
+* Add - Add support for the new Stripe Express Checkout Element on the shortcode cart page.
+* Add - Add support for the new Stripe Express Checkout Element on the pay for order page.
 * Add - Add support for the new Stripe Checkout Element on the product page.
 * Dev - Introduces a new class with payment methods constants.
 * Dev - Introduces a new class with currency codes constants.

client/entrypoints/express-checkout/index.js

@@ -618,7 +618,20 @@ jQuery( function ( $ ) {
 		},
 	};
 
-	wcStripeECE.init();
+	// We don't need to initialize ECE on the checkout page now because it will be initialized by updated_checkout event.
+	if ( ! getExpressCheckoutData( 'is_checkout_page' ) ) {
+		wcStripeECE.init();
+	}
+
+	// We need to refresh ECE data when total is updated.
+	$( document.body ).on( 'updated_cart_totals', () => {
+		wcStripeECE.init();
+	} );
+
+	// We need to refresh ECE data when total is updated.
+	$( document.body ).on( 'updated_checkout', () => {
+		wcStripeECE.init();
+	} );
 
 	// Handle bookable products on the product page.
 	let wcBookingFormChanged = false;

client/entrypoints/express-checkout/styles.scss

@@ -1,3 +1,7 @@
 #wc-stripe-express-checkout-element iframe {
 	max-width: unset;
 }
+
+#wc-stripe-express-checkout-element {
+	margin-bottom: 12px;
+}

includes/payment-methods/class-wc-stripe-express-checkout-element.php

@@ -91,7 +91,7 @@ public function init() {
 		add_action( 'wp_enqueue_scripts', [ $this, 'scripts' ] );
 
 		add_action( 'woocommerce_after_add_to_cart_form', [ $this, 'display_express_checkout_button_html' ], 1 );
-		add_action( 'woocommerce_proceed_to_checkout', [ $this, 'display_express_checkout_button_html' ], 25 );
+		add_action( 'woocommerce_proceed_to_checkout', [ $this, 'display_express_checkout_button_html' ] );
 		add_action( 'woocommerce_checkout_before_customer_details', [ $this, 'display_express_checkout_button_html' ], 1 );
 		add_action( 'woocommerce_pay_order_before_payment', [ $this, 'display_express_checkout_button_html' ], 1 );
 
@@ -413,14 +413,18 @@ public function display_express_checkout_button_html() {
 	 * Display express checkout button separator.
 	 */
 	public function display_express_checkout_button_separator_html() {
-		if ( ! is_checkout() && ! is_wc_endpoint_url( 'order-pay' ) ) {
+		if ( ! is_checkout() && ! is_cart() && ! is_wc_endpoint_url( 'order-pay' ) ) {
 			return;
 		}
 
 		if ( is_checkout() && ! in_array( 'checkout', $this->express_checkout_helper->get_button_locations(), true ) ) {
 			return;
 		}
 
+		if ( is_cart() && ! in_array( 'cart', $this->express_checkout_helper->get_button_locations(), true ) ) {
+			return;
+		}
+
 		?>
 		<p id="wc-stripe-express-checkout-button-separator" style="margin-top:1.5em;text-align:center;display:none;">&mdash; <?php esc_html_e( 'OR', 'woocommerce-gateway-stripe' ); ?> &mdash;</p>
 		<?php

readme.txt

@@ -136,10 +136,11 @@ If you get stuck, you can ask for help in the Plugin Forum.
 * Fix - Updates the display logic for the OAuth re-connect promotional surface to follow the latest changes made to the connection settings object.
 * Fix - Remove unexpected HTML in error message for shortcode checkout.
 * Fix - Ensure ordering for Stripe payment methods is saved even when setting up from scratch.
-* Add - Add support for Stripe Express Checkout Element on the block cart and checkout page.
 * 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 pay for order page.
+* Add - Add support for the new Stripe Express Checkout Element on the block cart and checkout page.
+* Add - Add support for the new Stripe Express Checkout Element on the shortcode checkout page.
+* Add - Add support for the new Stripe Express Checkout Element on the shortcode cart page.
+* Add - Add support for the new Stripe Express Checkout Element on the pay for order page.
 * Add - Add support for the new Stripe Checkout Element on the product page.
 * Dev - Introduces a new class with payment methods constants.
 * Dev - Introduces a new class with currency codes constants.