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

[mahmoudajawad]

@bradmartin, thank for your reply. I’ll spare sometime for testing on an iphone later, but wanted to hear from you first. I’ll have a look and revert back here with what I find.

[NathanWalker]

@KATT when you get a chance could you try something? Open this file:

code node_modules/@nativescript/apple-pay/payment-authorization-view-controller-delegate.ios.js

On line 42, change it to this:

var pData = NSJSONSerialization.JSONObjectWithDataOptionsError(payment.token.paymentData, NSJSONReadingOptions.MutableContainers);

Save that and try in your app directly to see if any better. If you still see issue, that error is usually related to an unfinished json string (still receiving the full json data) - see here for few more suggestions you could try - if you find one the fixes your case we can add some extra condition handling in there: https://stackoverflow.com/questions/37825284/the-data-couldn-t-be-read-because-it-isn-t-in-the-correct-format