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

Bắt đầu với src/webpack:/tappy/node_modules/@nativescript/apple-pay/payment-authorization-view-controller-delegate.ios.js tại dòng 42, nơi xảy ra lỗi nghiêm trọng sau khi một phương thức thanh toán được chọn. Tái hiện luồng Vue bằng request createPaymentRequest được hiển thị và kiểm tra việc xử lý ủy quyền của delegate. Hoàn thành khi việc chọn một phương thức thanh toán không còn khiến ứng dụng kết thúc và có thể đi đến DidAuthorizePaymentHandler.