Apple Pay supportedNetworks Not Respected Due to brands Configuration

[jureperak]

Describe the bug
When configuring Apple Pay in Adyen's Web SDK, setting the supportedNetworks option does not work as expected. Instead, the configuration checks the brands property first. However, brands is not a valid option for Apple Pay in Adyen’s TypeScript types, making it impossible to properly restrict specific card networks.

To Reproduce
Steps to reproduce the behavior:

1. Configure Apple Pay in Adyen with supportedNetworks set to specific card brands (e.g., ['masterCard']).
2. Attempt to pay using a restricted card brand (e.g., Visa or Amex or Discover).
3. The restricted card brand still appears as an available option.

Expected behavior
Apple Pay should only display the card networks specified in supportedNetworks, ignoring any invalid brands checks.

Screenshots
It only works if I manually set brands: [] property, which does not exists in ApplePay configuration

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context
The issue seems to stem from Adyen's Apple Pay implementation prioritizing brands (which is not configurable in Apple Pay) over supportedNetworks. This prevents merchants from correctly limiting available card brands in Apple Pay transactions.

The problem seems to be in this line:

adyen-web/packages/lib/src/components/ApplePay/ApplePay.tsx

Line 69 in 28a076f

const supportedNetworks = props.brands?.length ? mapBrands(props.brands) : props.supportedNetworks;

[jureperak]

Hi, I wanted to check if there's any update on this issue. Please let me know if any additional information is needed. Thanks!

[ribeiroguilherme]

Hi @jureperak ,

The brands from props.brands that you highlighted in the code snippet are the ones returned by the backend along with the configured payment method. You must be getting something like:

{
  type: "applepay",
  name: "Apple Pay",
  brands: ['visa', ... ],
  configuration: { ... }
}

Ideally you should rely on those brands and do not have to set them explicitly on the frontend side using the brands or supportedNetworks object.

The supportedNetworks / brands are meant for the same thing. I am not entirely sure why we have that check in place (I guess it is there for legacy reasons), but I believe that the supportedNetworks must be removed and we should support only brands in case the merchant really wants to override their values, although doing any changes to this code for now can lead to breaking changes.

Is there any reason why can't you rely on the brands returned in the payment methods response?

[jureperak]

Hey @ribeiroguilherme,
for some reason, I thought that the brands from /payment-methods would not load properly into the ApplePay component. However, I will rely on the brands returned from the server and will not override them manually. Sorry for the confusion.

[jureperak]

I will continue in this thread so that we have some context.
What if I want to enable only Google Pay or Apple Pay (without card input) but only for specific brands, e.g., Visa and Mastercard? What do I need to send in AllowedPaymentMethods on the server?

[ribeiroguilherme]

@jureperak just to confirm, do you want to tweak the brands supported by Google Pay / Apple Pay based on the availability of the Card component?

allowPaymentMethods will just remove the whole payment method from the response. It won't change the brands returned as far as I know.

[jureperak]

@ribeiroguilherme no no, i wanted to know how can i influence brands availability inside of GooglePay/ApplePay from the server. If we on the server (e.g. session flow) set following:

AllowedPaymentMethods = [
  {
       "visa",
       "mc",
       "googlepay"
   }
],
BlockedPaymentMethods = [
  {
     "visa_googlepay"
  }
]

it will offer me only MC brand in GooglePay.

We can close this issue now, everything is resolved (through service ticket also).