Apple Pay plugin: "The data couldn't‚ [...] isn't in the correct format."

Environment:

• Using Vue.
• Simulator on iPhone 11 / iOS 14.5

Setup

Registering the button in my main.js like this:

import { ApplePayBtn } from '@nativescript/apple-pay';
Vue.registerElement('ApplePayBtn', () => ApplePayBtn, {});

In component

Using the button like this:

<ApplePayBtn @tap="buy" buttonType="Buy" />

When clicking the button, here's my buy code (commented some stuff out as we haven't reached that point yet)

methods.buy:

async buy(args) {
    console.log('buy', args.object)

    const applePayBtn = args.object // as ApplePayBtn;
    applePayBtn.once(ApplePayEvents.DidAuthorizePaymentHandler, async (args /*: AuthorizePaymentEventData*/) => {
        // ❌ We never get here as the app crashes before
        console.log('DidAuthorizePaymentHandler', ApplePayEvents.DidAuthorizePaymentHandler);

        // this is where you do backend processing with your payment provider (Stripe, PayPal, etc.)
        // this payload is just a sample, your payload to a provider will likely be different
        // you can see here how to access the encrypted values from Apple Pay inside the `args.data.paymentData`
        const payloadToBackend = {
            transaction_type: 'purchase',
            merchant_ref: args.data.paymentData.header.transactionId,
            method: '3DS',
            '3DS': {
                // merchantIdentifier: <SomeIdentifierFromPaymentProvider>,
                // data: args.data.paymentData.data,
                // signature: args.data.paymentData.signature,
                // version: args.data.paymentData.version,
                // header: args.data.paymentData.header
            }
        };

    });


    // these are the items your customer is paying for
    const paymentItems = [
        {
            amount: 20.50,
            label: 'Balance',
            type: ApplePayPaymentItemType.Final,
        },
    ]// as ApplePayItems[];

    const request = {
        paymentItems,
        merchantId: appleMerchantID, // the merchant ID for this app
        merchantCapabilities: ApplePayMerchantCapability.ThreeDS,
        countryCode: 'US',
        currencyCode: 'USD',
        shippingContactFields: [],
        billingContactFields: [],
        supportedNetworks: [ApplePayNetworks.Amex, ApplePayNetworks.Visa, ApplePayNetworks.Discover, ApplePayNetworks.MasterCard],
    } // as ApplePayRequest;

    // `createPaymentRequest` will call into the Apple Pay SDK and present the user with the payment sheet for the configuration provided
    await applePayBtn.createPaymentRequest(request).catch((err) => {
        console.log('Apple Pay Error', err);
    });

After clicking the button createPaymentRequest() seem to create it all right because the Apple Pay stuff comes up but after selecting payment method

Full error

***** Fatal JavaScript exception - application has been terminated. *****
NativeScript encountered a fatal error: Uncaught Error: The data couldn’t be read because it isn’t in the correct format.
at
PKPaymentAuthorizationViewControllerDelegateImpl.paymentAuthorizationViewControllerDidAuthorizePaymentHandler(file: src/webpack:/tappy/node_modules/@nativescript/apple-pay/payment-authorization-view-controller-delegate.ios.js:42:0)
(CoreFoundation) *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: Uncaught Error: The data couldn’t be read because it isn’t in the correct format.
at
PKPaymentAuthorizationViewControllerDelegateImpl.paymentAuthorizationViewControllerDidAuthorizePaymentHandler(file: src/webpack:/tappy/node_modules/@nativescript/apple-pay/payment-authorization-view-controller-delegate.ios.js:42:0)
', reason: '(null)'
*** First throw call stack:
(
0   CoreFoundation                      0x0000000114497fba __exceptionPreprocess + 242
1   libobjc.A.dylib                     0x0000000114341ff5 objc_exception_throw + 48
2   NativeScript                        0x000000010cd28914 _ZN3tns21NativeScriptException15OnUncaughtErrorEN2v85LocalINS1_7MessageEEENS2_INS1_5ValueEEE + 914
3   NativeScript                        0x000000010d188f65 _ZN2v88internal14MessageHandler25ReportMessageNoExceptionsEPNS0_7IsolateEPKNS0_15MessageLocationENS0_6HandleINS0_6ObjectEEENS_5LocalINS_5ValueEEE + 341
4   NativeScript                        0x000000010d188dd4 _ZN2v88internal14MessageHandler1

src/webpack:/tappy/node_modules/@nativescript/apple-pay/payment-authorization-view-controller-delegate.ios.js の、支払い方法の選択後に致命的エラーが発生する 42 行目から始めます。示されている createPaymentRequest リクエストを使って Vue のフローを再現し、delegate の認証処理を調査します。支払い方法を選択してもアプリが終了せず、DidAuthorizePaymentHandler に到達できれば完了です。