Removing card requirement for OC (#4573)

* Removing card requirement for OC

* Backend changes

* Backend changes

* Changelog and readme entries

* Fix tests

* Fix tests

* unit test

* Fix tests

* Fix shortcode checkout methods display

* Removing unnecessary condition

* Condition is actually necessary

* Removing disabledButChecked prop and related code

* Removing the required for OC pill and related files

* Hide OC container when there are no methods available

* Fix merge

* Fix tests

* Fix express methods not available

Author: wjrosa

changelog.txt

@@ -1,6 +1,7 @@
 *** Changelog ***
 
 = 9.9.0 - xxxx-xx-xx =
+* Fix - Removes the credit card payment method requirement for the Optimized Checkout feature
 * Fix - Payment method test instructions not showing up for the Optimized Checkout payment element
 * Add - Includes a new notice to highlight the Optimized Checkout feature above the payment methods list in the Stripe settings page
 * Update - Increases the default font size for the Optimized Checkout payment element to match the rest of the checkout form

client/blocks/upe/index.js

@@ -5,7 +5,6 @@ import {
 import {
 	PAYMENT_METHOD_AFFIRM,
 	PAYMENT_METHOD_AMAZON_PAY,
-	PAYMENT_METHOD_CARD,
 	PAYMENT_METHOD_GIROPAY,
 	PAYMENT_METHOD_KLARNA,
 	PAYMENT_METHOD_LINK,
@@ -40,32 +39,25 @@ const api = new WCStripeAPI(
 const paymentMethodsConfig =
 	getBlocksConfiguration()?.paymentMethodsConfig ?? {};
 
-// Register UPE Elements.
-if ( getBlocksConfiguration()?.isOCEnabled ) {
-	registerPaymentMethod(
-		upeElement( PAYMENT_METHOD_CARD, api, paymentMethodsConfig.card )
-	);
-} else {
-	const methodsToFilter = [
-		PAYMENT_METHOD_AMAZON_PAY,
-		PAYMENT_METHOD_LINK,
-		PAYMENT_METHOD_GIROPAY, // Skip giropay as it was deprecated by Jun, 30th 2024.
-	];
-
-	// Filter out some BNPLs when other official extensions are present.
-	if ( getBlocksConfiguration()?.hasAffirmGatewayPlugin ) {
-		methodsToFilter.push( PAYMENT_METHOD_AFFIRM );
-	}
-	if ( getBlocksConfiguration()?.hasKlarnaGatewayPlugin ) {
-		methodsToFilter.push( PAYMENT_METHOD_KLARNA );
-	}
+const methodsToFilter = [
+	PAYMENT_METHOD_AMAZON_PAY,
+	PAYMENT_METHOD_LINK,
+	PAYMENT_METHOD_GIROPAY, // Skip giropay as it was deprecated by Jun, 30th 2024.
+];
 
-	Object.entries( paymentMethodsConfig )
-		.filter( ( [ method ] ) => ! methodsToFilter.includes( method ) )
-		.forEach( ( [ method, config ] ) => {
-			registerPaymentMethod( upeElement( method, api, config ) );
-		} );
+// Filter out some BNPLs when other official extensions are present.
+if ( getBlocksConfiguration()?.hasAffirmGatewayPlugin ) {
+	methodsToFilter.push( PAYMENT_METHOD_AFFIRM );
 }
+if ( getBlocksConfiguration()?.hasKlarnaGatewayPlugin ) {
+	methodsToFilter.push( PAYMENT_METHOD_KLARNA );
+}
+
+Object.entries( paymentMethodsConfig )
+	.filter( ( [ method ] ) => ! methodsToFilter.includes( method ) )
+	.forEach( ( [ method, config ] ) => {
+		registerPaymentMethod( upeElement( method, api, config ) );
+	} );
 
 if ( getBlocksConfiguration()?.isECEEnabled ) {
 	// Register Express Checkout Elements.

client/blocks/upe/upe-element.js

@@ -6,6 +6,8 @@ import {
 	PAYMENT_METHOD_AFTERPAY_CLEARPAY,
 	PAYMENT_METHOD_CLEARPAY,
 	PAYMENT_METHOD_BACS,
+	PAYMENT_METHOD_CARD,
+	EXPRESS_PAYMENT_METHODS,
 } from 'wcstripe/stripe-utils/constants';
 import { getBlocksConfiguration } from 'wcstripe/blocks/utils';
 import Icons from 'wcstripe/payment-method-icons';
@@ -78,6 +80,18 @@ export const upeElement = ( paymentMethod, api, upeConfig ) => {
 				return false;
 			}
 
+			const nonExpressPaymentMethods = upeConfig?.enabledPaymentMethods.filter(
+				( method ) => ! EXPRESS_PAYMENT_METHODS.includes( method )
+			);
+
+			if (
+				paymentMethod === PAYMENT_METHOD_CARD &&
+				getBlocksConfiguration()?.isOCEnabled &&
+				nonExpressPaymentMethods.length === 0
+			) {
+				return false;
+			}
+
 			return isAvailableInTheCountry && !! api.getStripe();
 		},
 		// see .wc-block-checkout__payment-method styles in blocks/style.scss

client/components/payment-method-required-for-oc-pill/__tests__/index.test.js

@@ -33,7 +33,6 @@ const PaymentMethodCheckbox = ( {
 	label,
 	isAllowingManualCapture,
 	disabled,
-	disabledButChecked,
 } ) => {
 	const [ isManualCaptureEnabled ] = useManualCapture();
 	const [ isConfirmationModalOpen, setIsConfirmationModalOpen ] = useState(
@@ -45,12 +44,10 @@ const PaymentMethodCheckbox = ( {
 	] = useEnabledPaymentMethodIds();
 	const [ , setIsStripeEnabled ] = useIsStripeEnabled();
 	const { isUpeEnabled } = useContext( UpeToggleContext );
-	const checked =
-		! disabled &&
-		( disabledButChecked || enabledPaymentMethods.includes( id ) );
+	const checked = ! disabled && enabledPaymentMethods.includes( id );
 
 	const handleCheckboxChange = ( hasBeenChecked ) => {
-		if ( disabled || disabledButChecked ) {
+		if ( disabled ) {
 			return;
 		}
 		if ( ! hasBeenChecked ) {
@@ -113,7 +110,7 @@ const PaymentMethodCheckbox = ( {
 					label={ <VisuallyHidden>{ label }</VisuallyHidden> }
 					onChange={ handleCheckboxChange }
 					checked={ checked }
-					disabled={ disabled || disabledButChecked }
+					disabled={ disabled }
 				/>
 			) }
 			{ isConfirmationModalOpen && (

client/components/payment-method-required-for-oc-pill/index.js

@@ -5,7 +5,6 @@ import RecurringPaymentIcon from '../../components/recurring-payment-icon';
 import PaymentMethodCapabilityStatusPill from 'wcstripe/components/payment-method-capability-status-pill';
 import PaymentMethodDeprecationPill from 'wcstripe/components/payment-method-deprecation-pill';
 import PaymentMethodUnavailableDueConflictPill from 'wcstripe/components/payment-method-unavailable-due-conflict-pill';
-import PaymentMethodRequiredForOCPill from 'wcstripe/components/payment-method-required-for-oc-pill';
 
 const Wrapper = styled.div`
 	display: flex;
@@ -75,10 +74,6 @@ const PaymentMethodDescription = ( {
 								id={ id }
 								label={ label }
 							/>
-							<PaymentMethodRequiredForOCPill
-								id={ id }
-								label={ label }
-							/>
 						</>
 					) }
 				</LabelWrapper>

client/settings/general-settings-section/payment-method-checkbox.js

@@ -7,7 +7,7 @@ import interpolateComponents from 'interpolate-components';
 import PaymentMethodsMap from '../../payment-methods-map';
 import PaymentMethodDescription from './payment-method-description';
 import PaymentMethodCheckbox from './payment-method-checkbox';
-import { useIsOCEnabled, useManualCapture } from 'wcstripe/data';
+import { useManualCapture } from 'wcstripe/data';
 import {
 	PAYMENT_METHOD_AFFIRM,
 	PAYMENT_METHOD_AFTERPAY_CLEARPAY,
@@ -105,7 +105,6 @@ const StyledFees = styled( PaymentMethodFeesPill )`
 `;
 
 const PaymentMethod = ( { method, data } ) => {
-	const [ isOCEnabled ] = useIsOCEnabled();
 	const [ isManualCaptureEnabled ] = useManualCapture();
 	const paymentMethodCurrencies = usePaymentMethodCurrencies( method );
 
@@ -138,8 +137,6 @@ const PaymentMethod = ( { method, data } ) => {
 			// eslint-disable-next-line camelcase
 			wc_stripe_settings_params.has_klarna_gateway_plugin );
 
-	const isDisabledButChecked = PAYMENT_METHOD_CARD === method && isOCEnabled;
-
 	return (
 		<div key={ method }>
 			<ListElement
@@ -154,7 +151,6 @@ const PaymentMethod = ( { method, data } ) => {
 					label={ label }
 					isAllowingManualCapture={ isAllowingManualCapture }
 					disabled={ deprecated || isDisabled }
-					disabledButChecked={ isDisabledButChecked }
 				/>
 				<PaymentMethodWrapper>
 					<PaymentMethodDescription

client/settings/general-settings-section/payment-method-description.js

@@ -132,6 +132,16 @@ export const EXPRESS_PAYMENT_METHOD_SETTING_APPLE_PAY = 'applePay';
 export const EXPRESS_PAYMENT_METHOD_SETTING_GOOGLE_PAY = 'googlePay';
 export const EXPRESS_PAYMENT_METHOD_SETTING_LINK = 'link';
 
+/**
+ * List of express payment methods
+ */
+export const EXPRESS_PAYMENT_METHODS = [
+	EXPRESS_PAYMENT_METHOD_SETTING_AMAZON_PAY,
+	EXPRESS_PAYMENT_METHOD_SETTING_APPLE_PAY,
+	EXPRESS_PAYMENT_METHOD_SETTING_GOOGLE_PAY,
+	EXPRESS_PAYMENT_METHOD_SETTING_LINK,
+];
+
 /**
  * List of payment methods that are not recurring
  */

client/settings/general-settings-section/payment-method.js

@@ -865,8 +865,7 @@ public function initialize_status_page() {
 
 	/**
 	 * Toggle payment methods that should be enabled/disabled, e.g. unreleased,
-	 * BNPLs when other official plugins are active,
-	 * cards when the Optimized Checkout is enabled, etc.
+	 * BNPLs when other official plugins are active, etc.
 	 *
 	 * @return void
 	 */
@@ -877,7 +876,6 @@ public function maybe_toggle_payment_methods() {
 		}
 
 		$payment_method_ids_to_disable = [];
-		$payment_method_ids_to_enable  = [];
 		$enabled_payment_methods       = $gateway->get_upe_enabled_payment_method_ids();
 
 		// Check for BNPLs that should be deactivated.
@@ -892,22 +890,10 @@ public function maybe_toggle_payment_methods() {
 			$this->maybe_deactivate_amazon_pay( $enabled_payment_methods )
 		);
 
-		// Check if cards should be activated.
-		// TODO: Remove this once card is not a requirement for the Optimized Checkout.
-		if ( $gateway->is_oc_enabled()
-			&& ! in_array( WC_Stripe_Payment_Methods::CARD, $enabled_payment_methods, true ) ) {
-			$payment_method_ids_to_enable[] = WC_Stripe_Payment_Methods::CARD;
-		}
-
-		if ( [] === $payment_method_ids_to_disable && [] === $payment_method_ids_to_enable ) {
+		if ( [] === $payment_method_ids_to_disable ) {
 			return;
 		}
 
-		$enabled_payment_methods = array_merge(
-			$enabled_payment_methods,
-			$payment_method_ids_to_enable
-		);
-
 		$gateway->update_enabled_payment_methods(
 			array_diff( $enabled_payment_methods, $payment_method_ids_to_disable )
 		);