diff --git a/.changeset/cool-hotels-remember.md b/.changeset/cool-hotels-remember.md new file mode 100644 index 0000000000..efd0ccdafb --- /dev/null +++ b/.changeset/cool-hotels-remember.md @@ -0,0 +1,7 @@ +--- +'@adyen/adyen-web': patch +--- + +For all PaymentMethodItems we were adding a class `adyen-checkout__payment-method--{fundingSource}` (where fundingSource was either "credit" or "debit") + +This is meant to be a Card PM specific class to indicate, in the paymentMethods list, whether the card is a credit or debit card. diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.tsx b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.tsx index aac90ff497..82ac7b30bd 100644 --- a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.tsx +++ b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem.tsx @@ -71,11 +71,13 @@ class PaymentMethodItem extends Component { return null; } + const isCard = paymentMethod.props.type === 'card' || paymentMethod.props.type === 'scheme'; + const paymentMethodClassnames = classNames({ 'adyen-checkout__payment-method': true, [styles['adyen-checkout__payment-method']]: true, [`adyen-checkout__payment-method--${paymentMethod.props.type}`]: true, - [`adyen-checkout__payment-method--${paymentMethod.props.fundingSource ?? 'credit'}`]: true, + ...(isCard && { [`adyen-checkout__payment-method--${paymentMethod.props.fundingSource ?? 'credit'}`]: true }), 'adyen-checkout__payment-method--selected': isSelected, [styles['adyen-checkout__payment-method--selected']]: isSelected, 'adyen-checkout__payment-method--loading': isLoading,