Merge pull request #32467 from woocommerce/dev/32131-ui-changes-additional-payment-section

UI changes for set up payments task

packages/js/admin-e2e-tests/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Unreleased
 
+-   Update test for payment task. #32467
+
 # 1.0.0
 
 -   Add returned type annotations and remove unused vars. #8020

packages/js/admin-e2e-tests/src/pages/PaymentsSetup.ts

@@ -25,6 +25,15 @@ export class PaymentsSetup extends BasePage {
 		await this.clickButtonWithText( 'Got it' );
 	}
 
+	async showOtherPaymentMethods(): Promise< void > {
+		const selector = '.woocommerce-task-payments button.toggle-button';
+		await this.page.waitForSelector( selector );
+		const toggleButton = await this.page.$(
+			`${ selector }[aria-expanded=false]`
+		);
+		await toggleButton?.click();
+	}
+
 	async goToPaymentMethodSetup(
 		method: PaymentMethodWithSetupButton
 	): Promise< void > {
@@ -41,14 +50,6 @@ export class PaymentsSetup extends BasePage {
 		}
 	}
 
-	async methodHasBeenSetup( method: PaymentMethod ): Promise< void > {
-		const selector = `.woocommerce-task-payment-${ method }`;
-		await this.page.waitForSelector( selector );
-		expect(
-			await getElementByText( '*', 'Manage', selector )
-		).toBeDefined();
-	}
-
 	async enableCashOnDelivery(): Promise< void > {
 		await this.page.waitForSelector( '.woocommerce-task-payment-cod' );
 		await this.clickButtonWithText( 'Enable' );

packages/js/admin-e2e-tests/src/pages/WcSettings.ts

@@ -42,8 +42,22 @@ export class WcSettings extends BasePage {
 		);
 	}
 
+	async paymentMethodIsEnabled( method = '' ): Promise< boolean > {
+		await this.navigate( 'checkout' );
+		await waitForElementByText( 'h2', 'Payment methods' );
+		const className = await getAttribute(
+			`tr[data-gateway_id=${ method }] .woocommerce-input-toggle`,
+			'className'
+		);
+		return (
+			( className as string ).indexOf(
+				'woocommerce-input-toggle--disabled'
+			) === -1
+		);
+	}
+
 	async cleanPaymentMethods(): Promise< void > {
-		this.navigate( 'checkout' );
+		await this.navigate( 'checkout' );
 		await waitForElementByText( 'h2', 'Payment methods' );
 		const paymentMethods = await page.$$( 'span.woocommerce-input-toggle' );
 		for ( const method of paymentMethods ) {

packages/js/admin-e2e-tests/src/specs/tasks/payment.ts

@@ -53,6 +53,7 @@ const testAdminPaymentSetupTask = () => {
 		} );
 
 		it( 'Saving valid bank account transfer details enables the payment method', async () => {
+			await paymentsSetup.showOtherPaymentMethods();
 			await paymentsSetup.goToPaymentMethodSetup( 'bacs' );
 			await bankTransferSetup.saveAccountDetails( {
 				accountNumber: '1234',
@@ -62,12 +63,11 @@ const testAdminPaymentSetupTask = () => {
 				iban: '12 3456 7890',
 				swiftCode: 'ABBA',
 			} );
-
-			await homeScreen.isDisplayed();
 			await waitForTimeout( 1000 );
-			await homeScreen.clickOnTaskList( 'Set up payments' );
+			expect( await settings.paymentMethodIsEnabled( 'bacs' ) ).toBe(
-			await paymentsSetup.isDisplayed();
+				true
-			await paymentsSetup.methodHasBeenSetup( 'bacs' );
+			);
+			await homeScreen.navigate();
 		} );
 
 		it( 'Enabling cash on delivery enables the payment method', async () => {
@@ -76,13 +76,13 @@ const testAdminPaymentSetupTask = () => {
 			await homeScreen.isDisplayed();
 			await waitForTimeout( 1000 );
 			await homeScreen.clickOnTaskList( 'Set up payments' );
-			await paymentsSetup.enableCashOnDelivery();
-			await homeScreen.navigate();
-			await homeScreen.isDisplayed();
-			await waitForTimeout( 1000 );
-			await homeScreen.clickOnTaskList( 'Set up payments' );
 			await paymentsSetup.isDisplayed();
-			await paymentsSetup.methodHasBeenSetup( 'cod' );
+			await paymentsSetup.showOtherPaymentMethods();
+			await paymentsSetup.enableCashOnDelivery();
+			await waitForTimeout( 1000 );
+			expect( await settings.paymentMethodIsEnabled( 'cod' ) ).toBe(
+				true
+			);
 		} );
 	} );
 };

