Prevent WooPay opt-in checks from running when WooPayments is not ava…

…ilable (#9943)

changelog/fix-9942-no-cost-subscription

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Zero dollar subscriptions with zero dollar renewals checkout error

client/checkout/blocks/index.js

@@ -98,12 +98,13 @@ Object.entries( enabledPaymentMethodsConfig )
 			savedTokenComponent: <SavedTokenHandler api={ api } />,
 			canMakePayment: ( cartData ) => {
 				const billingCountry = cartData.billingAddress.country;
+				const needsPayment = cartData.cart.cartNeedsPayment;
 				const isRestrictedInAnyCountry = !! upeConfig.countries.length;
 				const isAvailableInTheCountry =
 					! isRestrictedInAnyCountry ||
 					upeConfig.countries.includes( billingCountry );
 				// We used to check if stripe was loaded with `getStripeForUPE`, but we can't guarantee it will be loaded synchronously.
-				return isAvailableInTheCountry;
+				return needsPayment && isAvailableInTheCountry;
 			},
 			paymentMethodId: upeMethods[ upeName ],
 			// see .wc-block-checkout__payment-method styles in blocks/style.scss

client/components/woopay/save-user/checkout-page-save-user.js

@@ -54,6 +54,13 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 	const { isWCPayChosen, isNewPaymentTokenChosen } = useSelectedPaymentMethod(
 		isBlocksCheckout
 	);
+
+	// In classic checkout the saved tokens are under WCPay, so we need to check if new token is selected or not,
+	// under WCPay. For blocks checkout considering isWCPayChosen is enough.
+	const isWCPayWithNewTokenChosen = isBlocksCheckout
+		? isWCPayChosen
+		: isWCPayChosen && isNewPaymentTokenChosen;
+
 	const viewportWidth = window.document.documentElement.clientWidth;
 	const viewportHeight = window.document.documentElement.clientHeight;
 
@@ -193,7 +200,11 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 			return;
 		}
 
-		if ( isSaveDetailsChecked && ! isPhoneValid ) {
+		if (
+			isSaveDetailsChecked &&
+			! isPhoneValid &&
+			isWCPayWithNewTokenChosen
+		) {
 			setValidationErrors( {
 				[ errorId ]: {
 					message: __(
@@ -212,14 +223,9 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 		isSaveDetailsChecked,
 		sendExtensionData,
 		setValidationErrors,
+		isWCPayWithNewTokenChosen,
 	] );
 
-	// In classic checkout the saved tokens are under WCPay, so we need to check if new token is selected or not,
-	// under WCPay. For blocks checkout considering isWCPayChosen is enough.
-	const isWCPayWithNewTokenChosen = isBlocksCheckout
-		? isWCPayChosen
-		: isWCPayChosen && isNewPaymentTokenChosen;
-
 	const updatePhoneNumber = useCallback( () => {
 		if ( isPhoneNumberTouched.current ) {
 			return;