[ECE] Add Stripe Link Support on Block Cart and Block Checkout pages (#…

…3540)

* Add Stripe Link to block pages

* Update comments

* Fix comment

* Fix comments

* Add Stripe link preview

* Add blank line to bottom of scss file

* Add changelog entries

* Add hover styling to give illusion of a button

* Remove extra line

changelog.txt

@@ -10,6 +10,7 @@
 * Fix - Prevent marking orders on-hold with order note "Process order to take payment" when the payment has failed.
 * Fix - Fix payment methods count on settings page.
 * 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.
 
 = 8.8.0 - 2024-10-17 =

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

@@ -1,14 +1,18 @@
 import React from 'react';
 import { Elements } from '@stripe/react-stripe-js';
 import ExpressCheckoutComponent from './express-checkout-component';
+import { 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
+		),
 	};
 
 	return (

client/blocks/express-checkout/index.js

@@ -4,6 +4,7 @@ import { PAYMENT_METHOD_EXPRESS_CHECKOUT_ELEMENT } from './constants';
 import { ExpressCheckoutContainer } from './express-checkout-container';
 import ApplePayPreview from './apple-pay-preview';
 import GooglePayPreview from './google-pay-preview';
+import StripeLinkPreview from './stripe-link-preview';
 import { loadStripe } from 'wcstripe/blocks/load-stripe';
 import { getBlocksConfiguration } from 'wcstripe/blocks/utils';
 import { checkPaymentMethodIsAvailable } from 'wcstripe/express-checkout/utils/check-payment-method-availability';
@@ -66,4 +67,34 @@ const expressCheckoutElementsApplePay = ( api ) => ( {
 	},
 } );
 
-export { expressCheckoutElementsGooglePay, expressCheckoutElementsApplePay };
+const expressCheckoutElementsStripeLink = ( api ) => ( {
+	name: PAYMENT_METHOD_EXPRESS_CHECKOUT_ELEMENT + '_link',
+	content: (
+		<ExpressCheckoutContainer
+			api={ api }
+			stripe={ stripePromise }
+			expressPaymentMethod="link"
+		/>
+	),
+	edit: <StripeLinkPreview />,
+	canMakePayment: ( { cart } ) => {
+		// eslint-disable-next-line camelcase
+		if ( typeof wc_stripe_express_checkout_params === 'undefined' ) {
+			return false;
+		}
+
+		return new Promise( ( resolve ) => {
+			checkPaymentMethodIsAvailable( 'link', api, cart, resolve );
+		} );
+	},
+	paymentMethodId: PAYMENT_METHOD_EXPRESS_CHECKOUT_ELEMENT,
+	supports: {
+		features: getBlocksConfiguration()?.supports ?? [],
+	},
+} );
+
+export {
+	expressCheckoutElementsGooglePay,
+	expressCheckoutElementsApplePay,
+	expressCheckoutElementsStripeLink,
+};

client/blocks/express-checkout/stripe-link-preview/index.js

@@ -0,0 +1,11 @@
+/* eslint-disable max-len */
+import icon from './icon.svg';
+import './style.scss';
+
+const useStripeLinkPreview = () => (
+	<div className="stripe-link-preview">
+		<img src={ icon } alt="" />
+	</div>
+);
+
+export default useStripeLinkPreview;

client/blocks/express-checkout/stripe-link-preview/style.scss

@@ -0,0 +1,12 @@
+.stripe-link-preview {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: #00d66f;
+	border-radius: 5px;
+	height: 40px;
+	&:hover {
+		cursor: pointer;
+		filter: opacity(0.7);
+	}
+}

client/blocks/upe/index.js

@@ -11,6 +11,7 @@ import paymentRequestPaymentMethod from 'wcstripe/blocks/payment-request';
 import {
 	expressCheckoutElementsGooglePay,
 	expressCheckoutElementsApplePay,
+	expressCheckoutElementsStripeLink,
 } from 'wcstripe/blocks/express-checkout';
 import WCStripeAPI from 'wcstripe/api';
 import { getBlocksConfiguration } from 'wcstripe/blocks/utils';
