Apple Pay integration shows "canceledByShopper"

[dcosmin2003]

Hello,

I'm trying to integrate Apple Pay.
I mention that I have added the certificates and Apple Pay shows active in the Adyen Dashboard (Test & Live also).
I'm also testing on a real device with sandbox apple pay on it.

This is how my configuration looks like:

const configuration = {
    environment: 'test',
    clientKey: 'test_YZK...',
    merchantID: 'merchant.com.adyen.customName.test',
    merchantName: 'customName', // not sure where to get this from
    allowOnboarding: true,
    countryCode: 'RO',
    amount: { currency: 'RON', value: 1000 },
    returnUrl: 'customAppName://payment'
};

Then I have the paymentMethods object which has 'applepay' in it.

And here's my component code:

const ApplePayView = () => {
    const { start } = useAdyenCheckout();

    const _clickApplePay = () => {
         console.log('try apple pay')
         start('applepay')
    }
      
    return (
        <TouchableOpacity onPress={() => _clickApplePay()}>
            <Text style={{fontSize: 40}}>Apple Pay</Text>
        </TouchableOpacity>
    );
};

<AdyenCheckout
    config={configuration}
    paymentMethods={paymentMethods}
    onSubmit={(paymentData, component) => {
        /* Call your server to make the `/payments` request */
        console.log({paymentData})
    }}
    onAdditionalDetails={(paymentData, component) => {
          /* Call your server to make the `/payments/details` request */
    }}
    onError={(error, component) => {
          /* Handle errors or termination by shopper */
          console.log('we close because of: ', error);
    }}>
          <ApplePayView />
</AdyenCheckout>

And always is going to onError with the following error:

 {"description": "Payment canceled by shopper", "errorCode": "canceledByShopper", "message": "Payment canceled by shopper"}

Any idea what could go wrong or how can I debug this further?

Thank you!

[descorp]

Hey @dcosmin2003

ApplePay dismisses itself after some short period. Before timeout, the merchant's app must make a \payment API call and then conduct the payment via component.hide(result)(where the result - is a success or failure of \payment).

If component.hide(result) is not called within this time interval - ApplePay automatically dismisses itself.
Unfortunately, from SDK's point of view, it is impossible to tell if the shopper taped "X" or ApplePay sheet decided to dismiss itself, nor prolong this period.

Read more