Fix: Set link wallets option for Stripe Payment Element based on isLinkEnabled (#11032)

Author: htdat

changelog/fix-conditionally-link-options-in-checkout-form

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Conditionally set Stripe Link wallet option based on payment method configuration

client/checkout/classic/payment-processing.js

@@ -290,6 +290,9 @@ async function createStripePaymentElement(
 		wallets: {
 			applePay: 'never',
 			googlePay: 'never',
+			link: isLinkEnabled( getUPEConfig( 'paymentMethodsConfig' ) )
+				? 'auto'
+				: 'never',
 		},
 	} );
 

client/checkout/utils/__tests__/upe.test.js

@@ -639,7 +639,7 @@ describe( 'getStripeElementOptions', () => {
 				},
 			},
 			terms: { bancontact: 'always', card: 'always', eps: 'always' },
-			wallets: { applePay: 'never', googlePay: 'never' },
+			wallets: { applePay: 'never', googlePay: 'never', link: 'never' },
 		} );
 	} );
 
@@ -687,7 +687,7 @@ describe( 'getStripeElementOptions', () => {
 				},
 			},
 			terms: { bancontact: 'always', card: 'always', eps: 'always' },
-			wallets: { applePay: 'never', googlePay: 'never' },
+			wallets: { applePay: 'never', googlePay: 'never', link: 'never' },
 		} );
 	} );
 
@@ -727,7 +727,50 @@ describe( 'getStripeElementOptions', () => {
 				},
 			},
 			terms: { card: 'never' },
-			wallets: { applePay: 'never', googlePay: 'never' },
+			wallets: { applePay: 'never', googlePay: 'never', link: 'never' },
+		} );
+	} );
+
+	test( 'should return options with link: "auto" when both card and link are available', () => {
+		const shouldSavePayment = false;
+		const paymentMethodsConfig = {
+			card: {
+				isReusable: true,
+			},
+			link: {
+				isReusable: false,
+			},
+		};
+
+		getUPEConfig.mockImplementation( ( argument ) => {
+			if ( argument === 'cartContainsSubscription' ) {
+				return false;
+			}
+		} );
+
+		const options = getStripeElementOptions(
+			shouldSavePayment,
+			paymentMethodsConfig
+		);
+
+		expect( options ).toEqual( {
+			fields: {
+				billingDetails: {
+					address: {
+						city: 'never',
+						country: 'never',
+						line1: 'never',
+						line2: 'never',
+						postalCode: 'never',
+						state: 'never',
+					},
+					email: 'never',
+					name: 'never',
+					phone: 'never',
+				},
+			},
+			terms: { card: 'never' },
+			wallets: { applePay: 'never', googlePay: 'never', link: 'auto' },
 		} );
 	} );
 } );

client/checkout/utils/upe.js

@@ -224,6 +224,19 @@ export function dispatchChangeEventFor( element ) {
 	element.dispatchEvent( event );
 }
 
+/**
+ * Check whether Stripe Link is enabled.
+ *
+ * @param {Object} paymentMethodsConfig Checkout payment methods configuration settings object.
+ * @return {boolean} True, if enabled; false otherwise.
+ */
+export const isLinkEnabled = ( paymentMethodsConfig ) => {
+	return (
+		paymentMethodsConfig.link !== undefined &&
+		paymentMethodsConfig.card !== undefined
+	);
+};
+
 /**
  * Returns the prepared set of options needed to initialize the Stripe elements for UPE in Block Checkout.
  * The initial options have all the fields set to 'never' to hide them from the UPE, because all the
@@ -258,6 +271,7 @@ export const getStripeElementOptions = (
 		wallets: {
 			applePay: 'never',
 			googlePay: 'never',
+			link: isLinkEnabled( paymentMethodsConfig ) ? 'auto' : 'never',
 		},
 	};
 
@@ -271,19 +285,6 @@ export const getStripeElementOptions = (
 	return options;
 };
 
-/**
- * Check whether Stripe Link is enabled.
- *
- * @param {Object} paymentMethodsConfig Checkout payment methods configuration settings object.
- * @return {boolean} True, if enabled; false otherwise.
- */
-export const isLinkEnabled = ( paymentMethodsConfig ) => {
-	return (
-		paymentMethodsConfig.link !== undefined &&
-		paymentMethodsConfig.card !== undefined
-	);
-};
-
 /**
  * Get array of payment method types to use with intent.
  *