setting instant payment method as active pm when clicked

Author: ribeiroguilherme

.changeset/afraid-roses-cheer.md

@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': patch
+---
+
+GooglePay - Fixed challengeWindowSize property when using Google Pay as Instant payment type inside Drop-in

packages/lib/src/components/Dropin/components/PaymentMethod/InstantPaymentMethods.tsx

@@ -1,20 +1,22 @@
-import { Fragment, h } from 'preact';
+import { h } from 'preact';
 import UIElement from '../../../internal/UIElement/UIElement';
 import './InstantPaymentMethods.scss';
 
 interface InstantPaymentMethodsProps {
     paymentMethods: UIElement[];
+    onSelect: (paymentMethod: UIElement) => void;
 }
 
-function InstantPaymentMethods({ paymentMethods }: InstantPaymentMethodsProps) {
+function InstantPaymentMethods({ paymentMethods, onSelect }: InstantPaymentMethodsProps) {
     return (
-        <Fragment>
-            <ul className="adyen-checkout__instant-payment-methods-list">
-                {paymentMethods.map(pm => (
-                    <li key={pm.type}>{pm.render()}</li>
-                ))}
-            </ul>
-        </Fragment>
+        <ul className="adyen-checkout__instant-payment-methods-list">
+            {paymentMethods.map(pm => (
+                // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+                <li key={pm._id} data-testid={pm.type} onClick={() => onSelect(pm)}>
+                    {pm.render()}
+                </li>
+            ))}
+        </ul>
     );
 }
 

packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodList.tsx

@@ -80,7 +80,7 @@ const PaymentMethodList = ({
                 />
             )}
 
-            {hasInstantPaymentMethods && <InstantPaymentMethods paymentMethods={instantPaymentMethods} />}
+            {hasInstantPaymentMethods && <InstantPaymentMethods paymentMethods={instantPaymentMethods} onSelect={onSelect} />}
 
             {hasStoredPaymentMethods && (
                 <PaymentMethodsContainer

packages/lib/storybook/stories/dropin/Dropin.stories.tsx

@@ -26,11 +26,12 @@ const meta: MetaConfiguration<DropinConfiguration> = {
     args: {
         componentConfiguration: getComponentConfigFromUrl() ?? {
             showRadioButton: false,
-            instantPaymentTypes: ['googlepay'],
+            instantPaymentTypes: ['googlepay', 'applepay'],
             showRemovePaymentMethodButton: false,
             paymentMethodsConfiguration: {
                 googlepay: {
-                    buttonType: 'plain'
+                    buttonType: 'plain',
+                    challengeWindowSize: '05'
                 }
             }
         }