In this blog post, we troubleshoot a common Apple Pay error that occurs on SFCC platforms, how it impacts the user experience, and how you can troubleshoot it.
Introduction to the Salesforce Commerce Cloud Apple Pay Error
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 behavior and unclear indications when their Apple Pay payment fails to go through.
This is currently a known issue in SFCC and is tracked here.
Why Does This Salesforce Commerce Cloud Apple Pay Error Occur?
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 the previous step, etc.)
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 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.
While there is no direct solution for this bug, At Noibu, we work with our customers to implement a workaround that prevents any further disruption in your site experience.
Noibu: A Trusted Error Monitoring Platform to Detect Third-Party Errors
No matter how spotless your code is, encountering third-party errors is inevitable. With the countless integrations and plugins on your site, you need a proactive error monitoring workflow that helps you detect these in real time so you can address them efficiently to prevent further damage to customer experience and your top line.
Noibu is an eCommerce error and health monitoring platform that not only flags all first-party and third-party errors on your site in real time but also pinpoints the exact line of code that needs fixing along with AI-generated English explanations of technical bugs.
With Noibu, you can be alerted of any third-party errors like the Apple Pay SFCC error as and when they occur so you can work with the particular team to resolve the issue and prevent any further negative impact that it may have on your customer journeys. With errors like the one we discussed in this blog, our team works closely with yours to suggest a workaround to avoid any disruption in your website while you work with the third party to implement the solution.
To understand how Noibu can transform your error detection and resolution workflow, sign up for a free checkout audit of your site to uncover revenue-impacting errors that could be existing in plain sight.
