Apple Pay

[ChielBruin]

I've set up the integration of this library according to the steps described here: https://mkharibalaji.github.io/react-native-adyen-payment/#/INSTALLATION?id=ios As a result, I am able to pay in the app using credit cards and iDEAL, but I have trouble getting Apple Pay to work properly. At the moment I can make a successful payment (such that it shows in the Adyen transaction overview and is administered correctly by our backend), but the app freezes completely after the Apple Pay dialog closes. After that you are required to force-close the app to get it to respond again.

Steps I've tried to investigate the issue

Note: my experience in iOS development is very limited, so investigating the issue is a bit hard

• See if I missed a step in the installation guide
• Look at the source and try to figure out if the data is parsed correctly. This search is a bit limited by my knowledge of Swift, so not finding an error here does not imply that there is no issue.
• Look in the logs to see if errors are displayed indicating an issue. I did not find any logs indicating an error in handling the response from Adyen. In fact, I also did not see the logs that are present in this library, so I might be doing something wrong there. In this latter case I would gladly investigate further if someone could point me to a way of showing the logs.
• Update the internal Adyen dependency to version 3.8.4. This did not result in any changed behaviour, so I suspect the issue lies in how this library wraps the drop-in

Data received from the backend

{
  "pspReference": ".....",
  "resultCode": "Authorized",
  "amount": {
    "currency": "EUR",
    "value": 700
  },
  "merchantReference": "..."
}

[ChielBruin]

Update

Using debug mode I was able to see the following things:

• In the handle method in the APIClient, the data is received and decoded correctly (and stored in response)
• One line below that the callback is called (completionHandler(.success(response)))
• In the called callback function, the received data is a null-pointer
• For obvious reasons, that breaks stuff

To be continued..

[mickadoua]

Hi @ChielBruin, thanks for your issue, have you succeed to make an apple payment ?

have you an exemple how you call AdyenPayment.startPaymentPromise()

[ChielBruin]

@mickadoua Kind of, I can make credit-card and iDEAL payments correctly and Apple Pay payments work for 99%. The dropin shows the Apple Pay popup, I can authenticate myself to confirm the payment, I get an authorized back from Adyen (and the pay ment also shows up as confirmed in the Adyen customer area), but then the app is frozen when the Apple Pay/Drop-in closes automatically.

The code I use:

const componentData =  {
    scheme: {
      card_public_key: adyenConfig.clientApiKey,
      showStorePaymentField: canStorePaymentDetails,
      showsStorePaymentMethodField: canStorePaymentDetails,
    },
    bcmc: {
      card_public_key: adyenConfig.clientApiKey,
      showStorePaymentField: canStorePaymentDetails,
      showsStorePaymentMethodField: canStorePaymentDetails,
    },
    applepay: {
          apple_pay_merchant_id: adyenConfig.applePayMerchant,
    },
};

 try {
      // Make the payment request
      const result = await AdyenPayment.startPaymentPromise(
        AdyenPayment.DROPIN,
        componentData,
        paymentDetails
      );

     // Handle result
     // ...
} catch (err) {
    // Handle any errors
    // ...
}

[ChielBruin]

After some debugging I've found that in the viewHierarchy there is a RCTModalHostView on top of everything. This might be related to https://github.com/adyen/adyen-ios/issues/517 I will see if I get that solution working

This is the view containing YellowBox

[ChielBruin]

I did some more debugging, this is what I've found:

• What I said a couple comments back about the nullpointer is incorrect, the value is there (Reading is hard)
• Inside the sendSuccess function in AdyenPayment.swift, the resolve callback is called with what seems to be the correct data (containing `resultcode: 'Authorized' for example), but somehow this data never reaches the javascript(typescript) code. Instead, the entire app becomes unresponsive (Although very rarely I can still interact with YellowBox warnings)

[ChielBruin]

I have found the issue :tada:

In AdyenPayment.swift the finish method was defined in (roughly) this way:

func finish(...) {
  ...
  self.sendSuccess(message:msg)
  currentComponent.stopLoading(withSuccess: true) {
    (...).dismiss(animated: true)
  }
}

I am unsure why this does not work for ApplePay, but by reordering the code in the following way it does work:

func finish(...) {
  ...
  currentComponent.stopLoading(withSuccess: true) {
    self.sendSuccess(message:msg)
    (...).dismiss(animated: true)
  }
}

I will open a PR for this later today

[mickadoua]

Thanks for all your debugging information, Unfortunately i cant make a applepay paiement, i create an issues for my bug https://github.com/mkharibalaji/react-native-adyen-payment/issues/55

[mickadoua]

Hello @ChielBruin, I update the Adyen depts to from 3.6.0 to 3.8.0 with some bug related to Apple pay

3.8.0

• Fixes small bug in ApplePayComponent to make sure call backs are invoked when its dismissed.

3.7.0

• Adds a closure to ApplePayComponent to be called in case user cancels.
• Fixes a bug with ApplePayComponent cancellation.

Can you try with this new version ?

[ChielBruin]

I am not able to test this currently, but I will do so when I am back in the office