TIL Thursday: Debugging Credit Card Icons

This week for TIL Thursday I wanted to run through how to troubleshoot a particular issue that we've had a couple of reports about: credit card icons.

Some of our customers have been saying that when they've added or modified a new credit card to the site, they are having a hard time getting the icons to appear on the form where shoppers add a new credit card.

In short, the solution is that the names you use on the backend and in your code must be exactly the same. The longer answer is below.

Three Places to Check

There are three crucial places in the chain that determine what icon to show:

Backend

In NetSuite, go to Setup > Accounting > Accounting Lists. If it's not already that selected, choose "Payment Method" from the Type dropdown. In the table, you will see a list of all payment methods your site accepts. The names of the methods should be your organization's official accounting name for that payment type.

Also on this page, examine an individual payment method. For each there is a tab called Payment Visuals and there should be an entry with the flag "web/standard". While the URL must be provided, it is not (currently, at least) used on the frontend but the flag is.

Utils.js

Under Modules > suitecommerce > Utilities > JavaScript in your site's source code there is a function called paymenthodIdCreditCart which contains a regular expression that checks the number the shopper enters to see what kind of card it is. It then returns a string if it matches one of the values. If you're overriding this module with your own, you'll obviously need to check your customized module.

SC.Configuration.js

Under Modules > suitecommerce > SCA > JavaScript is a property called creditCardIcons. The string returned from Utils.js is used here to specify the location of the image for that credit card.

In all of these instances, the names that you give the credit cards must be exactly the same.

For example, if you have set on the backend that a card is called "American Express" then it must be called this in the site's code (and not, for example, "Amex" or "AmericanExpress").

In the cases we have received around the issue, this has been the main cause.

One final thought, though, is that if you have a custom CreditCard.Edit.Form.View.js module then you may have inadvertently modified or removed the code that handles the credit card icon. You can compare your getContext function with the original.