Apple Pay Integration via Adyen Web Component: "Payment Not Completed" Issue with No Console Errors

[Unequaled804]

Describe the bug When integrating Apple Pay through Adyen Web Component, the prompt "Payment Not Completed" appears and there is no error information in the console.

To Reproduce Steps to reproduce the behavior:

1. Click on the Apple Pay button
2. The Apple Pay component pops up
3. Complete FaceID authentication
4. The prompt "Payment Not Completed" appears

Expected behavior Apple Pay payment should succeed or prompt a payment failure, and the console should display detailed error information

Smartphone (please complete the following information):

• Device: iPhone 11 Pro Max
• OS: iOS 14.4
• Browser: Safari

Additional context There are no error messages or other output in the Safari console when the payment error occurs. The methods onSubmit, onConfigSuccess, onLoad, onChange, onBinValue, onAdditionalDetails, onValidateMerchant, and onAuthorized are all configured in the configuration, but they do not seem to be triggered.

I would like to ask how to troubleshoot and handle this issue?

Thank you very much!

[ribeiroguilherme]

Hi @Unequaled804 ,

Can you add the onError callback to your implementation and verify if you get any errors there? Are you using the Advanced or Sessions flow? Can you see the /payments request happening when the Pay button is clicked?

[Unequaled804]

Hi @Unequaled804 ,

Can you add the onError callback to your implementation and verify if you get any errors there? Are you using the Advanced or Sessions flow? Can you see the /payments request happening when the Pay button is clicked?

Hi @ribeiroguilherme

Thank you for your reply.

1. We can confirm that onError is implemented and there is console.log of error in the callback. But nothing shows in the console when the "Payment Not Completed" appears. Only the cancel of the payment will trigger the onError callback.
2. We are using Advanced flow.
3. There is no /payments request when the Pay button is clicked, there is only a /sesstions request as shown in the below screenshot. In addition, implemented callback functions listed above were not triggered especially onAuthorized and onSubmit.

[ribeiroguilherme]

Hi @Unequaled804 ,

When requesting the payment methods from the Backend (during the /paymentMethods call), do you get applepay as part of the paymentMethods list? Does it contain the configuration field with merchantId and merchantName ?

Regarding the Testing cards, are you using any of the test cards listed here ?

I see that you are also loading apple-pay-sdk.js - what is that? I don't think our library loads such external SDK. It uses what is already available within Safari

[Unequaled804]

Hi @Unequaled804 ,

When requesting the payment methods from the Backend (during the /paymentMethods call), do you get applepay as part of the paymentMethods list? Does it contain the configuration field with merchantId and merchantName ?

Regarding the Testing cards, are you using any of the test cards listed here ?

I see that you are also loading apple-pay-sdk.js - what is that? I don't think our library loads such external SDK. It uses what is already available within Safari

Hi @ribeiroguilherme ,

• As you can see in the code block below, there is a paymentMethods list in the configuration, which contains a valid merchantId and merchantName.

const configuration = {
  // other config...
  paymentMethodsResponse: {
    paymentMethods: [
      {
        brands: ['amex', 'diners', 'discover', 'jcb', 'mc', 'visa'],
        name: 'Credit Card',
        type: 'scheme',
      },
      {
        brands: ['amex', 'discover', 'jcb', 'mc', 'visa'],
        configuration: {
          merchantId: '000000XXXXXXXXX',
          merchantName: 'XXXXXX_TEST1247XXXXX',
        },
        name: 'Apple Pay',
        type: 'applepay',
      },
      {
        name: 'BENEFIT',
        type: 'benefit',
      },
      {
        name: 'Bank Transfer',
        type: 'kcp_banktransfer',
      },
      {
        name: 'Korea–issued cards',
        type: 'kcp_creditcard',
      },
      {
        name: 'KNet',
        type: 'knet',
      },
      {
        name: 'UnionPay',
        type: 'unionpay',
      },
    ],
  },
  // other config...
}

• We are using a Sandbox Apple ID and some testing cards provided by the Apple official website, which is the same link you mentioned earlier, for testing purposes.

• The apple-pay-sdk.js was imported for API-only integration. However, the payment flow could not proceed due to an unknown error. As a result, we decided to switch to the Web Component integration.

  We tried removing the imported apple-pay-sdk.js script to avoid potential conflicts, but the issue still persists.

[ribeiroguilherme]

Hi @Unequaled804 ,

It seems like everything is correct.

Can you try to do a payment on https://mystoredemo.io to double check that your testing card works? Do you have by any chance a live testing website where I could take a look?

[ribeiroguilherme]

Update:

I tested your implementation, and it worked well if my testing cards. It could be that your testing device with the Cards are not set up correctly. Please follow up this with the assigned implementation manager. Cheers!