Dropin - Filtering out unsupported payment methods before creating the payment method components

.changeset/purple-rules-jump.md

@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': patch
+---
+
+Dropin: Filtering out payment method type before creating the payment method element

packages/lib/src/components/Dropin/elements/createElements.test.ts

@@ -0,0 +1,44 @@
+import createElements from './createElements';
+import Card from '../../Card/Card';
+
+import type { PaymentMethod } from '../../../types/global-types';
+import type { ICore } from '../../../core/types';
+import type { _MockProxy } from 'jest-mock-extended/lib/Mock';
+
+describe('Drop-in: createElements', () => {
+    test('should filter out non-supported payment methods before attempting to create the payment method components', async () => {
+        const paymentMethods: PaymentMethod[] = [
+            {
+                type: 'scheme',
+                name: 'Cards',
+                brands: []
+            },
+            {
+                type: 'clicktopay',
+                name: 'Click to Pay',
+                configuration: {
+                    visaSrcInitiatorId: 'B9SECVKI...',
+                    visaSrciDpaId: '8e6e347c-25...'
+                }
+            },
+            {
+                type: 'androidpay',
+                name: 'AndroidPay'
+            }
+        ];
+
+        const core = global.core as _MockProxy<ICore> & ICore;
+        core.getComponent.mockImplementation((type: string) => {
+            if (type === 'scheme') {
+                return Card;
+            }
+        });
+
+        const elements = await createElements(paymentMethods, {}, {}, core);
+
+        expect(core.getComponent).toHaveBeenCalledTimes(1);
+        expect(core.getComponent).toHaveBeenCalledWith('scheme');
+        expect(elements.length).toBe(1);
+        expect(elements[0]).toBeInstanceOf(Card);
+    });
+});

packages/lib/src/components/Dropin/elements/createElements.ts

@@ -1,4 +1,4 @@
-import { filterUnsupported, filterPresent, filterAvailable, optionallyFilterUpiSubTxVariants } from './filters';
+import { filterUnsupportedPaymentMethod, filterPresent, filterAvailable, optionallyFilterUpiSubTxVariants } from './filters';
 import { getComponentConfiguration } from './getComponentConfiguration';
 import getComponentNameOfPaymentType from '../../components-name-map';
 import UIElement from '../../internal/UIElement';
@@ -21,6 +21,7 @@ const createElements = (
     core: ICore
 ): Promise<UIElement[]> => {
     const elements = optionallyFilterUpiSubTxVariants(paymentMethods)
+        .filter(filterUnsupportedPaymentMethod)
         .map(paymentMethod => {
             const isStoredPaymentMethod = 'isStoredPaymentMethod' in paymentMethod && paymentMethod.isStoredPaymentMethod;
             const paymentMethodConfigurationProps = getComponentConfiguration(paymentMethod.type, paymentMethodsConfiguration, isStoredPaymentMethod);
@@ -41,8 +42,7 @@ const createElements = (
 
             return new PaymentMethodElement(core, elementProps);
         })
-        .filter(filterPresent)
-        .filter(filterUnsupported);
+        .filter(filterPresent);
 
     return filterAvailable(elements);
 };

packages/lib/src/components/Dropin/elements/filters.ts

@@ -3,8 +3,12 @@ import type { PaymentMethod, StoredPaymentMethod, UIElement } from '../../../typ
 
 export const UNSUPPORTED_PAYMENT_METHODS = ['androidpay', 'samsungpay', 'clicktopay'];
 
-// filter payment methods that we don't support in the Drop-in
-export const filterUnsupported = paymentMethod => !UNSUPPORTED_PAYMENT_METHODS.includes(paymentMethod.constructor['type']);
+/**
+ * Filter out payment methods that are not supported by Drop-in
+ * @param paymentMethod - Payment method object from /paymentMethods response
+ */
+export const filterUnsupportedPaymentMethod = (paymentMethod: PaymentMethod | StoredPaymentMethod) =>
+    !UNSUPPORTED_PAYMENT_METHODS.includes(paymentMethod.type);
 
 // filter payment methods that we support (that are in the paymentMethods/index dictionary)
 export const filterPresent = paymentMethod => !!paymentMethod;