adyen-web icon indicating copy to clipboard operation
adyen-web copied to clipboard

ApplePay: not possible to reject the payment with specific errors

Open masipcat opened this issue 2 years ago • 2 comments

Describe the bug

In the onAuthorized callback it's not possible to reject the payment with a custom result. I expected calling reject({errors: [...]}) in the onAuthorized() would be propagated to session.completePayment({status: FAILURE, errors: [...]}) but it's not: https://github.com/Adyen/adyen-web/blob/5990de475cab9b20361a695b056a7b02bb89af51/packages/lib/src/components/ApplePay/ApplePayService.ts#L72-L74

In other callbacks like onShippingContactSelected this works.

To Reproduce

In the adyen config:

onAuthorized: (resolve, reject, event) => {
   reject({
     errors: [
          new ApplePayError(
            'shippingContactInvalid',
            'locality',
            'Field locality is required'
          ),
        ]
    })
}

The Apple Pay modal will close instead of requiring the user to edit/change the shipping address.

Expected behavior To propagate the errors like in other callbacks like onShippingContactSelected

Screenshots

Smartphone (please complete the following information):

  • Device: iPhone6s
  • OS: iOS15.6.1
  • Browser Safari

masipcat avatar Sep 09 '22 11:09 masipcat

By the way, as a workaround I'm monkey patching the onpaymentauthorized inside onShippingContactSelected and it works fine:

  function monkeypatchAdyenOnpaymentauthorized(event) {
    // Monkeypatch onpaymentauthoized Adyen's implementation to be able
    // to call completePayment with a custom result in case of failure
    event.srcElement.onpaymentauthorized = (event) => {
      // Based on Adyen implementation
      // https://github.com/Adyen/adyen-web/blob/5990de475cab9b20361a695b056a7b02bb89af51/packages/lib/src/components/ApplePay/ApplePayService.ts#L60-L75
      const session = event.srcElement
      return new Promise((resolve, reject) => 
        onAuthorized(resolve, reject, event)
      )
        .then((result) => session.completePayment(result))
        .catch((result) => session.completePayment(result))
    }
  }

  async function onShippingContactSelected(resolve, reject, event) {
    monkeypatchAdyenOnpaymentauthorized(event)
    // ...
  }

  async function onAuthorized(resolve, reject, event) {
    // ...
    reject({
      status: ApplePaySession.STATUS_FAILURE,
      errors: [...],
    })
  }

masipcat avatar Sep 09 '22 11:09 masipcat

Hi @masipcat

Thanks for reaching out. We are going to have a look into that and will keep you posted in this thread.

Related issue: #1538

ribeiroguilherme avatar Sep 12 '22 09:09 ribeiroguilherme

Hi @masipcat ,

We released 5.36.0 which contains the fix for this issue. Feel free to reach out if the problem persists. Cheers!

ribeiroguilherme avatar Mar 15 '23 16:03 ribeiroguilherme