@@ -97,6 +98,7 @@ if ( getBlocksConfiguration()?.isECEEnabled ) {
 	// Register Express Checkout Element.
 	registerExpressPaymentMethod( expressCheckoutElementsGooglePay( api ) );
 	registerExpressPaymentMethod( expressCheckoutElementsApplePay( api ) );
+	registerExpressPaymentMethod( expressCheckoutElementsStripeLink( api ) );
 } else {
 	// Register Stripe Payment Request.
 	registerExpressPaymentMethod( paymentRequestPaymentMethod );

client/express-checkout/utils/check-payment-method-availability.js

@@ -1,6 +1,7 @@
 import ReactDOM from 'react-dom';
 import { ExpressCheckoutElement, Elements } from '@stripe/react-stripe-js';
 import { memoize } from 'lodash';
+import { getPaymentMethodTypesForExpressMethod } from 'wcstripe/express-checkout/utils';
 
 export const checkPaymentMethodIsAvailable = memoize(
 	( paymentMethod, api, cart, resolve ) => {
@@ -22,6 +23,9 @@ export const checkPaymentMethodIsAvailable = memoize(
 					paymentMethodCreation: 'manual',
 					amount: Number( cart.cartTotals.total_price ),
 					currency: cart.cartTotals.currency_code.toLowerCase(),
+					paymentMethodTypes: getPaymentMethodTypesForExpressMethod(
+						paymentMethod
+					),
 				} }
 			>
 				<ExpressCheckoutElement
@@ -37,7 +41,7 @@ export const checkPaymentMethodIsAvailable = memoize(
 								paymentMethod === 'googlePay'
 									? 'always'
 									: 'never',
-							link: 'never',
+							link: paymentMethod === 'link' ? 'auto' : 'never',
 							paypal: 'never',
 						},
 					} }

client/express-checkout/utils/index.js

@@ -1,6 +1,6 @@
 /* global wc_stripe_express_checkout_params */
-
 import { isLinkEnabled, getPaymentMethodTypes } from 'wcstripe/stripe-utils';
+import { getBlocksConfiguration } from 'wcstripe/blocks/utils';
 
 export * from './normalize';
 
@@ -273,3 +273,36 @@ export const getExpressPaymentMethodTypes = ( paymentMethodType = null ) => {
 
 	return expressPaymentMethodTypes;
 };
+
+/**
+ * Fetches the payment method types required to process a payment for an Express method.
+ *
+ * @see https://docs.stripe.com/elements/express-checkout-element/accept-a-payment#enable-payment-methods - lists the method types
+ * supported and which ones are required by each Express Checkout method.
+ *
+ * @param {*} paymentMethodType The express payment method type. eg 'link', 'googlePay', or 'applePay'.
+ * @return {Array} Array of payment method types necessary to process a payment for an Express method.
+ */
+export const getPaymentMethodTypesForExpressMethod = ( paymentMethodType ) => {
+	const paymentMethodsConfig = getBlocksConfiguration()?.paymentMethodsConfig;
+	const paymentMethodTypes = [];
+
+	if ( ! paymentMethodsConfig ) {
+		return paymentMethodTypes;
+	}
+
+	// All express payment methods require 'card' payments. Add it if it's enabled.
+	if ( paymentMethodsConfig?.card !== undefined ) {
+		paymentMethodTypes.push( 'card' );
+	}
+
+	// Add 'link' payment method type if enabled and requested.
+	if (
+		paymentMethodType === 'link' &&
+		isLinkEnabled( paymentMethodsConfig )
+	) {
+		paymentMethodTypes.push( 'link' );
+	}
+
+	return paymentMethodTypes;
+};

readme.txt

@@ -120,6 +120,7 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
 * Fix - Prevent marking orders on-hold with order note "Process order to take payment" when the payment has failed.
 * Fix - Fix payment methods count on settings page.
 * 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.
 
 [See changelog for all versions](https://raw.githubusercontent.com/woocommerce/woocommerce-gateway-stripe/trunk/changelog.txt).