Update payment gateway logos

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

@@ -6,14 +6,15 @@
 	overflow: hidden;
 
 	.components-card__media {
-		width: 170px;
+		width: 85px;
 		flex-shrink: 0;
+		align-self: flex-start;
 
 		img,
 		svg,
 		.is-placeholder {
 			margin: auto;
-			max-width: 100px;
+			max-width: 36px;
 			display: block;
 		}
 

plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js

@@ -309,15 +309,15 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => {
 						onToggle={ trackToggle }
 					>
 						{ additionalSection }
-						{ enabledSection }
 						{ offlineSection }
+						{ enabledSection }
 					</Toggle>
 				</>
 			) : (
 				<>
 					{ additionalSection }
-					{ enabledSection }
 					{ offlineSection }
+					{ enabledSection }
 				</>
 			) }
 		</div>

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

@@ -25,7 +25,7 @@ class DefaultPaymentGateways {
 				'id'         => 'payfast',
 				'title'      => __( 'PayFast', 'woocommerce' ),
 				'content'    => __( 'The PayFast extension for WooCommerce enables you to accept payments by Credit Card and EFT via one of South Africa’s most popular payment gateways. No setup fees or monthly subscription costs. Selecting this extension will configure your store to use South African rands as the selected currency.', 'woocommerce' ),
-				'image'      => WC()->plugin_url() . '/assets/images/payfast.png',
+				'image'      => WC()->plugin_url() . '/assets/images/payment_methods/72x72/payfast.png',
 				'plugins'    => array( 'woocommerce-payfast-gateway' ),
 				'is_visible' => array(
 					(object) array(
@@ -40,7 +40,7 @@ class DefaultPaymentGateways {
 				'id'                      => 'stripe',
 				'title'                   => __( ' Stripe', 'woocommerce' ),
 				'content'                 => __( 'Accept debit and credit cards in 135+ currencies, methods such as Alipay, and one-touch checkout with Apple Pay.', 'woocommerce' ),
-				'image'                   => WC()->plugin_url() . '/assets/images/stripe.png',
+				'image'                   => WC()->plugin_url() . '/assets/images/payment_methods/72x72/stripe.png',
 				'plugins'                 => array( 'woocommerce-gateway-stripe' ),
 				'is_visible'              => array(
 					// https://stripe.com/global.
@@ -96,7 +96,7 @@ class DefaultPaymentGateways {
 				'id'         => 'paystack',
 				'title'      => __( 'Paystack', 'woocommerce' ),
 				'content'    => __( 'Paystack helps African merchants accept one-time and recurring payments online with a modern, safe, and secure payment gateway.', 'woocommerce' ),
-				'image'      => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/paystack.png',
+				'image'      => WC()->plugin_url() . '/assets/images/payment_methods/72x72/paystack.png',
 				'plugins'    => array( 'woo-paystack' ),
 				'is_visible' => array(
 					self::get_rules_for_countries( array( 'ZA', 'GH', 'NG' ) ),
@@ -107,7 +107,7 @@ class DefaultPaymentGateways {
 				'id'         => 'kco',
 				'title'      => __( 'Klarna Checkout', 'woocommerce' ),
 				'content'    => __( 'Choose the payment that you want, pay now, pay later or slice it. No credit card numbers, no passwords, no worries.', 'woocommerce' ),
-				'image'      => WC()->plugin_url() . '/assets/images/klarna-black.png',
+				'image'      => WC()->plugin_url() . '/assets/images/payment_methods/72x72/klarna.png',
 				'plugins'    => array( 'klarna-checkout-for-woocommerce' ),
 				'is_visible' => array(
 					self::get_rules_for_countries( array( 'SE', 'FI', 'NO' ) ),
@@ -118,7 +118,7 @@ class DefaultPaymentGateways {
 				'id'         => 'klarna_payments',
 				'title'      => __( 'Klarna Payments', 'woocommerce' ),
 				'content'    => __( 'Choose the payment that you want, pay now, pay later or slice it. No credit card numbers, no passwords, no worries.', 'woocommerce' ),
-				'image'      => WC()->plugin_url() . '/assets/images/klarna-black.png',
+				'image'      => WC()->plugin_url() . '/assets/images/payment_methods/72x72/klarna.png',
 				'plugins'    => array( 'klarna-payments-for-woocommerce' ),
 				'is_visible' => array(
 					self::get_rules_for_countries(
@@ -143,7 +143,7 @@ class DefaultPaymentGateways {
 				'id'         => 'mollie_wc_gateway_banktransfer',
 				'title'      => __( 'Mollie', 'woocommerce' ),
 				'content'    => __( 'Effortless payments by Mollie: Offer global and local payment methods, get onboarded in minutes, and supported in your language.', 'woocommerce' ),
-				'image'      => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/mollie.svg',
+				'image'      => WC()->plugin_url() . '/assets/images/payment_methods/72x72/mollie.png',
 				'plugins'    => array( 'mollie-payments-for-woocommerce' ),
 				'is_visible' => array(
 					self::get_rules_for_countries(
@@ -167,7 +167,7 @@ class DefaultPaymentGateways {
 				'id'                      => 'woo-mercado-pago-custom',
 				'title'                   => __( 'Mercado Pago Checkout Pro & Custom', 'woocommerce' ),
 				'content'                 => __( 'Accept credit and debit cards, offline (cash or bank transfer) and logged-in payments with money in Mercado Pago. Safe and secure payments with the leading payment processor in LATAM.', 'woocommerce' ),
-				'image'                   => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/mercadopago.png',
+				'image'                   => WC()->plugin_url() . '/assets/images/payment_methods/72x72/mercadopago.png',
 				'plugins'                 => array( 'woocommerce-mercadopago' ),
 				'is_visible'              => array(
 					self::get_rules_for_countries( array( 'AR', 'BR', 'CL', 'CO', 'MX', 'PE', 'UY' ) ),
@@ -179,7 +179,7 @@ class DefaultPaymentGateways {
 				'id'         => 'ppcp-gateway',
 				'title'      => __( 'PayPal Payments', 'woocommerce' ),
 				'content'    => __( "Safe and secure payments using credit cards or your customer's PayPal account.", 'woocommerce' ),
-				'image'      => WC()->plugin_url() . '/assets/images/paypal.png',
+				'image'      => WC()->plugin_url() . '/assets/images/payment_methods/72x72/paypal.png',
 				'plugins'    => array( 'woocommerce-paypal-payments' ),
 				'is_visible' => array(
 					(object) array(
@@ -194,7 +194,7 @@ class DefaultPaymentGateways {
 				'id'         => 'cod',
 				'title'      => __( 'Cash on delivery', 'woocommerce' ),
 				'content'    => __( 'Take payments in cash upon delivery.', 'woocommerce' ),
-				'image'      => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/cod.svg',
+				'image'      => WC()->plugin_url() . '/assets/images/payment_methods/72x72/cod.png',
 				'is_visible' => array(
 					self::get_rules_for_cbd( false ),
 				),
@@ -204,7 +204,7 @@ class DefaultPaymentGateways {
 				'id'         => 'bacs',
 				'title'      => __( 'Direct bank transfer', 'woocommerce' ),
 				'content'    => __( 'Take payments via bank transfer.', 'woocommerce' ),
-				'image'      => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/bacs.svg',
+				'image'      => WC()->plugin_url() . '/assets/images/payment_methods/72x72/bacs.png',
 				'is_visible' => array(
 					self::get_rules_for_cbd( false ),
 				),
@@ -324,7 +324,7 @@ class DefaultPaymentGateways {
 				'id'         => 'razorpay',
 				'title'      => __( 'Razorpay', 'woocommerce' ),
 				'content'    => __( 'The official Razorpay extension for WooCommerce allows you to accept credit cards, debit cards, netbanking, wallet, and UPI payments.', 'woocommerce' ),
-				'image'      => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/razorpay.svg',
+				'image'      => WC()->plugin_url() . '/assets/images/payment_methods/72x72/razorpay.png',
 				'plugins'    => array( 'woo-razorpay' ),
 				'is_visible' => array(
 					(object) array(
@@ -339,7 +339,7 @@ class DefaultPaymentGateways {
 				'id'         => 'payubiz',
 				'title'      => __( 'PayU for WooCommerce', 'woocommerce' ),
 				'content'    => __( 'Enable PayU’s exclusive plugin for WooCommerce to start accepting payments in 100+ payment methods available in India including credit cards, debit cards, UPI, & more!', 'woocommerce' ),
-				'image'      => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/payu.svg',
+				'image'      => WC()->plugin_url() . '/assets/images/payment_methods/72x72/payu.png',
 				'plugins'    => array( 'payu-india' ),
 				'is_visible' => array(
 					(object) array(
@@ -365,7 +365,7 @@ class DefaultPaymentGateways {
 				'id'         => 'square_credit_card',
 				'title'      => __( 'Square', 'woocommerce' ),
 				'content'    => __( 'Securely accept credit and debit cards with one low rate, no surprise fees (custom rates available). Sell online and in store and track sales and inventory in one place.', 'woocommerce' ),
-				'image'      => WC()->plugin_url() . '/assets/images/square-black.png',
+				'image'      => WC()->plugin_url() . '/assets/images/payment_methods/72x72/square.png',
 				'plugins'    => array( 'woocommerce-square' ),
 				'is_visible' => array(
 					(object) array(