Introduction

The Salesforce Commerce Cloud (SFCC) platform encounters a common issue within its Apple Pay integration code where any server errors that occur during the Apple Pay process are not processed properly on the client-side. This can cause frustration or friction to customers, as they may encounter unexpected site behaviour and unclear indications when their Apple Pay payment fails to go through.

This is currently a known issue in SFCC and tracked here.

Issue Overview

The common error message that appears in Noibu is as follows:

**JS Error: Cant find variable: error**

It occurs in the file internal/jscript/applepay.js within the getRequest() function:

/**
         * Retrieves Apple Pay request info from the server.
         */
        function getRequest() {
            getJson(action.getRequest).then(function(response) {
                request = Object.assign({}, response.request);
                processDirectives();
                processServerResponse(response);
            }).catch(function(err) {
                console.error(err);
                **processServerResponse(error.response);**
            });
        }

As is immediately apparent, the error occurs when processServerResponse(error.response); is called. This is because the variable error doesn’t exist. In the function scope, the variable err is instead used to represent the error object.

Since error.response doesn’t exist, the processServerResponse function isn't called properly to handle the error that is being thrown. Looking at the processServerResponse function shows the resulting outcome:

function processServerResponse(response) {
            if (!response) {
                return;
            }
            if (typeof response.redirect !== 'undefined') {
                redirect = response.redirect;
            }
            dispatchEvent(response.event);
        }

No server error response event means the dispatchEvent function isn’t called:

function dispatchEvent(event) {
            if (!event || !event.name) {
                return;
            }
            document.body.dispatchEvent(new CustomEvent(event.name, {
                bubbles: true,
                detail: event.detail
            }));
        }

The document.body page node never receives the event and therefore won’t be able to carry out any server error handling logic (e.g. displaying an error message, refreshing the page, returning to previous step, etc.)

Solution

Unfortunately, although the fix for this error is straightforward, it cannot be directly actioned as it is part of the built-in SFCC code. If you do encounter this error, we recommend you add a report to the known bug page for this issue on the SFCC support site and/or contact SFCC support.