Uncaught TypeError: undefined is not an object (evaluating 'applePaySession.completeMerchantValidation') with successful apple pay payment

Question

So the user's payment is going through but some value is coming up undefined when checking compatibility and I just can't figure out what's wrong here. Here's my code that generates the error:

setCanDisplayApplePay() {
            var client = new window.usaepay.Client(this.publicKey);
            var applePayConfig = {
                targetDiv: 'apple-pay-compat-test',
                displayName: 'ApplePay',
                paymentRequest: {
                    total: {
                        label: this.name,
                        amount: 0.01,
                        type: 'final'
                    },
                    requiredBillingContactFields: [
                        'postalAddress'
                    ],
                    requiredShippingContactFields: [
                        'name',
                        'phone',
                        'email'
                    ],
                    countryCode: 'US',
                    currencyCode: 'USD'
                }
            };
            var applePay = client.createApplePayEntry(applePayConfig);
            applePay.checkCompatibility().then((res) => {
                this.canDisplayApplePay = true;
            }).catch((err) => {
                this.canDisplayApplePay = false;
            });
        },

Answer 1

from the provided code, it seems that you are trying to set up Apple Pay compatibility for a payment flow. The code uses the usaepay library to handle Apple Pay integration.

The error you mentioned ("some value is coming up undefined") could be related to the applePay.checkCompatibility() method.

Make sure you have imported the required library correctly, and it's available in the window.usaepay object. Check if the this.publicKey variable is correctly defined and contains a valid API key. Verify that the targetDiv specified in the applePayConfig object exists in the HTML markup. Check if there are any errors in the console that might give you more information about the undefined value. Here's a slightly modified version of your code with additional logging statements to help diagnose the issue:

setCanDisplayApplePay() {
    var client = new window.usaepay.Client(this.publicKey);
    var applePayConfig = {
        targetDiv: 'apple-pay-compat-test',
        displayName: 'ApplePay',
        paymentRequest: {
            total: {
                label: this.name,
                amount: 0.01,
                type: 'final'
            },
            requiredBillingContactFields: [
                'postalAddress'
            ],
            requiredShippingContactFields: [
                'name',
                'phone',
                'email'
            ],
            countryCode: 'US',
            currencyCode: 'USD'
        }
    };
    var applePay = client.createApplePayEntry(applePayConfig);
    console.log("Checking Apple Pay compatibility...");
    applePay.checkCompatibility()
        .then((res) => {
            this.canDisplayApplePay = true;
            console.log("Apple Pay is compatible.");
        })
        .catch((err) => {
            this.canDisplayApplePay = false;
            console.error("Error checking Apple Pay compatibility:", err);
        });
}

hope this could help