Apple Pay, Payment Not Complete Web JS

Question

I have followed the documentation on apple website regarding apple pay.

onValidateMerchant and completeMerchantValidation work perfectly but right after that it jumps to oncancel.

I have messages at are printed to the screen within onpaymentselected and onpaymentauthorized but they are never printed.

I have added a try catch to catch any errors that pop, turns out onpaymentselect and onpaymentauthorized are run before onValidateMerchant and completeMerchantValidation.

applePayButton.addEventListener("click", function(){

const request = {
    countryCode: 'US',
    currencyCode: 'USD',
    merchantCapabilities: [
        'supports3DS'
    ],
    supportedNetworks: [
        'visa',
        'masterCard',
        'amex',
        'discover'
    ],
    lineItems: [{
            label: 'Amount',
            amount: 0.95,
        },
        {
            label: 'Tax',
            amount: 0.05,
        }
    ],
    total: {
        label: 'Total',
        amount: 10,
    }
};
var session = new ApplePaySession(10, request);
session.begin();

try{
    session.onvalidatemerchant = function(event){
        printMessage("starting session.onvalidatemerchant" + JSON.stringify(event));

        var promise = performValidation(event.validationURL);

        promise.then(function(merchantSession) {
            printMessage("Merchant Session: "+ JSON.stringify(merchantSession));
            session.completeMerchantValidation(merchantSession);
        });
    }
}
catch(error){
    printMessage("On Validate Merchant Error: " + error)
}

try{
    printMessage("onpaymentmethodselected");

    session.onpaymentmethodselected = function(event) {
        printMessage("In On Payment Method Selected");
        //var myPaymentMethod = event.paymentMethod;

        const update = {};
        session.completePaymentMethodSelection(update);
    };

}
catch(error){
    printMessage("On Payment Method Selected Error: " + error)
}

try{
    printMessage("onpaymentauthorized");
    session.onpaymentauthorized = function(event) {
        printMessage("starting session.onpaymentauthorized");

        var applePaymentToken = event.payment.token;

        printMessage("Token" + applePaymentToken);

        // Define ApplePayPaymentAuthorizationResult
        session.completePayment(session.STATUS_SUCCESS);
    };

}
catch(error){
    printMessage("On Payment Authorized Error: " + error)
}

try{
    session.oncancel = function(event) {
        printMessage("starting session.oncancel" + JSON.stringify(event));

        // Payment cancelled by WebKit
    };
}
catch(error){
    printMessage("On Cancel Error: " + error)
}

});

This is the message that comes after payment Not Complete

Session: Step 1: applePay working

Step 2: onpaymentmethodselected

Step 3: onpaymentauthorized

Step 4: starting session.onvalidatemerchant{"isTrusted":true}

Step 5: Complete Merchant Validation:

Step 6: starting session.oncancel{"isTrusted":true}

Answer 1

I had the same issue, and it seems that when the onvalidatemerchant fails with this {"isTrusted":true} is because:

• You don't have fingerprint enabled, or
• You're not using Safari, or
• Your call to validate on the backend is wrong somehow

If these parts are working, then you should see the Apple Pay modal and should be able to make everything work (hopefully)