packages/js/data/CHANGELOG.md

@@ -1,6 +1,7 @@
 # Unreleased
 
 -   Update dependency `@wordpress/hooks` to ^3.5.0
+-   Add `is_offline` attribute for `Plugin` type. #32467
 
 # 3.1.0
 

packages/js/data/src/plugins/types.ts

@@ -39,6 +39,7 @@ export type Plugin = {
 	recommendation_priority?: number;
 	is_visible?: boolean;
 	is_local_partner?: boolean;
+	is_offline?: boolean;
 };
 
 type PaypalOnboardingState = 'unknown' | 'start' | 'progressive' | 'onboarded';

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

@@ -24,7 +24,7 @@ export const Action = ( {
 	markConfigured,
 	onSetUp = () => {},
 	onSetupCallback,
-	setupButtonText = __( 'Set up', 'woocommerce' ),
+	setupButtonText = __( 'Get started', 'woocommerce' ),
 } ) => {
 	const [ isBusy, setIsBusy ] = useState( false );
 

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Card, CardHeader } from '@wordpress/components';
+import { Card, CardHeader, CardFooter } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -15,10 +15,11 @@ export const List = ( {
 	markConfigured,
 	recommendation,
 	paymentGateways,
+	footerLink,
 } ) => {
 	return (
 		<Card>
-			<CardHeader as="h2">{ heading }</CardHeader>
+			{ heading && <CardHeader as="h2">{ heading }</CardHeader> }
 			{ paymentGateways.map( ( paymentGateway ) => {
 				const { id } = paymentGateway;
 				return (
@@ -30,6 +31,9 @@ export const List = ( {
 					/>
 				);
 			} ) }
+			{ footerLink && (
+				<CardFooter isBorderless>{ footerLink }</CardFooter>
+			) }
 		</Card>
 	);
 };

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/components/List/test/list.js

@@ -49,7 +49,7 @@ describe( 'PaymentGatewaySuggestions > List', () => {
 		expect( queryByRole( 'button' ) ).toHaveTextContent( 'Enable' );
 	} );
 
-	it( 'should display the "Set up" button when setup is required', () => {
+	it( 'should display the "Get started" button when setup is required', () => {
 		const props = {
 			...defaultProps,
 			paymentGateways: [
@@ -63,7 +63,7 @@ describe( 'PaymentGatewaySuggestions > List', () => {
 
 		const { queryByRole } = render( <List { ...props } /> );
 
-		expect( queryByRole( 'button' ) ).toHaveTextContent( 'Set up' );
+		expect( queryByRole( 'button' ) ).toHaveTextContent( 'Get started' );
 	} );
 
 	it( 'should display the SetupRequired component when appropriate', () => {

plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Setup/Configure.js

@@ -156,7 +156,7 @@ export const Configure = ( { markConfigured, paymentGateway } ) => {
 				</p>
 			) }
 			<Button isPrimary href={ settingsUrl }>
-				{ __( 'Set up', 'woocommerce' ) }
+				{ __( 'Get started', 'woocommerce' ) }
 			</Button>
 		</>
 	);

plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Setup/test/configure.js

@@ -81,7 +81,7 @@ describe( 'Configure', () => {
 		const { container } = render( <Configure { ...props } /> );
 
 		const button = container.querySelector( 'a' );
-		expect( button.textContent ).toBe( 'Set up' );
+		expect( button.textContent ).toBe( 'Get started' );
 		expect( button.href ).toBe( mockGateway.settingsUrl );
 	} );
 } );

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

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { Button } from '@wordpress/components';
+import ChevronUpIcon from 'gridicons/dist/chevron-up';
+import ChevronDownIcon from 'gridicons/dist/chevron-down';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import './Toggle.scss';
+
+export const Toggle = ( { children, heading, onToggle } ) => {
+	const [ isShow, setIsShow ] = useState( false );
+	const onClick = () => {
+		onToggle( isShow );
+		setIsShow( ! isShow );
+	};
+
+	return (
+		<div className="toggle">
+			<Button
+				isTertiary
+				onClick={ onClick }
+				aria-expanded={ isShow }
+				frameBorder={ 0 }
+				className="toggle-button"
+			>
+				{ heading }
+				{ isShow ? (
+					<ChevronUpIcon size={ 18 } />
+				) : (
+					<ChevronDownIcon size={ 18 } />
+				) }
+			</Button>
+			{ isShow ? children : null }
+		</div>
+	);
+};

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

@@ -0,0 +1,9 @@
+.woocommerce-task-payments {
+	.toggle-button {
+		margin: $gap-small 0;
+
+		.gridicon {
+			margin-left: 4px;
+		}
+	}
+}

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

@@ -0,0 +1 @@
+export { Toggle } from './Toggle';

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

@@ -13,17 +13,23 @@ import { useMemo, useCallback, useEffect } from '@wordpress/element';
 import { registerPlugin } from '@wordpress/plugins';
 import { WooOnboardingTask } from '@woocommerce/onboarding';
 import { getNewPath } from '@woocommerce/navigation';
+import { Button } from '@wordpress/components';
+import ExternalIcon from 'gridicons/dist/external';
 
 /**
  * Internal dependencies
  */
 import { List, Placeholder as ListPlaceholder } from './components/List';
 import { Setup, Placeholder as SetupPlaceholder } from './components/Setup';
+import { Toggle } from './components/Toggle/Toggle';
 import { WCPaySuggestion } from './components/WCPay';
 import { getPluginSlug } from '~/utils';
 import './plugins/Bacs';
 import './payment-gateway-suggestions.scss';
 
+const SEE_MORE_LINK =
+	'https://woocommerce.com/product-category/woocommerce-extensions/payment-gateways/?utm_source=payments_recommendations';
+
 const comparePaymentGatewaysByPriority = ( a, b ) =>
 	a.recommendation_priority - b.recommendation_priority;
 
@@ -179,7 +185,7 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => {
 		return gateway;
 	}, [ isResolving, query, paymentGateways ] );
 
-	const [ wcPayGateway, enabledGateways, additionalGateways ] = useMemo(
+	const [ wcPayGateway, offlineGateways, additionalGateways ] = useMemo(
 		() =>
 			Array.from( paymentGateways.values() )
 				.sort( ( a, b ) => {
@@ -196,7 +202,7 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => {
 				} )
 				.reduce(
 					( all, gateway ) => {
-						const [ wcPay, enabled, additional ] = all;
+						const [ wcPay, offline, additional ] = all;
 
 						// WCPay is handled separately when not installed and configured
 						if (
@@ -205,8 +211,8 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => {
 							! ( gateway.installed && ! gateway.needsSetup )
 						) {
 							wcPay.push( gateway );
-						} else if ( gateway.enabled ) {
+						} else if ( gateway.is_offline ) {
-							enabled.push( gateway );
+							offline.push( gateway );
 						} else {
 							additional.push( gateway );
 						}
@@ -218,6 +224,20 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => {
 		[ paymentGateways ]
 	);
 
+	const isEligibleWCPay = !! wcPayGateway.length;
+
+	const trackSeeMore = () => {
+		recordEvent( 'tasklist_payment_see_more', {} );
+	};
+
+	const trackToggle = ( isShow ) => {
+		recordEvent( 'tasklist_payment_show_toggle', {
+			toggle: isShow ? 'hide' : 'show',
+			payment_method_count:
+				offlineGateways.length + additionalGateways.length,
+		} );
+	};
+
 	if ( query.id && ! currentGateway ) {
 		return <SetupPlaceholder />;
 	}
@@ -231,32 +251,59 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => {
 		);
 	}
 
+	const additionalSection = !! additionalGateways.length && (
+		<List
+			heading={
+				isEligibleWCPay
+					? null
+					: __( 'Choose a payment provider', 'woocommerce' )
+			}
+			recommendation={ recommendation }
+			paymentGateways={ additionalGateways }
+			markConfigured={ markConfigured }
+			footerLink={
+				<Button
+					href={ SEE_MORE_LINK }
+					target="_blank"
+					onClick={ trackSeeMore }
+					isTertiary
+				>
+					{ __( 'See more', 'woocommerce' ) }
+					<ExternalIcon size={ 18 } />
+				</Button>
+			}
+		></List>
+	);
+
+	const offlineSection = !! offlineGateways.length && (
+		<List
+			heading={ __( 'Offline payment methods', 'woocommerce' ) }
+			recommendation={ recommendation }
+			paymentGateways={ offlineGateways }
+			markConfigured={ markConfigured }
+		/>
+	);
+
 	return (
 		<div className="woocommerce-task-payments">
 			{ ! paymentGateways.size && <ListPlaceholder /> }
 
-			{ !! wcPayGateway.length && (
+			{ isEligibleWCPay ? (
-				<WCPaySuggestion paymentGateway={ wcPayGateway[ 0 ] } />
+				<>
-			) }
+					<WCPaySuggestion paymentGateway={ wcPayGateway[ 0 ] } />
-
+					<Toggle
-			{ !! enabledGateways.length && (
+						heading={ __( 'Other payment methods', 'woocommerce' ) }
-				<List
+						onToggle={ trackToggle }
-					heading={ __( 'Enabled payment gateways', 'woocommerce' ) }
+					>
-					recommendation={ recommendation }
+						{ additionalSection }
-					paymentGateways={ enabledGateways }
+						{ offlineSection }
-				/>
+					</Toggle>
-			) }
+				</>
-
+			) : (
-			{ !! additionalGateways.length && (
+				<>
-				<List
+					{ additionalSection }
-					heading={ __(
+					{ offlineSection }
-						'Additional payment gateways',
+				</>
-						'woocommerce'
-					) }
-					recommendation={ recommendation }
-					paymentGateways={ additionalGateways }
-					markConfigured={ markConfigured }
-				/>
 			) }
 		</div>
 	);

plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/payment-gateway-suggestions.scss

@@ -22,6 +22,14 @@
 		margin: 0;
 	}
 
+	.components-card__footer {
+		a.components-button {
+			.gridicon {
+				margin-left: 4px;
+			}
+		}
+	}
+
 	.woocommerce-task-payment__recommended-pill {
 		border: 1px solid $studio-gray-5;
 		border-radius: 28px;

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

@@ -49,6 +49,7 @@ const paymentGatewaySuggestions = [
 		image:
 			'http://localhost:8888/wp-content/plugins/woocommerce-admin/images/onboarding/cod.svg',
 		is_visible: true,
+		is_offline: true,
 	},
 	{
 		id: 'bacs',
@@ -57,6 +58,7 @@ const paymentGatewaySuggestions = [
 		image:
 			'http://localhost:8888/wp-content/plugins/woocommerce-admin/images/onboarding/bacs.svg',
 		is_visible: true,
+		is_offline: true,
 	},
 	{
 		id: 'woocommerce_payments:non-us',
@@ -83,8 +85,12 @@ const paymentGatewaySuggestions = [
 	},
 ];
 
+const paymentGatewaySuggestionsWithoutWCPay = paymentGatewaySuggestions.filter(
+	( p ) => p.title !== 'WooCommerce Payments'
+);
+
 describe( 'PaymentGatewaySuggestions', () => {
-	test( 'should render payment gateway lists', () => {
+	test( 'should render only WCPay if its suggested', () => {
 		const onComplete = jest.fn();
 		const query = {};
 		useSelect.mockImplementation( () => ( {
@@ -109,6 +115,38 @@ describe( 'PaymentGatewaySuggestions', () => {
 			( e ) => e.textContent
 		);
 
+		expect( paymentTitles ).toEqual( [] );
+
+		expect(
+			container.getElementsByTagName( 'title' )[ 0 ].textContent
+		).toBe( 'WooCommerce Payments' );
+	} );
+
+	test( 'should render all payment gateways if no WCPay', () => {
+		const onComplete = jest.fn();
+		const query = {};
+		useSelect.mockImplementation( () => ( {
+			isResolving: false,
+			getPaymentGateway: jest.fn(),
+			paymentGatewaySuggestions: paymentGatewaySuggestionsWithoutWCPay,
+			installedPaymentGateways: [],
+		} ) );
+
+		const { container } = render(
+			<PaymentGatewaySuggestions
+				onComplete={ onComplete }
+				query={ query }
+			/>
+		);
+
+		const paymentTitleElements = container.querySelectorAll(
+			'.woocommerce-task-payment__title'
+		);
+
+		const paymentTitles = Array.from( paymentTitleElements ).map(
+			( e ) => e.textContent
+		);
+
 		expect( paymentTitles ).toEqual( [
 			'Stripe',
 			'PayPal Payments',
@@ -116,10 +154,6 @@ describe( 'PaymentGatewaySuggestions', () => {
 			'Cash on delivery',
 			'Direct bank transfer',
 		] );
-
-		expect(
-			container.getElementsByTagName( 'title' )[ 0 ].textContent
-		).toBe( 'WooCommerce Payments' );
 	} );
 
 	test( 'should the payment gateway offline options at the bottom', () => {
@@ -128,7 +162,7 @@ describe( 'PaymentGatewaySuggestions', () => {
 		useSelect.mockImplementation( () => ( {
 			isResolving: false,
 			getPaymentGateway: jest.fn(),
-			paymentGatewaySuggestions,
+			paymentGatewaySuggestions: paymentGatewaySuggestionsWithoutWCPay,
 			installedPaymentGateways: [],
 		} ) );
 
@@ -154,7 +188,7 @@ describe( 'PaymentGatewaySuggestions', () => {
 		useSelect.mockImplementation( () => ( {
 			isResolving: false,
 			getPaymentGateway: jest.fn(),
-			paymentGatewaySuggestions,
+			paymentGatewaySuggestions: paymentGatewaySuggestionsWithoutWCPay,
 			installedPaymentGateways: [
 				{
 					id: 'ppcp-gateway',
@@ -184,7 +218,7 @@ describe( 'PaymentGatewaySuggestions', () => {
 		useSelect.mockImplementation( () => ( {
 			isResolving: false,
 			getPaymentGateway: jest.fn(),
-			paymentGatewaySuggestions,
+			paymentGatewaySuggestions: paymentGatewaySuggestionsWithoutWCPay,
 			installedPaymentGateways: [
 				{
 					id: 'ppcp-gateway',
@@ -211,4 +245,59 @@ describe( 'PaymentGatewaySuggestions', () => {
 			selected: 'ppcp_gateway',
 		} );
 	} );
+
+	test( 'should record event correctly when other payment methods is clicked', () => {
+		const onComplete = jest.fn();
+		const query = {};
+		useSelect.mockImplementation( () => ( {
+			isResolving: false,
+			getPaymentGateway: jest.fn(),
+			paymentGatewaySuggestions,
+			installedPaymentGateways: [],
+		} ) );
+
+		render(
+			<PaymentGatewaySuggestions
+				onComplete={ onComplete }
+				query={ query }
+			/>
+		);
+
+		fireEvent.click( screen.getByText( 'Other payment methods' ) );
+
+		// By default it's hidden, so when toggle it shows.
+		expect( recordEvent ).toHaveBeenCalledWith(
+			'tasklist_payment_show_toggle',
+			{
+				toggle: 'show',
+				payment_method_count: paymentGatewaySuggestions.length - 1, // Minus one for WCPay since it's not counted in "other payment methods".
+			}
+		);
+	} );
+
+	test( 'should record event correctly when see more is clicked', () => {
+		const onComplete = jest.fn();
+		const query = {};
+		useSelect.mockImplementation( () => ( {
+			isResolving: false,
+			getPaymentGateway: jest.fn(),
+			paymentGatewaySuggestions,
+			installedPaymentGateways: [],
+		} ) );
+
+		render(
+			<PaymentGatewaySuggestions
+				onComplete={ onComplete }
+				query={ query }
+			/>
+		);
+
+		fireEvent.click( screen.getByText( 'Other payment methods' ) );
+		fireEvent.click( screen.getByText( 'See more' ) );
+
+		expect( recordEvent ).toHaveBeenCalledWith(
+			'tasklist_payment_see_more',
+			{}
+		);
+	} );
 } );

plugins/woocommerce/changelog/dev-32131-ui-changes-additional-payment-section

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+UI changes for set up payments task

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,19 +194,21 @@ 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 ),
 				),
+				'is_offline' => true,
 			),
 			array(
 				'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 ),
 				),
+				'is_offline' => true,
 			),
 			array(
 				'id'                      => 'woocommerce_payments',
@@ -322,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(
@@ -337,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(
@@ -352,7 +354,7 @@ class DefaultPaymentGateways {
 				'id'         => 'eway',
 				'title'      => __( 'Eway', 'woocommerce' ),
 				'content'    => __( 'The Eway extension for WooCommerce allows you to take credit card payments directly on your store without redirecting your customers to a third party site to make payment.', 'woocommerce' ),
-				'image'      => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/eway.png',
+				'image'      => WC()->plugin_url() . '/assets/images/payment_methods/72x72/eway.png',
 				'plugins'    => array( 'woocommerce-gateway-eway' ),
 				'is_visible' => array(
 					self::get_rules_for_countries( array( 'AU', 'NZ' ) ),
@@ -363,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(