Integrating ECE to shortcode checkout (#3436)

* add ece feature flag

* update '@stripe/react-stripe-js' to latest

* render ece button on block checkout

* display ece button if feature flag is enabled

* check ece feature flag status from blocks data

* add min height to express checkout container

* create 'WC_Stripe_Express_Checkout_Element' class

* fix callback function name

* register script for shortcode checkout

* move ajax functions to separate class

* move helper functions to a separate class

* include and initialize express checkout classes

* make functions public in the helper class

* fix lint issue

* use correct global variable

* fix php lint issues

* Integrating ECE to shortcode checkout

* Adding extra contraints to show ECE

* Importing additional implementations from WCPay

* Use our own Stripe tracking

* Fix typos in normalizeOrderData

* Add missing client/api methods to handle ECE requests

* Update ESLint config to not require await directly within async functions

* Fix JS linting issues

* Use startExpressCheckoutElement() to init the payment button

* Add getExpressCheckoutAjaxURL util function

* Update ECE API functions to use express checkout data

* Move api const to top and add init function for page specific initialization

* Fix comment

* Adding changelog entry

* Putting display none back

* Multiple changes to the display logic based on WCPay

* Multiple changes to the display logic based on WCPay

* Fix multiple issues + changing the main element ID

* Removing unsupported coalesce operator

* Including missing methods

* Fix lint issues

* Fix lint issues

* Updating ESLint version and requirement

* ECE instantiation options update

* Fix get/update shipping option AJAX requests

* Rename WooPayment related funtion and fix camelcase issue

* Fetch proper requestShipping meta from product data

* Set 'wc-stripe-is-deferred-intent' in data submitted with the checkout when using ECE

* Fixing additional JS error + reverting removal of ESLint rule

* Resolving ESLint issues

* Increasing ECMAScript version in .jshintrc

* Reverting unnecessary changes to stripe-utils

* Reverting more unnecessary changes

* Reverting hardcoded flag

* Fix Jest functions undefined in .jshintrc

* Adding specific unit tests

* Adding specific unit tests

* Reverting unnecessary changes

* Putting some coalesce operators back

* Replace i18n text domain

* Fix typo

* add tracking functions for ece

* add functions for ajax calls for ece

* add event handlers for ece

* add utils for ece

* render ece button on block checkout

* display ece button if feature flag is enabled

* check ece feature flag status from blocks data

* create 'WC_Stripe_Express_Checkout_Element' class

* register script for shortcode checkout

* move helper functions to a separate class

* fix lint issue

* Integrating ECE to shortcode checkout

* Adding extra contraints to show ECE

* Importing additional implementations from WCPay

* Use our own Stripe tracking

* Fix typos in normalizeOrderData

* Add missing client/api methods to handle ECE requests

* Update ESLint config to not require await directly within async functions

* Use startExpressCheckoutElement() to init the payment button

* Add getExpressCheckoutAjaxURL util function

* Move api const to top and add init function for page specific initialization

* Fix comment

* Adding changelog entry

* Putting display none back

* Multiple changes to the display logic based on WCPay

* Multiple changes to the display logic based on WCPay

* Fix multiple issues + changing the main element ID

* Removing unsupported coalesce operator

* Including missing methods

* Fix lint issues

* Fix lint issues

* Updating ESLint version and requirement

* ECE instantiation options update

* Fix get/update shipping option AJAX requests

* Rename WooPayment related funtion and fix camelcase issue

* Fetch proper requestShipping meta from product data

* Set 'wc-stripe-is-deferred-intent' in data submitted with the checkout when using ECE

* Fixing additional JS error + reverting removal of ESLint rule

* Resolving ESLint issues

* Increasing ECMAScript version in .jshintrc

* Reverting unnecessary changes to stripe-utils

* Reverting more unnecessary changes

* Reverting hardcoded flag

* Fix Jest functions undefined in .jshintrc

* Adding specific unit tests

* Adding specific unit tests

* Reverting unnecessary changes

* Putting some coalesce operators back

* Fix merge issues

* Fix merge issues

* Fix merge issues

* Removing duplicate files

* Fix JS import

* Fix JS import

* Adding the get cart details endpoint

* Using real cart data

* Adding get cart details nonce

* Fix get cart details nonce usage

* Updating eslint-plugin-react-hooks to 4.3.0

* Fix lint issues

* Fix lint issues

* Fix lint issues

* Revert hardcoded flag

---------

Co-authored-by: Mayisha <[email protected]>
Co-authored-by: Mayisha <[email protected]>
Co-authored-by: mattallan <[email protected]>
Co-authored-by: James Allan <[email protected]>

.jshintrc

@@ -1,5 +1,5 @@
 {
-	"esversion": 6,
+	"esversion": 11,
 	"boss": true,
 	"curly": true,
 	"eqeqeq": true,
@@ -13,6 +13,9 @@
 
 	"browser": true,
 
+	"mocha": true,
+	"jasmine": true,
+
 	"globals": {
 		"_": false,
 		"Backbone": false,

changelog.txt

@@ -1,6 +1,7 @@
 *** Changelog ***
 
 = 8.8.0 - xxxx-xx-xx =
+* Add - Add support for the new Stripe Checkout Element on the shortcode checkout page. 
 * Dev - Introduces a new class with payment methods constants.
 * Dev - Introduces a new class with currency codes constants.
 * Dev - Improves the readability of the redirect URL generation code (UPE).

client/api/index.js

@@ -507,6 +507,17 @@ export default class WCStripeAPI {
 		);
 	}
 
+	/**
+	 * Get cart items and total amount.
+	 *
+	 * @return {Promise} Promise for the request to the server.
+	 */
+	expressCheckoutGetCartDetails() {
+		return this.request( getExpressCheckoutAjaxURL( 'get_cart_details' ), {
+			security: getExpressCheckoutData( 'nonce' )?.get_cart_details,
+		} );
+	}
+
 	/**
 	 * Creates order based on Express Checkout ECE payment method.
 	 *

client/blocks/express-checkout/express-checkout.js

@@ -13,7 +13,9 @@ export const ExpressCheckout = ( props ) => {
 
 	const buttonOptions = {
 		buttonType: {
+			// eslint-disable-next-line camelcase
 			googlePay: wc_stripe_express_checkout_params.button.type,
+			// eslint-disable-next-line camelcase
 			applePay: wc_stripe_express_checkout_params.button.type,
 		},
 	};