add: payment transaction processor images to payment recommendations (#37230)

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,21 @@ 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 }
+											key={ 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 @@ class PaymentGatewaySuggestions extends \WC_REST_Data_Controller {
 					'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,
+				),
 			),
 		);