+
+
+ { id }
+
+
+
+ { bankName }
+
+
+
+ { bic }
+
+
+
+ •••• { last4 }
+
+
+
+
+
+ { verifiedName }
+
+
+
+ { name }
+
+
+
+ { email }
+
+
+
+
+
+
+
+ );
+};
+
+export default IdealDetails;
diff --git a/client/payment-details/payment-method/index.js b/client/payment-details/payment-method/index.js
index 831dda046fe..f392c53dff3 100644
--- a/client/payment-details/payment-method/index.js
+++ b/client/payment-details/payment-method/index.js
@@ -15,6 +15,7 @@ import CardPresentDetails from './card-present';
import GiropayDetails from './giropay';
import SepaDetails from './sepa';
import SofortDetails from './sofort';
+import IdealDetails from './ideal';
const detailsComponentMap = {
card: CardDetails,
@@ -22,6 +23,7 @@ const detailsComponentMap = {
giropay: GiropayDetails,
sepa_debit: SepaDetails,
sofort: SofortDetails,
+ ideal: IdealDetails,
};
const PaymentDetailsPaymentMethod = ( { charge = {}, isLoading } ) => {
diff --git a/client/payment-methods-map.js b/client/payment-methods-map.js
index 996874d4d12..72241277af3 100644
--- a/client/payment-methods-map.js
+++ b/client/payment-methods-map.js
@@ -10,6 +10,7 @@ import CreditCardIcon from './gateway-icons/credit-card';
import GiropayIcon from './gateway-icons/giropay';
import SofortIcon from './gateway-icons/sofort';
import SepaIcon from './gateway-icons/sepa';
+import IdealIcon from './gateway-icons/ideal';
export default {
card: {
@@ -48,4 +49,13 @@ export default {
),
Icon: SepaIcon,
},
+ ideal: {
+ id: 'ideal',
+ label: __( 'iDEAL', 'woocommerce-payments' ),
+ description: __(
+ 'Expand your business with iDEAL — Netherlands’s most popular payment method.',
+ 'woocommerce-payments'
+ ),
+ Icon: IdealIcon,
+ },
};
diff --git a/client/payment-methods/test/index.js b/client/payment-methods/test/index.js
index 6f003a5c697..3dc5231f76c 100644
--- a/client/payment-methods/test/index.js
+++ b/client/payment-methods/test/index.js
@@ -34,6 +34,7 @@ describe( 'PaymentMethods', () => {
'giropay',
'sofort',
'sepa_debit',
+ 'ideal',
] );
} );
@@ -106,7 +107,8 @@ describe( 'PaymentMethods', () => {
const giropay = screen.getByLabelText( 'giropay' );
const sofort = screen.getByLabelText( 'Sofort' );
- [ giropay, sofort ].forEach( ( method ) => {
+ const ideal = screen.getByLabelText( 'iDEAL' );
+ [ giropay, sofort, ideal ].forEach( ( method ) => {
expect( method.closest( 'ul' ) ).toHaveClass(
'payment-methods__available-methods'
);
@@ -150,7 +152,7 @@ describe( 'PaymentMethods', () => {
test( 'clicking delete updates enabled method IDs', () => {
const updateEnabledMethodsMock = jest.fn( () => {} );
useEnabledPaymentMethodIds.mockReturnValue( [
- [ 'card', 'sepa_debit', 'giropay', 'sofort' ],
+ [ 'card', 'sepa_debit', 'giropay', 'sofort', 'ideal' ],
updateEnabledMethodsMock,
] );
@@ -174,6 +176,7 @@ describe( 'PaymentMethods', () => {
'sepa_debit',
'giropay',
'sofort',
+ 'ideal',
] );
} );
diff --git a/client/settings/payment-method-icon/test/index.js b/client/settings/payment-method-icon/test/index.js
index ae51fdd08aa..7b1505bf941 100644
--- a/client/settings/payment-method-icon/test/index.js
+++ b/client/settings/payment-method-icon/test/index.js
@@ -21,11 +21,16 @@ describe( 'PaymentMethodIcon', () => {
expect( container.querySelector( 'svg' ) ).toBeInTheDocument();
} );
- test( 'renders giropay payment method icon', () => {
+ test( 'renders sofort payment method icon', () => {
const { container } = render(