Merge remote-tracking branch 'origin/release/8.9.0' into trunk

changelog.txt

@@ -1,5 +1,34 @@
 *** Changelog ***
 
+= 8.9.0 - 2024-11-14 =
+* Update - Enhance webhook processing to enable retrieving orders using payment_intent metadata.
+* Dev - Minor updates to the webhook handler class related to payment method names constants.
+* Tweak - Improve error message displayed when payment method creation fails in classic checkout.
+* Dev - Replace two occurrences of payment method names with their constant equivalents.
+* Fix - Hide express checkout when credit card payments are not enabled.
+* Fix - Fix issues when detaching payment methods on staging sites (with the new checkout experience enabled).
+* Fix - Display a notice if taxes vary by customer's billing address when checking out using the Stripe Express Checkout Element.
+* Tweak - Makes the new Stripe Express Checkout Element enabled by default in new accounts.
+* Dev - Add multiple unit tests for the Stripe Express Checkout Element implementation (for both frontend and backend).
+* Fix - Check if taxes are enabled when applying ECE tax compatibility check.
+* Fix - Fix ECE error when initial address on load is not defined as a shipping zone.
+* Fix - Corrected card brand capitalization on the My Account → Subscription page.
+* Fix - Displays a specific message when an authentication error occurs during checkout for 3DS cards (shortcode version).
+* Fix - Show 'Use a New Payment Method' radio button for logged in users only when card saving is enabled.
+* Fix - Fix the display and usage of the Link payment method on the shortcode checkout page with the Stripe Express Checkout Element.
+* Fix - Fix payment methods count on settings page.
+* Update - Improve Express Payment button previews on the edit Block Checkout and Cart pages for Google Pay and Apple Pay.
+* Tweak - Add error logging in ECE critical Ajax requests.
+* Add - Add support for Stripe Link payments via the new Stripe Checkout Element on the block cart and block checkout pages.
+* Add - Add support for Stripe Link payments via the new Stripe Checkout Element on the product, cart, checkout and pay for order pages.
+* Tweak - Do not load ECE button if the total amount is 0.
+* Add - Show ECE button preview on settings page.
+* Tweak - Remove the subscription order notes added each time a source wasn't migrated.
+* Tweak - Update ECE default button type.
+* Fix - Fix position of ECE button on shortcode cart page.
+* Fix - Call ECE specific 'paymentFailed' function only when payment request fails.
+* Fix - Fix issue in purchasing subscriptions when the store has no shipping options.
+
 = 8.8.2 - 2024-11-07 =
 * Fix - Prevent marking renewal orders as processing/completed multiple times due to handling the Stripe webhook in parallel.
 * Dev - Refactor lock_order_payment() to use order meta instead of transients.

client/blocks/express-checkout/express-button-previews/index.js

@@ -0,0 +1,60 @@
+import classNames from 'classnames';
+import googlePayIcon from '../../../payment-method-icons/google-pay/icon-white.svg';
+import applePayIcon from '../../../payment-method-icons/apple-pay/icon-white.svg';
+import stripeLinkIcon from '../../../payment-method-icons/link/icon-black.svg';
+import './style.scss';
+
+/**
+ * Base PaymentButtonPreview Component
+ *
+ * @param {Object} props
+ * @param {string} props.icon - The icon to display.
+ * @param {string} [props.className] - Optional additional class names.
+ * @return {JSX.Element} The rendered component.
+ */
+const PaymentButtonPreview = ( { icon, className } ) => (
+	<div
+		className={ classNames(
+			'wc-stripe-payment-button-preview',
+			className
+		) }
+	>
+		<img src={ icon } alt="Payment Method Icon" />
+	</div>
+);
+
+/**
+ * GooglePayPreview Component
+ *
+ * @return {JSX.Element} The rendered component.
+ */
+export const GooglePayPreview = () => (
+	<PaymentButtonPreview
+		icon={ googlePayIcon }
+		className="wc-stripe-google-pay-preview"
+	/>
+);
+
+/**
+ * ApplePayPreview Component
+ *
+ * @return {JSX.Element} The rendered component.
+ */
+export const ApplePayPreview = () => (
+	<PaymentButtonPreview
+		icon={ applePayIcon }
+		className="wc-stripe-apple-pay-preview"
+	/>
+);
+
+/**
+ * StripeLinkPreview Component
+ *
+ * @return {JSX.Element} The rendered component.
+ */
+export const StripeLinkPreview = () => (
+	<PaymentButtonPreview
+		icon={ stripeLinkIcon }
+		className="wc-stripe-link-preview"
+	/>
+);

client/blocks/express-checkout/express-button-previews/style.scss

@@ -0,0 +1,22 @@
+.wc-stripe-payment-button-preview {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: #000;
+	border-radius: 5px;
+	height: 40px;
+	img {
+		height: 22px;
+	}
+	&:hover {
+		cursor: pointer;
+		filter: opacity(0.7);
+	}
+	/* Stripe Link Overrides */
+	&.wc-stripe-link-preview {
+		background-color: #00d66f;
+		img {
+			height: 40px;
+		}
+	}
+}

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

@@ -1,14 +1,24 @@
 import React from 'react';
 import { Elements } from '@stripe/react-stripe-js';
 import ExpressCheckoutComponent from './express-checkout-component';
+import {
+	getExpressCheckoutButtonAppearance,
+	getExpressCheckoutData,
+	getPaymentMethodTypesForExpressMethod,
+} from 'wcstripe/express-checkout/utils';
 
 export const ExpressCheckoutContainer = ( props ) => {
-	const { stripe, billing } = props;
+	const { stripe, billing, expressPaymentMethod } = props;
 	const options = {
 		mode: 'payment',
 		paymentMethodCreation: 'manual',
 		amount: billing.cartTotal.value,
 		currency: billing.currency.code.toLowerCase(),
+		paymentMethodTypes: getPaymentMethodTypesForExpressMethod(
+			expressPaymentMethod
+		),
+		appearance: getExpressCheckoutButtonAppearance(),
+		locale: getExpressCheckoutData( 'stripe' )?.locale ?? 'en',
 	};
 
 	return (