Deprecate Sofort

changelog/dev-sofort-deprecation

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Deprecate Sofort for any merchants who have not enabled it. Warn existing merchants about future deprecation.

client/components/payment-methods-list/payment-method.scss

@@ -1,7 +1,20 @@
-.payment-method {
+.payment-method__list-item {
 	display: flex;
+	flex-direction: column;
 	margin: 0;
 	padding: 24px;
+
+	&:not( :last-child ) {
+		box-shadow: inset 0 -1px 0 #e8eaeb;
+	}
+
+	& .sofort__notice {
+		margin-top: 20px;
+	}
+}
+
+.payment-method {
+	display: flex;
 	background: #fff;
 	justify-content: space-between;
 	align-items: center;
@@ -10,10 +23,6 @@
 		flex-wrap: nowrap;
 	}
 
-	&:not( :last-child ) {
-		box-shadow: inset 0 -1px 0 #e8eaeb;
-	}
-
 	&__text {
 		flex: 1 1 100%;
 		order: 1;

client/components/payment-methods-list/payment-method.tsx

@@ -24,6 +24,7 @@ import LoadableCheckboxControl from '../loadable-checkbox';
 import { getDocumentationUrlForDisabledPaymentMethod } from '../payment-method-disabled-tooltip';
 import Pill from '../pill';
 import './payment-method.scss';
+import { Notice } from '@wordpress/components';
 
 interface PaymentMethodProps {
 	id: string;
@@ -127,6 +128,8 @@ const PaymentMethod = ( {
 		upeCapabilityStatuses.PENDING_VERIFICATION,
 	].includes( status );
 
+	const shouldDisplayNotice = id === 'sofort';
+
 	const needsOverlay =
 		( isManualCaptureEnabled && ! isAllowingManualCapture ) ||
 		isSetupRequired ||
@@ -209,83 +212,107 @@ const PaymentMethod = ( {
 	return (
 		<li
 			className={ classNames(
-				'payment-method',
+				'payment-method__list-item',
 				{ 'has-icon-border': id !== 'card' },
 				{ overlay: needsOverlay },
 				className
 			) }
 		>
-			<div className="payment-method__checkbox">
-				<LoadableCheckboxControl
-					label={ label }
-					checked={ checked }
-					disabled={ disabled || locked }
-					onChange={ handleChange }
-					delayMsOnCheck={ 1500 }
-					delayMsOnUncheck={ 0 }
-					hideLabel
-					isAllowingManualCapture={ isAllowingManualCapture }
-					isSetupRequired={ isSetupRequired }
-					setupTooltip={ getTooltipContent( id ) as any }
-					needsAttention={ needsAttention }
-				/>
-			</div>
-			<div className="payment-method__text-container">
-				<div className="payment-method__icon">
-					<Icon />
-				</div>
-				<div className="payment-method__label payment-method__label-mobile">
-					<PaymentMethodLabel
+			<div className="payment-method">
+				<div className="payment-method__checkbox">
+					<LoadableCheckboxControl
 						label={ label }
-						required={ required }
-						status={ status }
-						disabled={ disabled }
+						checked={ checked }
+						disabled={ disabled || locked }
+						onChange={ handleChange }
+						delayMsOnCheck={ 1500 }
+						delayMsOnUncheck={ 0 }
+						hideLabel
+						isAllowingManualCapture={ isAllowingManualCapture }
+						isSetupRequired={ isSetupRequired }
+						setupTooltip={ getTooltipContent( id ) as any }
+						needsAttention={ needsAttention }
 					/>
 				</div>
-				<div className="payment-method__text">
-					<div className="payment-method__label-container">
-						<div className="payment-method__label payment-method__label-desktop">
-							<PaymentMethodLabel
-								label={ label }
-								required={ required }
-								status={ status }
-								disabled={ disabled }
-							/>
-						</div>
-						<div className="payment-method__description">
-							{ description }
-						</div>
+				<div className="payment-method__text-container">
+					<div className="payment-method__icon">
+						<Icon />
+					</div>
+					<div className="payment-method__label payment-method__label-mobile">
+						<PaymentMethodLabel
+							label={ label }
+							required={ required }
+							status={ status }
+							disabled={ disabled }
+						/>
 					</div>
-					{ accountFees && accountFees[ id ] && (
-						<div className="payment-method__fees">
-							<HoverTooltip
-								maxWidth={ '300px' }
-								content={ formatMethodFeesTooltip(
-									accountFees[ id ]
-								) }
-							>
-								<Pill
-									aria-label={ sprintf(
-										__(
-											'Base transaction fees: %s',
-											'woocommerce-payments'
-										),
-										formatMethodFeesDescription(
-											accountFees[ id ]
-										)
+					<div className="payment-method__text">
+						<div className="payment-method__label-container">
+							<div className="payment-method__label payment-method__label-desktop">
+								<PaymentMethodLabel
+									label={ label }
+									required={ required }
+									status={ status }
+									disabled={ disabled }
+								/>
+							</div>
+							<div className="payment-method__description">
+								{ description }
+							</div>
+						</div>
+						{ accountFees && accountFees[ id ] && (
+							<div className="payment-method__fees">
+								<HoverTooltip
+									maxWidth={ '300px' }
+									content={ formatMethodFeesTooltip(
+										accountFees[ id ]
 									) }
 								>
-									<span>
-										{ formatMethodFeesDescription(
-											accountFees[ id ]
+									<Pill
+										aria-label={ sprintf(
+											__(
+												'Base transaction fees: %s',
+												'woocommerce-payments'
+											),
+											formatMethodFeesDescription(
+												accountFees[ id ]
+											)
 										) }
-									</span>
-								</Pill>
-							</HoverTooltip>
-						</div>
-					) }
+									>
+										<span>
+											{ formatMethodFeesDescription(
+												accountFees[ id ]
+											) }
+										</span>
+									</Pill>
+								</HoverTooltip>
+							</div>
+						) }
+					</div>
 				</div>
 			</div>
+			{ shouldDisplayNotice && (
+				<Notice
+					status="warning"
+					isDismissible={ false }
+					className="sofort__notice"
+				>
+					<span>
+						{ __(
+							'Support for Sofort is ending soon. ',
+							'woocommerce-payments'
+						) }
+						<a
+							// eslint-disable-next-line max-len
+							href="https://woocommerce.com/document/woopayments/payment-methods/additional-payment-methods/#sofort-deprecation"
+							target="_blank"
+							rel="external noreferrer noopener"
+						>
+							{ __( 'Learn more', 'woocommerce-payments' ) }
+						</a>
+					</span>
+				</Notice>
+			) }
 		</li>
 	);
 };

client/connect-account-page/payment-methods.tsx

@@ -12,7 +12,6 @@ import DinersClub from 'assets/images/cards/diners.svg?asset';
 import GooglePay from 'assets/images/cards/google-pay.svg?asset';
 import JCB from 'assets/images/cards/jcb.svg?asset';
 import MasterCard from 'assets/images/cards/mastercard.svg?asset';
-import Sofort from 'assets/images/payment-methods/sofort.svg?asset';
 import UnionPay from 'assets/images/cards/unionpay.svg?asset';
 import Visa from 'assets/images/cards/visa.svg?asset';
 import WooPay from 'assets/images/payment-methods/woopay.svg?asset';
@@ -37,7 +36,6 @@ const PaymentMethods: React.FC = () => {
 				<img src={ DinersClub } alt="DinersClub" />
 				<img src={ UnionPay } alt="UnionPay" />
 				<img src={ JCB } alt="JCB" />
-				<img src={ Sofort } alt="Sofort" />
 				<img src={ Affirm } alt="Affirm" />
 				<img src={ AfterPay } alt="AfterPay" />
 				<span>& more.</span>

client/payment-methods/delete-modal.tsx

@@ -4,7 +4,7 @@
  */
 import React from 'react';
 import { __, sprintf } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import { Button, Notice } from '@wordpress/components';
 import interpolateComponents from '@automattic/interpolate-components';
 
 /**
@@ -20,6 +20,8 @@ const ConfirmPaymentMethodDeleteModal: React.FunctionComponent< {
 	onConfirm: () => void;
 	onCancel: () => void;
 } > = ( { id, label, icon: Icon, onConfirm, onCancel } ): JSX.Element => {
+	const shouldDisplayNotice = id === 'sofort';
+
 	return (
 		<ConfirmationModal
 			title={ sprintf(
@@ -65,7 +67,7 @@ const ConfirmPaymentMethodDeleteModal: React.FunctionComponent< {
 			<p>
 				{ interpolateComponents( {
 					mixedString: __(
-						'You can add it again at any time in {{wooCommercePaymentsLink /}}',
+						'You can add it again at any time in {{wooCommercePaymentsLink /}}.',
 						'woocommerce-payments'
 					),
 					components: {
@@ -77,6 +79,28 @@ const ConfirmPaymentMethodDeleteModal: React.FunctionComponent< {
 					},
 				} ) }
 			</p>
+			{ shouldDisplayNotice && (
+				<Notice
+					status="warning"
+					isDismissible={ false }
+					className="sofort__notice"
+				>
+					<span>
+						{ __(
+							'As of October 20th 2023, Sofort is no longer supported for merchants who are not already using it. This means that if you disable Sofort, you will not be able to re-enable it later. ',
+							'woocommerce-payments'
+						) }
+						<a
+							// eslint-disable-next-line max-len
+							href="https://woocommerce.com/document/woopayments/payment-methods/additional-payment-methods/#sofort-deprecation"
+							target="_blank"
+							rel="external noreferrer noopener"
+						>
+							{ __( 'Learn more', 'woocommerce-payments' ) }
+						</a>
+					</span>
+				</Notice>
+			) }
 		</ConfirmationModal>
 	);
 };

includes/admin/class-wc-rest-payments-settings-controller.php

@@ -434,8 +434,10 @@ public function validate_business_support_address( array $value, WP_REST_Request
 	 * @return WP_REST_Response
 	 */
 	public function get_settings(): WP_REST_Response {
-		$wcpay_form_fields             = $this->wcpay_gateway->get_form_fields();
+		$wcpay_form_fields = $this->wcpay_gateway->get_form_fields();
+
 		$available_upe_payment_methods = $this->wcpay_gateway->get_upe_available_payment_methods();
+
 		/**
 		 * It might be possible that enabled payment methods settings have an invalid state. As an example,
 		 * if an account is switched to a new country and earlier country had PM's that are no longer valid; or if the PM is not available anymore.
@@ -448,6 +450,8 @@ public function get_settings(): WP_REST_Response {
 			)
 		);
 
+		$filtered_payment_methods = $this->possibly_filter_available_payment_methods( $available_upe_payment_methods, $enabled_payment_methods );
+
 		// Gather the status of the Stripe Billing migration for use on the settings page.
 		if ( class_exists( 'WC_Subscriptions' ) ) {
 			$stripe_billing_migrated_count = $this->wcpay_gateway->get_subscription_migrated_count();
@@ -465,7 +469,7 @@ public function get_settings(): WP_REST_Response {
 		return new WP_REST_Response(
 			[
 				'enabled_payment_method_ids'          => $enabled_payment_methods,
-				'available_payment_method_ids'        => $available_upe_payment_methods,
+				'available_payment_method_ids'        => $filtered_payment_methods,
 				'payment_method_statuses'             => $this->wcpay_gateway->get_upe_enabled_payment_method_statuses(),
 				'is_wcpay_enabled'                    => $this->wcpay_gateway->is_enabled(),
 				'is_manual_capture_enabled'           => 'yes' === $this->wcpay_gateway->get_option( 'manual_capture' ),
@@ -1048,4 +1052,31 @@ private function get_avs_check_enabled( array $ruleset_config ) {
 
 		return $avs_check_enabled;
 	}
+
+	/**
+	 * Because we still need to support payments made using Sofort until it is sunsetted at the end of the year,
+	 * this is the most sensible place to prevent it getting shown on the frontend settings for new merchants.
+	 * We will filter it from the array, but only if the user has not enabled it. If it is enabled, we show it with a warning (handled in the JS).
+	 *
+	 * @TODO: Remove this logic and tidy up once Sofort is officially deprecated for all users.
+	 *
+	 * @param array $available_payment_methods The available payment methods.
+	 * @param array $enabled_payment_methods   The enabled payment methods.
+	 *
+	 * @return array The filtered available payment methods.
+	 */
+	private function possibly_filter_available_payment_methods( array $available_payment_methods, array $enabled_payment_methods ): array {
+		if ( ! in_array( 'sofort', array_values( $enabled_payment_methods ), true ) ) {
+			return array_values(
+				array_filter(
+					$available_payment_methods,
+					function ( $payment_method ) {
+						return 'sofort' !== $payment_method;
+					}
+				)
+			);
+		}
+
+		return $available_payment_methods;
+	}
 }