Cannot Disable Default Credit Card

In some pre-2019.1 implementations of SuiteCommerce Advanced (SCA), customers cannot disable the Make this my default credit card option. This issue occurs when a customer has only one credit card set up as their payment method. In this case, your Commerce website should display a message to inform the customer that a default payment method is required and so their single credit card must remain the default.

Because no message is displayed however, customers may be left confused since the Make this my default credit card box remains checked even after they have attempted to clear it. Therefore, the following workarounds are available:

For SCA Aconcagua implementations with Base Theme 2018.2, you can implement SuiteCommerce Base Theme 2019.1 to correct this issue.
For SCA Kilimanjaro implementations and earlier, you can override the creditcard_edit_form.tpl file as described in the following patch procedures.

To implement this patch, create a custom module to override the creditcard_edit_form.tpl template file, which is part of the CreditCard module.

If you are not familiar with implementing patches for SCA, refer to the following:

Step 1: Create the Override File

Following the instructions and recommendations in the Patch Using Override Mode procedure, create a new directory and file: /Modules/extensions/CreditCard@1.0.0/Templates/creditcard_edit_form.tpl. In the new creditcard_edit_form.tpl file, find and replace the following lines with the provided code sample.

Find the following code:

               {{#if showDefaults}}
   <div class="creditcard-edit-form">
      <label class="creditcard-edit-form-checkbox">
         <input
            type="checkbox"
            id="ccdefault"
            value="T"
            data-unchecked-value="F"
            name="ccdefault"
            {{#if ccdefault}} checked {{/if}}
         >
         {{translate 'Make this my default credit card'}}
      </label>
   </div>
   {{/if}}

And replace it with the following code:

            {{#if showDefaults}}
    <div class="creditcard-edit-form">
        <label class="creditcard-edit-form-checkbox">
            <input
                type="checkbox"
                id="ccdefault"
                value="T"
                data-unchecked-value="F"
                name="ccdefault"
                {{#if ccdefault}} checked disabled {{/if}}
            >
            {{translate 'Make this my default credit card'}}

            {{#if ccdefault}} <i class="creditcard-default-icon" data-toggle="tooltip" title="{{translate 'You need to have at least one card selected by default'}}"></i> {{/if}}
        </label>
    </div>
{{/if}}

Step 2: Prepare the Developer Tools For Your Patch

When preparing the Developer Tools for your patch as described in the Patch Using Override Mode procedure, perform the following actions:

Paste the following sample code into the new ns.package.json file that you create in the Modules directory: /Modules/extensions/CreditCardExtension@1.0.0/ns.package.json

                {
    "gulp": {
        "templates": [
            "Templates/*"
        ]
 },
   "overrides": {
      "suitecommerce/CreditCard@X.Y.Z/Templates/creditcard_edit_form.tpl" : "Templates/creditcard_edit_form.tpl"
   }
}

Important:

You must replace the string, X.Y.Z, with the version of the module in your implementation of SCA.

Open the distro.json file in the root SCA development directory and then add your custom module to the modules object as described in the Patch Using Override Mode procedure. The following sample shows the value to add to the list of existing values that follow the “modules” key.
```
                "modules": {
    "extensions/CreditCardExtension": "1.0.0",
    . . . 

              
```

Step 3: Test and Deploy Your Patch

Follow the instructions provided in the Patch Using Override Mode procedure to test and deploy your patch.

Step 1: Create the Override File

Step 2: Prepare the Developer Tools For Your Patch

Step 3: Test and Deploy Your Patch

Related Topics