Show unsupported payment methods at the end of the payment method list

changelog.txt

@@ -13,6 +13,7 @@
 * Tweak - Small improvements to e2e tests
 * Fix - Prevent the PMC migration to run when the plugin is not connected to Stripe
 * Fix - Fixes a fatal error in the OC inbox note when the new checkout is disabled
+* Update - Show all available payment methods before unavailable payment methods
 
 = 9.8.0 - 2025-08-11 =
 * Add - Adds the current setting value for the Optimized Checkout to the Stripe System Status Report data

client/components/payment-method-missing-currency-pill/__tests__/index.test.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { screen, render } from '@testing-library/react';
 import PaymentMethodMissingCurrencyPill from '..';
 import { usePaymentMethodCurrencies } from 'utils/use-payment-method-currencies';
+import usePaymentMethodUnavailableReason from 'utils/use-payment-method-unavailable-reason';
+import { PAYMENT_METHOD_UNAVAILABLE_REASONS } from 'wcstripe/stripe-utils/constants';
 
 jest.mock( '../../../payment-methods-map', () => ( {
 	card: { currencies: [] },
@@ -12,34 +14,33 @@ jest.mock( 'utils/use-payment-method-currencies', () => ( {
 	usePaymentMethodCurrencies: jest.fn(),
 } ) );
 
+jest.mock( 'utils/use-payment-method-unavailable-reason' );
+
 describe( 'PaymentMethodMissingCurrencyPill', () => {
 	beforeEach( () => {
 		global.wcSettings = { currency: { code: 'USD' } };
 		usePaymentMethodCurrencies.mockReturnValue( [ 'EUR' ] );
 	} );
 
-	it( 'should render the "Requires currency" text', () => {
+	it( 'should render the "Requires currency" text when currency is not supported', () => {
+		usePaymentMethodUnavailableReason.mockReturnValue(
+			PAYMENT_METHOD_UNAVAILABLE_REASONS.UNSUPPORTED_CURRENCY
+		);
+
 		render(
 			<PaymentMethodMissingCurrencyPill id="giropay" label="giropay" />
 		);
 
 		expect( screen.queryByText( 'Requires currency' ) ).toBeInTheDocument();
 	} );
 
-	it( 'should not render when currency matches', () => {
-		global.wcSettings = { currency: { code: 'EUR' } };
+	it( 'should not render when currency is supported', () => {
+		usePaymentMethodUnavailableReason.mockReturnValue( null );
+
 		const { container } = render(
 			<PaymentMethodMissingCurrencyPill id="giropay" label="giropay" />
 		);
 
 		expect( container.firstChild ).toBeNull();
 	} );
-
-	it( 'should render when currency differs', () => {
-		render(
-			<PaymentMethodMissingCurrencyPill id="giropay" label="giropay" />
-		);
-
-		expect( screen.queryByText( 'Requires currency' ) ).toBeInTheDocument();
-	} );
 } );

client/components/payment-method-missing-currency-pill/index.js

@@ -5,7 +5,8 @@ import interpolateComponents from 'interpolate-components';
 import { Icon, info } from '@wordpress/icons';
 import Popover from 'wcstripe/components/popover';
 import { usePaymentMethodCurrencies } from 'utils/use-payment-method-currencies';
-import { PAYMENT_METHOD_CARD } from 'wcstripe/stripe-utils/constants';
+import usePaymentMethodUnavailableReason from 'utils/use-payment-method-unavailable-reason';
+import { PAYMENT_METHOD_UNAVAILABLE_REASONS } from 'wcstripe/stripe-utils/constants';
 
 const StyledPill = styled.span`
 	display: inline-flex;
@@ -47,47 +48,47 @@ const IconComponent = ( { children, ...props } ) => (
 
 const PaymentMethodMissingCurrencyPill = ( { id, label } ) => {
 	const paymentMethodCurrencies = usePaymentMethodCurrencies( id );
-	const storeCurrency = window?.wcSettings?.currency?.code;
+	const unavailableReason = usePaymentMethodUnavailableReason( id );
 
 	if (
-		id !== PAYMENT_METHOD_CARD &&
-		! paymentMethodCurrencies.includes( storeCurrency )
+		unavailableReason !==
+		PAYMENT_METHOD_UNAVAILABLE_REASONS.UNSUPPORTED_CURRENCY
 	) {
-		return (
-			<StyledPill>
-				{ __( 'Requires currency', 'woocommerce-gateway-stripe' ) }
-				<Popover
-					BaseComponent={ IconComponent }
-					content={ interpolateComponents( {
-						mixedString: sprintf(
-							/* translators: $1: a payment method name. %2: Currency(ies). */
-							__(
-								'%1$s requires store currency to be set to %2$s. {{currencySettingsLink}}Set currency{{/currencySettingsLink}}',
-								'woocommerce-gateway-stripe'
-							),
-							label,
-							paymentMethodCurrencies.join( ', ' )
-						),
-						components: {
-							currencySettingsLink: (
-								<StyledLink
-									href="/wp-admin/admin.php?page=wc-settings&tab=general"
-									target="_blank"
-									rel="noreferrer"
-									onClick={ ( ev ) => {
-										// Stop propagation is necessary so it doesn't trigger the tooltip click event.
-										ev.stopPropagation();
-									} }
-								/>
-							),
-						},
-					} ) }
-				/>
-			</StyledPill>
-		);
+		return null;
 	}
 
-	return null;
+	return (
+		<StyledPill>
+			{ __( 'Requires currency', 'woocommerce-gateway-stripe' ) }
+			<Popover
+				BaseComponent={ IconComponent }
+				content={ interpolateComponents( {
+					mixedString: sprintf(
+						/* translators: $1: a payment method name. %2: Currency(ies). */
+						__(
+							'%1$s requires store currency to be set to %2$s. {{currencySettingsLink}}Set currency{{/currencySettingsLink}}',
+							'woocommerce-gateway-stripe'
+						),
+						label,
+						paymentMethodCurrencies.join( ', ' )
+					),
+					components: {
+						currencySettingsLink: (
+							<StyledLink
+								href="/wp-admin/admin.php?page=wc-settings&tab=general"
+								target="_blank"
+								rel="noreferrer"
+								onClick={ ( ev ) => {
+									// Stop propagation is necessary so it doesn't trigger the tooltip click event.
+									ev.stopPropagation();
+								} }
+							/>
+						),
+					},
+				} ) }
+			/>
+		</StyledPill>
+	);
 };
 
 export default PaymentMethodMissingCurrencyPill;

client/components/payment-method-unavailable-due-conflict-pill/index.js

@@ -1,14 +1,11 @@
-/* global wc_stripe_settings_params */
 import { __, sprintf } from '@wordpress/i18n';
 import React from 'react';
 import styled from '@emotion/styled';
 import interpolateComponents from 'interpolate-components';
 import { Icon, info } from '@wordpress/icons';
+import usePaymentMethodUnavailableReason from 'utils/use-payment-method-unavailable-reason';
 import Popover from 'wcstripe/components/popover';
-import {
-	PAYMENT_METHOD_AFFIRM,
-	PAYMENT_METHOD_KLARNA,
-} from 'wcstripe/stripe-utils/constants';
+import { PAYMENT_METHOD_UNAVAILABLE_REASONS } from 'wcstripe/stripe-utils/constants';
 
 const StyledPill = styled.span`
 	display: inline-flex;
@@ -49,48 +46,45 @@ const IconComponent = ( { children, ...props } ) => (
 );
 
 const PaymentMethodUnavailableDueConflictPill = ( { id, label } ) => {
+	const unavailableReason = usePaymentMethodUnavailableReason( id );
+
 	if (
-		( id === PAYMENT_METHOD_AFFIRM &&
-			// eslint-disable-next-line camelcase
-			wc_stripe_settings_params.has_affirm_gateway_plugin ) ||
-		( id === PAYMENT_METHOD_KLARNA &&
-			// eslint-disable-next-line camelcase
-			wc_stripe_settings_params.has_klarna_gateway_plugin )
+		unavailableReason !==
+		PAYMENT_METHOD_UNAVAILABLE_REASONS.OFFICIAL_PLUGIN_CONFLICT
 	) {
-		return (
-			<StyledPill>
-				{ __( 'Has plugin conflict', 'woocommerce-gateway-stripe' ) }
-				<Popover
-					BaseComponent={ IconComponent }
-					content={ interpolateComponents( {
-						mixedString: sprintf(
-							/* translators: $1: a payment method name */
-							__(
-								'%1$s is unavailable due to another official plugin being active.',
-								'woocommerce-gateway-stripe'
-							),
-							label
-						),
-						components: {
-							currencySettingsLink: (
-								<StyledLink
-									href="/wp-admin/admin.php?page=wc-settings&tab=general"
-									target="_blank"
-									rel="noreferrer"
-									onClick={ ( ev ) => {
-										// Stop propagation is necessary so it doesn't trigger the tooltip click event.
-										ev.stopPropagation();
-									} }
-								/>
-							),
-						},
-					} ) }
-				/>
-			</StyledPill>
-		);
+		return null;
 	}
-
-	return null;
+	return (
+		<StyledPill>
+			{ __( 'Has plugin conflict', 'woocommerce-gateway-stripe' ) }
+			<Popover
+				BaseComponent={ IconComponent }
+				content={ interpolateComponents( {
+					mixedString: sprintf(
+						/* translators: $1: a payment method name */
+						__(
+							'%1$s is unavailable due to another official plugin being active.',
+							'woocommerce-gateway-stripe'
+						),
+						label
+					),
+					components: {
+						currencySettingsLink: (
+							<StyledLink
+								href="/wp-admin/admin.php?page=wc-settings&tab=general"
+								target="_blank"
+								rel="noreferrer"
+								onClick={ ( ev ) => {
+									// Stop propagation is necessary so it doesn't trigger the tooltip click event.
+									ev.stopPropagation();
+								} }
+							/>
+						),
+					},
+				} ) }
+			/>
+		</StyledPill>
+	);
 };
 
 export default PaymentMethodUnavailableDueConflictPill;