add: payment transaction processor images to payment recommendations

plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/Item.js

@@ -31,6 +31,7 @@ export const Item = ( { isRecommended, markConfigured, paymentGateway } ) => {
 		settingsUrl: manageUrl,
 		is_local_partner: isLocalPartner,
 		external_link: externalLink,
+		transaction_processors: transactionProcessors,
 	} = paymentGateway;
 
 	const connectSlot = useSlot(
@@ -88,6 +89,20 @@ export const Item = ( { isRecommended, markConfigured, paymentGateway } ) => {
 					<div className="woocommerce-task-payment__content">
 						{ content }
 					</div>
+					{ transactionProcessors && (
+						<div className="woocommerce-task-payment__transaction-processors_images">
+							{ Object.keys( transactionProcessors ).map(
+								( key ) => {
+									return (
+										<img
+											src={ transactionProcessors[ key ] }
+											alt={ key }
+										/>
+									);
+								}
+							) }
+						</div>
+					) }
 				</div>
 				<div className="woocommerce-task-payment__footer">
 					<Action

plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/List.scss

@@ -67,6 +67,18 @@
 			font-size: 12px;
 		}
 	}
+	.woocommerce-task-payment__transaction-processors_images {
+		padding-top: 16px;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		gap: 8px;
+
+		img {
+			height: 24px;
+		}
+	}
+
 	.woocommerce-task-payment__description {
 		flex: 1;
 	}

plugins/woocommerce/changelog/add-payment-recommendations-images

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Added images support for the payment recommendations transaction processors

plugins/woocommerce/src/Admin/API/PaymentGatewaySuggestions.php

@@ -168,6 +168,16 @@ public function get_item_schema() {
 					'context'     => array( 'view', 'edit' ),
 					'readonly'    => true,
 				),
+				'transaction_processors'  => array(
+					'description'         => __( 'Array of transaction processors and their images.', 'woocommerce' ),
+					'type'                => 'object',
+					'addtionalProperties' => array(
+						'type'   => 'string',
+						'format' => 'uri',
+					),
+					'context'             => array( 'view', 'edit' ),
+					'readonly'            => true,
+				),
 			),
 		);
 

plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php

@@ -152,22 +152,30 @@ public static function get_all() {
 				'category_additional' => array(),
 			),
 			array(
-				'id'                  => 'ppcp-gateway',
-				'title'               => __( 'PayPal Payments', 'woocommerce' ),
-				'content'             => __( "Safe and secure payments using credit cards or your customer's PayPal account.", 'woocommerce' ),
-				'image'               => WC_ADMIN_IMAGES_FOLDER_URL . '/paypal.png',
-				'image_72x72'         => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/72x72/paypal.png',
-				'plugins'             => array( 'woocommerce-paypal-payments' ),
-				'is_visible'          => array(
+				'id'                     => 'ppcp-gateway',
+				'title'                  => __( 'PayPal Payments', 'woocommerce' ),
+				'content'                => __( "Safe and secure payments using credit cards or your customer's PayPal account.", 'woocommerce' ),
+				'transaction_processors' => array(
+					'cartesbancaires' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/transaction_processors/cartesbancaires.svg',
+					'bancontact'      => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/transaction_processors/bancontact.svg',
+					'eps'             => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/transaction_processors/eps.svg',
+					'giropay'         => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/transaction_processors/giropay.svg',
+					'ideal'           => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/transaction_processors/ideal.svg',
+					'sofort'          => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/transaction_processors/sofort.svg',
+				),
+				'image'                  => WC_ADMIN_IMAGES_FOLDER_URL . '/paypal.png',
+				'image_72x72'            => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/72x72/paypal.png',
+				'plugins'                => array( 'woocommerce-paypal-payments' ),
+				'is_visible'             => array(
 					(object) array(
 						'type'      => 'base_location_country',
 						'value'     => 'IN',
 						'operation' => '!=',
 					),
 					self::get_rules_for_cbd( false ),
 				),
-				'category_other'      => array( 'US', 'CA', 'AT', 'BE', 'BG', 'HR', 'CH', 'CY', 'CZ', 'DK', 'EE', 'ES', 'FI', 'FR', 'DE', 'GB', 'GR', 'HU', 'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL', 'NO', 'PL', 'PT', 'RO', 'SK', 'SL', 'SE', 'MX', 'BR', 'AR', 'CL', 'CO', 'EC', 'PE', 'UY', 'VE', 'AU', 'NZ', 'HK', 'JP', 'SG', 'CN', 'ID', 'ZA', 'NG', 'GH' ),
-				'category_additional' => array( 'US', 'CA', 'AT', 'BE', 'BG', 'HR', 'CH', 'CY', 'CZ', 'DK', 'EE', 'ES', 'FI', 'FR', 'DE', 'GB', 'GR', 'HU', 'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL', 'NO', 'PL', 'PT', 'RO', 'SK', 'SL', 'SE', 'MX', 'BR', 'AR', 'CL', 'CO', 'EC', 'PE', 'UY', 'VE', 'AU', 'NZ', 'HK', 'JP', 'SG', 'CN', 'ID', 'IN', 'ZA', 'NG', 'GH' ),
+				'category_other'         => array( 'US', 'CA', 'AT', 'BE', 'BG', 'HR', 'CH', 'CY', 'CZ', 'DK', 'EE', 'ES', 'FI', 'FR', 'DE', 'GB', 'GR', 'HU', 'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL', 'NO', 'PL', 'PT', 'RO', 'SK', 'SL', 'SE', 'MX', 'BR', 'AR', 'CL', 'CO', 'EC', 'PE', 'UY', 'VE', 'AU', 'NZ', 'HK', 'JP', 'SG', 'CN', 'ID', 'ZA', 'NG', 'GH' ),
+				'category_additional'    => array( 'US', 'CA', 'AT', 'BE', 'BG', 'HR', 'CH', 'CY', 'CZ', 'DK', 'EE', 'ES', 'FI', 'FR', 'DE', 'GB', 'GR', 'HU', 'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL', 'NO', 'PL', 'PT', 'RO', 'SK', 'SL', 'SE', 'MX', 'BR', 'AR', 'CL', 'CO', 'EC', 'PE', 'UY', 'VE', 'AU', 'NZ', 'HK', 'JP', 'SG', 'CN', 'ID', 'IN', 'ZA', 'NG', 'GH' ),
 			),
 			array(
 				'id'          => 'cod',