diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/List.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/List.js
index 9375f94938a..924ae456415 100644
--- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/List.js
+++ b/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,6 +15,7 @@ export const List = ( {
markConfigured,
recommendation,
paymentGateways,
+ footerLink,
} ) => {
return (
@@ -30,6 +31,11 @@ export const List = ( {
/>
);
} ) }
+ { footerLink ? (
+ { footerLink }
+ ) : (
+ ''
+ ) }
);
};
diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js
index a74092fb4a5..1d2f5160e71 100644
--- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js
+++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js
@@ -13,6 +13,8 @@ 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
@@ -24,6 +26,9 @@ 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 +184,12 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => {
return gateway;
}, [ isResolving, query, paymentGateways ] );
- const [ wcPayGateway, enabledGateways, offlineGateways, additionalGateways ] = useMemo(
+ const [
+ wcPayGateway,
+ enabledGateways,
+ offlineGateways,
+ additionalGateways,
+ ] = useMemo(
() =>
Array.from( paymentGateways.values() )
.sort( ( a, b ) => {
@@ -258,7 +268,17 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => {
recommendation={ recommendation }
paymentGateways={ additionalGateways }
markConfigured={ markConfigured }
- />
+ footerLink={
+
+ }
+ >
) }
{ !! offlineGateways.length && (
diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/payment-gateway-suggestions.scss b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/payment-gateway-suggestions.scss
index 0716dc3d3fa..8e408b15e20 100644
--- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/payment-gateway-suggestions.scss
+++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/payment-gateway-suggestions.scss
@@ -22,6 +22,15 @@
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;