In-app-payments-react-native-plugin error when using apple pay

Questions
1

Hello

Our team is having trouble integrating Apple Pay into our mobile app with the in-app-payments-react-native-plugin.

We have raised an issue in the repo here: https://github.com/square/in-app-payments-react-native-plugin/issues/86 however, we have a time critical deadline so cross posting here as well for some visibility.

Here are the high level details:

Describe the issue

I’m trying to complete a payment via Apple Pay but my app crashes after i call SQIPApplePay.requestApplePayNonce . I have everything well configured (Merchant ID, capabilities). I am running this on an IOS X emulator.

Here is the log:

Application tried to present a nil modal view controller on target <UIViewController: 0x7faf50512d90>.
(
  "4   Foundation                          0x000000010f7a0259 -[NSObject(NSThreadPerformAdditions) performSelectorOnMainThread:withObject:waitUntilDone:] + 124",
  "5   app                       0x000000010cbe410f HandleException + 479",
  "6   app                       0x000000010cbe4744 -[ReactNativeExceptionHandler handleException:] + 436",
  "7   Foundation                          0x000000010f7a00de -[NSObject(NSThreadPerformAdditions) performSelector:onThread:withObject:waitUntilDone:modes:] + 947",
  "8   Foundation                          0x000000010f7a0259 -[NSObject(NSThreadPerformAdditions) performSelectorOnMainThread:withObject:waitUntilDone:] + 124"
)

To Reproduce

Steps to reproduce the issue.

For example -

  1. Initialize the SDK
  2. Initialize Apple Pay
  3. call await SQIPApplePay.requestApplePayNonce
    Here the piece of code that reproduce the issue.
  return await SQIPApplePay.requestApplePayNonce(
    {
      countryCode: 'us',
      currencyCode: 'us',
      price: '1.25',
      summaryLabel: 'Test'
    },
    async (cardDetails: CardDetails) => {
      //success
      this.setCardToken({
        cardToken: cardDetails.nonce,
        cardType: cardDetails.card.lastFourDigits,
        last4: cardDetails.card.lastFourDigits,
      });
    },
    async (error: Error) => {
      //failure
      this.handlePaymentError(error);
    },
    async () => {
      await this.completePayment()
    }
  );

Expected behavior

The Apple Pay finish and return me the valid token.

Environment (please complete the following information):

  • platform: iOS
  • OS and version: iOS11
  • dev environment: MacOS
  • In-App Payments Plugin version: [e.g. 1.4.0]

react-native info output:

System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4750HQ CPU @ 2.00GHz
    Memory: 31.06 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 13.12.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.2 => 0.63.2 
  npmGlobalPackages:
    react-native: 0.61.5