Show recurring icon in payment methods

changelog.txt

@@ -1,6 +1,7 @@
 *** Changelog ***
 
 = 9.6.0 - xxxx-xx-xx =
+* Add - Show an icon beside the payment methods that support automatic recurring payments.
 * Fix - Fixes the payment method title when using the classic checkout with the Optimized Checkout enabled.
 * Update - Remove BACS from the unsupported 'change payment method for subscription' page.
 * Fix - Fix payment method title display when new payment settings experience is enabled

client/components/recurring-payment-icon/index.js

@@ -0,0 +1,30 @@
+import { __ } from '@wordpress/i18n';
+import React from 'react';
+import styled from '@emotion/styled';
+import icon from './icon.svg';
+import Tooltip from 'wcstripe/components/tooltip';
+
+const Icon = styled.img`
+	height: 14px;
+	width: 14px;
+`;
+
+const StyledTooltip = styled( Tooltip )`
+	border-radius: 4px;
+	padding: 5px 10px;
+`;
+
+const RecurringPaymentIcon = () => {
+	return (
+		<StyledTooltip
+			content={ __(
+				'Supports recurring payments',
+				'woocommerce-gateway-stripe'
+			) }
+		>
+			<Icon src={ icon } alt="" />
+		</StyledTooltip>
+	);
+};
+
+export default RecurringPaymentIcon;

client/payment-methods-map.js

@@ -33,6 +33,8 @@ const isBacsEnabled = window.wc_stripe_settings_params?.is_bacs_enabled === '1';
 const isBecsDebitEnabled =
 	window.wc_stripe_settings_params?.is_becs_debit_enabled === '1';
 const isBlikEnabled = window.wc_stripe_settings_params?.is_blik_enabled === '1';
+const isSepaTokensEnabled =
+	window.wc_stripe_settings_params?.is_sepa_tokens_enabled === '1';
 
 const paymentMethodsMap = {
 	card: {
@@ -45,6 +47,7 @@ const paymentMethodsMap = {
 		Icon: icons.card,
 		currencies: [],
 		allows_manual_capture: true,
+		supportsRecurring: true,
 	},
 	giropay: {
 		id: PAYMENT_METHOD_GIROPAY,
@@ -122,6 +125,7 @@ const paymentMethodsMap = {
 		),
 		Icon: icons.sepa_debit,
 		currencies: [ 'EUR' ],
+		supportsRecurring: true,
 	},
 	sepa: {
 		id: 'sepa',
@@ -132,6 +136,7 @@ const paymentMethodsMap = {
 		),
 		Icon: icons.sepa_debit,
 		currencies: [ 'EUR' ],
+		supportsRecurring: true,
 	},
 	sofort: {
 		id: PAYMENT_METHOD_SOFORT,
@@ -142,6 +147,7 @@ const paymentMethodsMap = {
 		),
 		Icon: icons.sofort,
 		currencies: [ 'EUR' ],
+		supportsRecurring: true,
 	},
 	eps: {
 		id: PAYMENT_METHOD_EPS,
@@ -162,6 +168,7 @@ const paymentMethodsMap = {
 		),
 		Icon: icons.bancontact,
 		currencies: [ 'EUR' ],
+		supportsRecurring: isSepaTokensEnabled,
 	},
 	ideal: {
 		id: PAYMENT_METHOD_IDEAL,
@@ -172,6 +179,7 @@ const paymentMethodsMap = {
 		),
 		Icon: icons.ideal,
 		currencies: [ 'EUR' ],
+		supportsRecurring: isSepaTokensEnabled,
 	},
 	p24: {
 		id: PAYMENT_METHOD_P24,
@@ -268,6 +276,7 @@ const paymentMethodsMap = {
 		Icon: icons.cashapp,
 		currencies: [ 'USD' ],
 		capability: 'cashapp_payments',
+		supportsRecurring: true,
 	},
 };
 
@@ -282,6 +291,7 @@ if ( isAchEnabled ) {
 		),
 		Icon: icons.us_bank_account,
 		currencies: [ 'USD' ],
+		supportsRecurring: true,
 	};
 }
 
@@ -296,6 +306,7 @@ if ( isAcssEnabled ) {
 		),
 		Icon: icons.acss_debit,
 		currencies: [ 'CAD' ],
