diff --git a/assets/css/admin.css b/assets/css/admin.css
index 28ff0430c73..6933589f7f7 100644
--- a/assets/css/admin.css
+++ b/assets/css/admin.css
@@ -38,6 +38,8 @@
width: 2rem;
background-size: contain;
background-repeat: no-repeat;
+ border-radius: 2px;
+ outline: 1px solid rgba( 0, 0, 0, 0.25 );
}
.payment-method__brand--amex {
diff --git a/assets/images/cards/amex.svg b/assets/images/cards/amex.svg
index c8e4e512e6e..292e48811f0 100644
--- a/assets/images/cards/amex.svg
+++ b/assets/images/cards/amex.svg
@@ -1 +1,4 @@
-
+
diff --git a/assets/images/cards/apple-pay.svg b/assets/images/cards/apple-pay.svg
index 15fd0e88633..7104010533d 100644
--- a/assets/images/cards/apple-pay.svg
+++ b/assets/images/cards/apple-pay.svg
@@ -1 +1,4 @@
-
+
diff --git a/assets/images/cards/diners.svg b/assets/images/cards/diners.svg
index 2f4d127d639..f585af26c5d 100644
--- a/assets/images/cards/diners.svg
+++ b/assets/images/cards/diners.svg
@@ -1 +1,6 @@
-
+
diff --git a/assets/images/cards/discover.svg b/assets/images/cards/discover.svg
index 4e18e896761..db205b2f836 100644
--- a/assets/images/cards/discover.svg
+++ b/assets/images/cards/discover.svg
@@ -1 +1,5 @@
-
\ No newline at end of file
+
diff --git a/assets/images/cards/google-pay.svg b/assets/images/cards/google-pay.svg
index efddd35cf29..816af35ad41 100644
--- a/assets/images/cards/google-pay.svg
+++ b/assets/images/cards/google-pay.svg
@@ -1 +1,8 @@
-
+
diff --git a/assets/images/cards/jcb.svg b/assets/images/cards/jcb.svg
index 473c198b249..ae366edf606 100644
--- a/assets/images/cards/jcb.svg
+++ b/assets/images/cards/jcb.svg
@@ -1 +1,11 @@
-
+
diff --git a/assets/images/cards/mastercard.svg b/assets/images/cards/mastercard.svg
index b77d93d3041..706560ad233 100644
--- a/assets/images/cards/mastercard.svg
+++ b/assets/images/cards/mastercard.svg
@@ -1,6 +1,13 @@
diff --git a/assets/images/cards/unionpay.svg b/assets/images/cards/unionpay.svg
index aecfc0a0ada..69308a567a1 100644
--- a/assets/images/cards/unionpay.svg
+++ b/assets/images/cards/unionpay.svg
@@ -1 +1,14 @@
-
\ No newline at end of file
+
diff --git a/assets/images/cards/visa.svg b/assets/images/cards/visa.svg
index 04eeda0e51e..9592cb31f8c 100644
--- a/assets/images/cards/visa.svg
+++ b/assets/images/cards/visa.svg
@@ -1,7 +1,4 @@
diff --git a/assets/images/payment-methods/affirm.svg b/assets/images/payment-methods/affirm.svg
index 7ad4f7063ef..aeba8456121 100644
--- a/assets/images/payment-methods/affirm.svg
+++ b/assets/images/payment-methods/affirm.svg
@@ -1,16 +1,14 @@
diff --git a/assets/images/payment-methods/afterpay.svg b/assets/images/payment-methods/afterpay.svg
index 75cb2eda73b..a769af42cdd 100644
--- a/assets/images/payment-methods/afterpay.svg
+++ b/assets/images/payment-methods/afterpay.svg
@@ -1,18 +1,16 @@
diff --git a/assets/images/payment-methods/bancontact.svg b/assets/images/payment-methods/bancontact.svg
index 3ba9d37fae0..02697acc46e 100644
--- a/assets/images/payment-methods/bancontact.svg
+++ b/assets/images/payment-methods/bancontact.svg
@@ -1 +1,16 @@
-
+
diff --git a/assets/images/payment-methods/bank-debit.svg b/assets/images/payment-methods/bank-debit.svg
index 70da5aff715..b73ffa02428 100644
--- a/assets/images/payment-methods/bank-debit.svg
+++ b/assets/images/payment-methods/bank-debit.svg
@@ -1 +1,4 @@
-
+
diff --git a/assets/images/payment-methods/cc.svg b/assets/images/payment-methods/cc.svg
index 8c7fd884aa1..6945a5a9801 100644
--- a/assets/images/payment-methods/cc.svg
+++ b/assets/images/payment-methods/cc.svg
@@ -1,26 +1,30 @@
diff --git a/assets/images/payment-methods/eps.svg b/assets/images/payment-methods/eps.svg
index d6cf1ed1c36..33833b9e501 100644
--- a/assets/images/payment-methods/eps.svg
+++ b/assets/images/payment-methods/eps.svg
@@ -1 +1,7 @@
-
+
diff --git a/assets/images/payment-methods/giropay.svg b/assets/images/payment-methods/giropay.svg
index 6fd516dff4f..8d455e3abee 100644
--- a/assets/images/payment-methods/giropay.svg
+++ b/assets/images/payment-methods/giropay.svg
@@ -1 +1,8 @@
-
+
diff --git a/assets/images/payment-methods/ideal.svg b/assets/images/payment-methods/ideal.svg
index f5a43bf2693..8ddcf64e013 100644
--- a/assets/images/payment-methods/ideal.svg
+++ b/assets/images/payment-methods/ideal.svg
@@ -1 +1,10 @@
-
+
diff --git a/assets/images/payment-methods/jcb.svg b/assets/images/payment-methods/jcb.svg
index 473c198b249..7d46e540cd1 100644
--- a/assets/images/payment-methods/jcb.svg
+++ b/assets/images/payment-methods/jcb.svg
@@ -1 +1,21 @@
-
+
diff --git a/assets/images/payment-methods/klarna.svg b/assets/images/payment-methods/klarna.svg
index 948f281a04b..9b6bb3e044a 100644
--- a/assets/images/payment-methods/klarna.svg
+++ b/assets/images/payment-methods/klarna.svg
@@ -1,11 +1,4 @@
diff --git a/assets/images/payment-methods/link.svg b/assets/images/payment-methods/link.svg
index b73f37ba96e..04a4d14086e 100644
--- a/assets/images/payment-methods/link.svg
+++ b/assets/images/payment-methods/link.svg
@@ -1 +1,4 @@
-
+
diff --git a/assets/images/payment-methods/p24.svg b/assets/images/payment-methods/p24.svg
index 26734fd7aeb..73468b0cad1 100644
--- a/assets/images/payment-methods/p24.svg
+++ b/assets/images/payment-methods/p24.svg
@@ -1 +1,7 @@
-
+
diff --git a/assets/images/payment-methods/sepa-debit.svg b/assets/images/payment-methods/sepa-debit.svg
index d0fcfb0498b..5d36b2d8dad 100644
--- a/assets/images/payment-methods/sepa-debit.svg
+++ b/assets/images/payment-methods/sepa-debit.svg
@@ -1 +1,6 @@
-
+
diff --git a/assets/images/payment-methods/sofort.svg b/assets/images/payment-methods/sofort.svg
index ca40bc3c61a..a7b6199281b 100644
--- a/assets/images/payment-methods/sofort.svg
+++ b/assets/images/payment-methods/sofort.svg
@@ -1 +1,6 @@
-
+
diff --git a/assets/images/payment-methods/woopay.svg b/assets/images/payment-methods/woopay.svg
index a516fe11fd5..4398c382d43 100644
--- a/assets/images/payment-methods/woopay.svg
+++ b/assets/images/payment-methods/woopay.svg
@@ -1,14 +1,7 @@
diff --git a/changelog/fix-7183-unify-pm-icon-design b/changelog/fix-7183-unify-pm-icon-design
new file mode 100644
index 00000000000..c15bdfde5df
--- /dev/null
+++ b/changelog/fix-7183-unify-pm-icon-design
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Unify payment method icon design
diff --git a/client/components/payment-methods-list/payment-method.scss b/client/components/payment-methods-list/payment-method.scss
index ae75df340a3..a020b7562cb 100644
--- a/client/components/payment-methods-list/payment-method.scss
+++ b/client/components/payment-methods-list/payment-method.scss
@@ -136,9 +136,7 @@
}
&__icon {
- border-radius: 2px;
flex: 0 0 63.69px;
- height: 40px;
margin: 1px 17px 1px 1px; // 1px to accommodate for box-shadow
align-self: center;
diff --git a/client/connect-account-page/payment-methods.tsx b/client/connect-account-page/payment-methods.tsx
index 12c7e9ac3ab..9add778d558 100644
--- a/client/connect-account-page/payment-methods.tsx
+++ b/client/connect-account-page/payment-methods.tsx
@@ -6,38 +6,39 @@ import React from 'react';
/**
* Internal dependencies
*/
-import AmericanExpress from 'assets/images/cards/amex.svg?asset';
-import ApplePay from 'assets/images/cards/apple-pay.svg?asset';
-import DinersClub from 'assets/images/cards/diners.svg?asset';
-import GooglePay from 'assets/images/cards/google-pay.svg?asset';
-import JCB from 'assets/images/cards/jcb.svg?asset';
-import MasterCard from 'assets/images/cards/mastercard.svg?asset';
-import UnionPay from 'assets/images/cards/unionpay.svg?asset';
-import Visa from 'assets/images/cards/visa.svg?asset';
-import WooPay from 'assets/images/payment-methods/woopay.svg?asset';
-import Affirm from 'assets/images/payment-methods/affirm.svg?asset';
-import AfterPay from 'assets/images/payment-methods/afterpay.svg?asset';
+
import strings from './strings';
import './style.scss';
+import {
+ AffirmIcon,
+ AfterpayIcon,
+ AmericanExpressIcon,
+ ApplePayIcon,
+ DinersClubIcon,
+ GooglePayIcon,
+ JCBIcon,
+ MastercardIcon,
+ UnionPayIcon,
+ VisaIcon,
+ WooIcon,
+} from 'wcpay/payment-methods-icons';
const PaymentMethods: React.FC = () => {
return (
<>
{ strings.paymentMethods }
-
-
-
- { wcpaySettings.isWooPayStoreCountryAvailable && (
-
- ) }
-
-
-
-
-
-
-
+
+
+
+ { wcpaySettings.isWooPayStoreCountryAvailable &&
}
+
+
+
+
+
+
+
& more.
>
diff --git a/client/connect-account-page/style.scss b/client/connect-account-page/style.scss
index 8f68b6b8c41..3ace23ad4cd 100644
--- a/client/connect-account-page/style.scss
+++ b/client/connect-account-page/style.scss
@@ -79,8 +79,6 @@
img {
height: 24px;
- border: 1px solid $gray-300;
- border-radius: 2px;
}
span {
diff --git a/client/connect-account-page/test/__snapshots__/index.test.tsx.snap b/client/connect-account-page/test/__snapshots__/index.test.tsx.snap
index 188d8dd52ee..443845e8b54 100644
--- a/client/connect-account-page/test/__snapshots__/index.test.tsx.snap
+++ b/client/connect-account-page/test/__snapshots__/index.test.tsx.snap
@@ -118,42 +118,52 @@ exports[`ConnectAccountPage should render correctly 1`] = `
>
@@ -439,46 +449,57 @@ exports[`ConnectAccountPage should render correctly with WooPay eligible 1`] = `
>
@@ -718,42 +739,52 @@ exports[`ConnectAccountPage should render correctly with an incentive 1`] = `
>
diff --git a/client/multi-currency/multi-currency-settings/enabled-currencies-list/test/__snapshots__/index.js.snap b/client/multi-currency/multi-currency-settings/enabled-currencies-list/test/__snapshots__/index.js.snap
index f4a0e2195bc..a4e345f9709 100644
--- a/client/multi-currency/multi-currency-settings/enabled-currencies-list/test/__snapshots__/index.js.snap
+++ b/client/multi-currency/multi-currency-settings/enabled-currencies-list/test/__snapshots__/index.js.snap
@@ -372,10 +372,11 @@ exports[`Multi-Currency enabled currencies list Remove currency modal renders co
-
-
-
( {
+ className,
+ ...props
+} ) => (
+
+);
+
+export const AffirmIcon = iconComponent(
+ AffirmAsset,
+ __( 'Affirm', 'woocommerce-payments' )
+);
+export const AfterpayIcon = iconComponent(
+ AfterpayAsset,
+ __( 'Afterpay', 'woocommerce-payments' )
+);
+export const AmericanExpressIcon = iconComponent(
+ AmexAsset,
+ __( 'American Express', 'woocommerce-payments' )
+);
+export const ApplePayIcon = iconComponent(
+ ApplePayAsset,
+ __( 'Apple Pay', 'woocommerce-payments' )
+);
+export const BancontactIcon = iconComponent(
+ BancontactAsset,
+ __( 'Bancontact', 'woocommerce-payments' )
+);
+export const BankDebitIcon = iconComponent(
+ BankDebitAsset,
+ __( 'BECS Direct Debit', 'woocommerce-payments' )
+);
+export const CreditCardIcon = iconComponent(
+ CreditCardAsset,
+ __( 'Credit card / Debit card', 'woocommerce-payments' )
+);
+export const DinersClubIcon = iconComponent(
+ DinersClubAsset,
+ __( 'Diners Club', 'woocommerce-payments' )
+);
+export const EpsIcon = iconComponent(
+ EpsAsset,
+ __( 'BECS Direct Debit', 'woocommerce-payments' )
+);
+export const GiropayIcon = iconComponent(
+ GiropayAsset,
+ __( 'Giropay', 'woocommerce-payments' )
+);
+export const GooglePayIcon = iconComponent(
+ GooglePayAsset,
+ __( 'Google Pay', 'woocommerce-payments' )
+);
+export const IdealIcon = iconComponent(
+ IdealAsset,
+ __( 'iDEAL', 'woocommerce-payments' )
+);
+export const JCBIcon = iconComponent(
+ JCBAsset,
+ __( 'JCB', 'woocommerce-payments' )
+);
+export const KlarnaIcon = iconComponent(
+ KlarnaAsset,
+ __( 'Klarna', 'woocommerce-payments' )
+);
+export const LinkIcon = iconComponent(
+ LinkAsset,
+ __( 'Link', 'woocommerce-payments' )
+);
+export const MastercardIcon = iconComponent(
+ MasterCardAsset,
+ __( 'Mastercard', 'woocommerce-payments' )
+);
+export const P24Icon = iconComponent(
+ P24Asset,
+ __( 'Przelewy24 (P24)', 'woocommerce-payments' )
+);
+export const SepaIcon = iconComponent(
+ SepaAsset,
+ __( 'SEPA Direct Debit', 'woocommerce-payments' )
+);
+export const SofortIcon = iconComponent(
+ SofortAsset,
+ __( 'Sofort', 'woocommerce-payments' )
+);
+export const UnionPayIcon = iconComponent(
+ UnionPayAsset,
+ __( 'UnionPay', 'woocommerce-payments' )
+);
+export const VisaIcon = iconComponent(
+ VisaAsset,
+ __( 'Visa', 'woocommerce-payments' )
+);
+export const WooIcon = iconComponent(
+ WooAsset,
+ __( 'WooPay', 'woocommerce-payments' )
+);
diff --git a/client/payment-methods-map.tsx b/client/payment-methods-map.tsx
index a78bb550f56..c7b6a795dbc 100644
--- a/client/payment-methods-map.tsx
+++ b/client/payment-methods-map.tsx
@@ -7,23 +7,22 @@ import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
-import CreditCardIcon from 'assets/images/payment-methods/cc.svg?asset';
-import BancontactIcon from 'assets/images/payment-methods/bancontact.svg?asset';
-import EpsIcon from 'assets/images/payment-methods/eps.svg?asset';
-import GiropayIcon from 'assets/images/payment-methods/giropay.svg?asset';
-import SofortIcon from 'assets/images/payment-methods/sofort.svg?asset';
-import SepaIcon from 'assets/images/payment-methods/sepa-debit.svg?asset';
-import P24Icon from 'assets/images/payment-methods/p24.svg?asset';
-import IdealIcon from 'assets/images/payment-methods/ideal.svg?asset';
-import BankDebitIcon from 'assets/images/payment-methods/bank-debit.svg?asset';
-import AffirmIcon from 'assets/images/payment-methods/affirm.svg?asset';
-import AfterpayIcon from 'assets/images/payment-methods/afterpay.svg?asset';
-import JCBIcon from 'assets/images/payment-methods/jcb.svg?asset';
-import KlarnaIcon from 'assets/images/payment-methods/klarna.svg?asset';
-const iconComponent = ( src: string, alt: string ): ReactImgFuncComponent => (
- props
-) => ;
+import {
+ AffirmIcon,
+ AfterpayIcon,
+ BancontactIcon,
+ BankDebitIcon,
+ CreditCardIcon,
+ EpsIcon,
+ GiropayIcon,
+ IdealIcon,
+ JCBIcon,
+ KlarnaIcon,
+ P24Icon,
+ SepaIcon,
+ SofortIcon,
+} from 'wcpay/payment-methods-icons';
export interface PaymentMethodMapEntry {
id: string;
@@ -35,8 +34,6 @@ export interface PaymentMethodMapEntry {
stripe_key: string;
allows_manual_capture: boolean;
allows_pay_later: boolean;
- setup_required?: boolean;
- setup_tooltip?: string;
}
const PaymentMethodInformationObject: Record<
@@ -59,7 +56,7 @@ const PaymentMethodInformationObject: Record<
'Let your customers pay with major credit and debit cards without leaving your store.',
'woocommerce-payments'
),
- icon: iconComponent( CreditCardIcon, 'Credit Card' ),
+ icon: CreditCardIcon,
currencies: [],
stripe_key: 'card_payments',
allows_manual_capture: true,
@@ -75,7 +72,7 @@ const PaymentMethodInformationObject: Record<
'Bulk Electronic Clearing System — Accept secure bank transfer from Australia.',
'woocommerce-payments'
),
- icon: iconComponent( BankDebitIcon, 'BECS Direct Debit' ),
+ icon: BankDebitIcon,
currencies: [ 'AUD' ],
stripe_key: 'au_becs_debit_payments',
allows_manual_capture: false,
@@ -91,7 +88,7 @@ const PaymentMethodInformationObject: Record<
'Bancontact is a bank redirect payment method offered by more than 80% of online businesses in Belgium.',
'woocommerce-payments'
),
- icon: iconComponent( BancontactIcon, 'Bancontact' ),
+ icon: BancontactIcon,
currencies: [ 'EUR' ],
stripe_key: 'bancontact_payments',
allows_manual_capture: false,
@@ -107,7 +104,7 @@ const PaymentMethodInformationObject: Record<
'Accept your payment with EPS — a common payment method in Austria.',
'woocommerce-payments'
),
- icon: iconComponent( EpsIcon, 'EPS' ),
+ icon: EpsIcon,
currencies: [ 'EUR' ],
stripe_key: 'eps_payments',
allows_manual_capture: false,
@@ -123,7 +120,7 @@ const PaymentMethodInformationObject: Record<
'Expand your business with giropay — Germany’s second most popular payment system.',
'woocommerce-payments'
),
- icon: iconComponent( GiropayIcon, 'giropay' ),
+ icon: GiropayIcon,
currencies: [ 'EUR' ],
stripe_key: 'giropay_payments',
allows_manual_capture: false,
@@ -139,7 +136,7 @@ const PaymentMethodInformationObject: Record<
'Expand your business with iDEAL — Netherlands’s most popular payment method.',
'woocommerce-payments'
),
- icon: iconComponent( IdealIcon, 'iDEAL' ),
+ icon: IdealIcon,
currencies: [ 'EUR' ],
stripe_key: 'ideal_payments',
allows_manual_capture: false,
@@ -155,7 +152,7 @@ const PaymentMethodInformationObject: Record<
'Accept payments with Przelewy24 (P24), the most popular payment method in Poland.',
'woocommerce-payments'
),
- icon: iconComponent( P24Icon, 'Przelewy24 (P24)' ),
+ icon: P24Icon,
currencies: [ 'EUR', 'PLN' ],
stripe_key: 'p24_payments',
allows_manual_capture: false,
@@ -171,7 +168,7 @@ const PaymentMethodInformationObject: Record<
'Reach 500 million customers and over 20 million businesses across the European Union.',
'woocommerce-payments'
),
- icon: iconComponent( SepaIcon, 'SEPA Direct Debit' ),
+ icon: SepaIcon,
currencies: [ 'EUR' ],
stripe_key: 'sepa_debit_payments',
allows_manual_capture: false,
@@ -187,7 +184,7 @@ const PaymentMethodInformationObject: Record<
'Accept secure bank transfers from Austria, Belgium, Germany, Italy, Netherlands, and Spain.',
'woocommerce-payments'
),
- icon: iconComponent( SofortIcon, 'Sofort' ),
+ icon: SofortIcon,
currencies: [ 'EUR' ],
stripe_key: 'sofort_payments',
allows_manual_capture: false,
@@ -204,7 +201,7 @@ const PaymentMethodInformationObject: Record<
'Allow customers to pay over time with Affirm. Available to all customers paying in %s.',
'woocommerce-payments'
),
- icon: iconComponent( AffirmIcon, 'Affirm' ),
+ icon: AffirmIcon,
currencies: [ 'USD', 'CAD' ],
stripe_key: 'affirm_payments',
allows_manual_capture: false,
@@ -221,7 +218,7 @@ const PaymentMethodInformationObject: Record<
'Allow customers to pay over time with Afterpay. Available to all customers paying in %s.',
'woocommerce-payments'
),
- icon: iconComponent( AfterpayIcon, 'Afterpay' ),
+ icon: AfterpayIcon,
currencies: [ 'USD', 'AUD', 'CAD', 'NZD', 'GBP', 'EUR' ],
stripe_key: 'afterpay_clearpay_payments',
allows_manual_capture: false,
@@ -237,7 +234,7 @@ const PaymentMethodInformationObject: Record<
'Let your customers pay with JCB, the only international payment brand based in Japan.',
'woocommerce-payments'
),
- icon: iconComponent( JCBIcon, 'JCB' ),
+ icon: JCBIcon,
currencies: [ 'JPY' ],
stripe_key: 'jcb_payments',
allows_manual_capture: false,
@@ -254,7 +251,7 @@ const PaymentMethodInformationObject: Record<
'Allow customers to pay over time with Klarna. Available to all customers paying in %s.',
'woocommerce-payments'
),
- icon: iconComponent( KlarnaIcon, 'Klarna' ),
+ icon: KlarnaIcon,
currencies: [ 'EUR', 'GBP', 'USD', 'DKK', 'NOK', 'SEK' ],
stripe_key: 'klarna_payments',
allows_manual_capture: false,
diff --git a/client/payment-methods/test/__snapshots__/activation-modal.test.js.snap b/client/payment-methods/test/__snapshots__/activation-modal.test.js.snap
index 197b0e6a555..46c0f843bb3 100644
--- a/client/payment-methods/test/__snapshots__/activation-modal.test.js.snap
+++ b/client/payment-methods/test/__snapshots__/activation-modal.test.js.snap
@@ -84,8 +84,8 @@ exports[`Activation Modal matches the snapshot 1`] = `
class="payment-confirm-illustration__illustrations"
>