+		supportsRecurring: true,
 	};
 }
 
@@ -310,6 +321,7 @@ if ( isBacsEnabled ) {
 		),
 		Icon: icons.bacs_debit,
 		currencies: [ 'GBP' ],
+		supportsRecurring: true,
 	};
 }
 
@@ -324,6 +336,7 @@ if ( isBecsDebitEnabled ) {
 		),
 		Icon: icons.au_becs_debit,
 		currencies: [ 'AUD' ],
+		supportsRecurring: true,
 	};
 }
 

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import PaymentMethodMissingCurrencyPill from '../../components/payment-method-missing-currency-pill';
+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';
 
@@ -45,6 +46,7 @@ const PaymentMethodDescription = ( {
 	description,
 	id,
 	deprecated,
+	supportsRecurring,
 	...restProps
 } ) => {
 	return (
@@ -55,6 +57,7 @@ const PaymentMethodDescription = ( {
 			<div>
 				<LabelWrapper>
 					<Label>{ label }</Label>
+					{ supportsRecurring && <RecurringPaymentIcon /> }
 					{ deprecated && <PaymentMethodDeprecationPill /> }
 					{ ! deprecated && (
 						<>

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

@@ -119,8 +119,12 @@ const PaymentMethod = ( {
 	const [ isManualCaptureEnabled ] = useManualCapture();
 	const paymentMethodCurrencies = usePaymentMethodCurrencies( method );
 
-	const { Icon, label, allows_manual_capture: isAllowingManualCapture } =
-		PaymentMethodsMap[ method ] || {};
+	const {
+		Icon,
+		label,
+		allows_manual_capture: isAllowingManualCapture,
+		supportsRecurring,
+	} = PaymentMethodsMap[ method ] || {};
 
 	// Skip if there are no mapped fields for the payment method.
 	if ( ! Icon || ! label ) {
@@ -178,6 +182,7 @@ const PaymentMethod = ( {
 						) }
 						label={ label }
 						deprecated={ deprecated }
+						supportsRecurring={ supportsRecurring }
 					/>
 					<StyledFees id={ method } />
 				</PaymentMethodWrapper>

client/settings/general-settings-section/payment-methods-list.js

@@ -219,6 +219,7 @@ const GeneralSettingsSection = ( {
 					Icon,
 					label,
 					allows_manual_capture: isAllowingManualCapture,
+					supportsRecurring,
 				} = PaymentMethodsMap[ method ] || {};
 
 				// Skip if there are no mapped fields for the payment method.
@@ -251,6 +252,7 @@ const GeneralSettingsSection = ( {
 									data.account?.default_currency
 								) }
 								label={ label }
+								supportsRecurring={ supportsRecurring }
 							/>
 							<StyledFees id={ method } />
 						</PaymentMethodWrapper>

includes/admin/class-wc-stripe-settings-controller.php

@@ -250,6 +250,7 @@ public function admin_scripts( $hook_suffix ) {
 			'is_amazon_pay_available'   => WC_Stripe_Feature_Flags::is_amazon_pay_available(),
 			'is_oc_available'           => WC_Stripe_Feature_Flags::is_oc_available(),
 			'oauth_nonce'               => wp_create_nonce( 'wc_stripe_get_oauth_urls' ),
+			'is_sepa_tokens_enabled'    => 'yes' === $this->gateway->get_option( 'sepa_tokens_for_other_methods', 'no' ),
 		];
 		wp_localize_script(
 			'woocommerce_stripe_admin',

readme.txt

@@ -112,12 +112,12 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
 
 = 9.6.0 - xxxx-xx-xx =
 
+* Add - Show an icon beside the payment methods that support automatic recurring payments.
 * Fix - Fixes the payment method title when using the classic checkout with the Optimized Checkout enabled.
 * Update - Remove BACS from the unsupported 'change payment method for subscription' page.
 * Fix - Fix payment method title display when new payment settings experience is enabled
 * Fix - Prevent styles from non-checkout pages affecting the appearance of Stripe element.
 * Fix - Send correct attribute when setting the default payment method.
 * Dev - Build dynamic WordPress and WooCommerce dependencies for unit tests
 
-
 [See changelog for full details across versions](https://raw.githubusercontent.com/woocommerce/woocommerce-gateway-stripe/trunk/changelog.txt).