Users Required to Re-enter Credit Card Payment Method Details on Payment Page

In some cases, users making a purchase must re-enter credit card payment method details on the payment page to successfully place an order.

Note:

Before proceeding, familiarize yourself with the Best Practices for Customizing SCA.

Step 1: Extend the OrderWizard.Module.PaymentMethod.Creditcard.js File

This step explains how to extend the OrderWizard.Module.PaymentMethod.Creditcard.js file, which is located in the OrderWizard.Module.PaymentMethod@x.y.z module. You can download the code samples described in this procedure here: OrderWizardPaymentMethodExtension-Elbrus and Kilimanjaro.zip

If you have not done so already, create a directory to store your custom module.

Following best practices, name this directory extensions and place it in your Modules directory. Depending on your implementation and customizations, this directory might already exist.
Open your extensions directory and create a custom module to maintain your customizations.

Give this directory a unique name that is similar to the module being customized. For example:

Modules/extensions/OrderWizardPaymentMethodExtension@1.0.0
In your new module, create a subdirectory called JavaScript.
In your new JavaScript subdirectory, create a JavaScript file.

Give this file a unique name that is similar to the file being modified. For example:

OrderWizard.Module.PaymentMethod.Creditcard.Extension.js

Open this file and overwrite the following method as described below:

_submit()

Your file should match the following code snippet:

                define(
   'OrderWizard.Module.PaymentMethod.Creditcard.Extension'
,   [
      'Utils'
   ,   'OrderWizard.Module.PaymentMethod'
   ,   'underscore'
   ,   'jQuery'
   ,   'Profile.Model'
   ]
,   function (
      Utils
   ,   OrderWizardModulePaymentMethod
   ,   _   
,   jQuery
   ,   ProfileModel   )
{
   'use strict';
   _.extend(OrderWizardModulePaymentMethodCreditcard.prototype,

      //@method submit
       submit: function ()
      {
         // This order is bing payed with some other method (Gift Cert probably)
         if (this.wizard.hidePayment())
         {
            return jQuery.Deferred().resolve();
         }

         var self = this;

         if (this.requireccsecuritycode)
         {
            this.isSecurityNumberInvalid = false;
            // we need to store this temporally (frontend) in case a module in the same step
            // fails validation, making the credit card section re-rendered.
            // We don't want the user to have to type the security number multiple times
            this.ccsecuritycode = this.$('input[name="ccsecuritycode"]').val();
         }

         // if we are adding a new credit card
         if (this.creditcardView)
         {
            var fake_event = jQuery.Event('click', {
                  target: this.creditcardView.$('form').get(0)
               })
            ,   result = this.creditcardView.saveForm(fake_event);

            if (!result || result.frontEndValidationError)
            {
               // There were errors so we return a rejected promise
               return jQuery.Deferred().reject({
                  errorCode: 'ERR_CHK_INCOMPLETE_CREDITCARD'
               ,   errorMessage: _('The Credit Card is incomplete').translate()
               });
            }

            var save_result = jQuery.Deferred();

            result.done(function (model)
            {
               self.creditcardView = null;

               ProfileModel.getInstance().get('creditcards').add(model, {
                  silent: true
               });

               self.setCreditCard({
                  model: model
               });

               save_result.resolve();
            }).fail(function (error)
            {
               save_result.reject(error.responseJSON);
            });

            return save_result;
         }
         // if there are already credit cards
         else
         {
            this.setSecurityNumber();

            OrderWizardModulePaymentMethod.prototype.submit.apply(this, arguments);

            this.setCreditCard({ 
               model: this.paymentMethod.get('creditcard')
             });

            return this.isValid().fail(function (error)
            {
               if (error === self.securityNumberErrorMessage)
               {
                  self.isSecurityNumberInvalid = true;
               }

            }).done(function ()
            {
               self.isSecurityNumberInvalid = false;

            }).always(function ()
            {
               // Call self.render() instead of self._render() because the last one didn't asign the events to the DOM
               self.render();
            });
         }
      }
   });
});

Save the file.

Step 2: Prepare the Developer Tools for Your Customizations

Open the OrderWizardPaymentMethodExtension@1.0.0 module.
Create a file in this module and name it ns.package.json.

Modules/extensions/OrderWizardPaymentMethodExtension@1.0.0/ns.package.json

Build the ns.package.json file using the following code:

                {
   "gulp": {
      "javascript": [
         "JavaScript/*.js"
      ]
   }
}

Save the ns.package.json file.
Open the distro.json file.

This file is located in the top-level directory of your SuiteCommerce Advanced source code.

Add your custom module to the modules object to ensure that the Gulp tasks include it when you deploy.

In this example, the extensions/OrderWizardPaymentMethodExtension module is added at the beginning of the list of modules. However, you can add the module anywhere in the modules object. The order of precedence in this list does not matter.

                {
    "name": "SuiteCommerce Advanced Elbrus Release",
    "version": "2.0",
    "buildToolsVersion": "1.2.1",
    "folders": {
            "modules": "Modules",
            "suitecommerceModules": "Modules/suitecommerce",
            "extensionsModules": "Modules/extensions",
            "thirdPartyModules": "Modules/third_parties",
            "distribution": "LocalDistribution",
            "deploy": "DeployDistribution"
    },
            "modules": {
            "extensions/OrderWizardPaymentMethodExtension": "1.0.0",
            "extensions/Configuration.Extension": "1.0.0",
            "extensions/SiteSettings.Extension": "1.0.0",
            "extensions/MyExampleCartExtension1": "1.0.0",
            "extensions/MyExamplePDPExtension1": "1.0.0",
            "extensions/MyExamplePDPExtension2": "1.0.0",
            "suitecommerce/Account": "2.3.0",
            ...

Include the module definition (OrderWizard.Module.PaymentMethod.Creditcard.Extension) in the dependencies array of the javascript object within the SC.Checkout.Starter entryPoint. You must include this file after the module you are extending. Your distro.json file should look similar to the following:

                //...
"tasksConfig": {
//...
"javascript": [
      {
//...
      "entryPoint": "SC.Checkout.Starter",
      "exportFile": "checkout.js",
      "dependencies": [
      //...
      "StoreLocator",
      "OrderWizard.Module.PaymentMethod.Creditcard.Extension"
   ],
//...

Save the distro.json file.

Step 3: Deploy Your Extension

Deploy your source code customizations to your NetSuite account and test the functionality. See Deploy SCA Customizations to NetSuite for details.

Note:
Since this patch modifies a SuiteScript file, changes are not visible in your local environment. SuiteScript files run on the server and must be deployed to NetSuite to take effect.
Confirm your results.

After a successful deployment, your site properly completes the purchase process using the credit card payment method.

Step 1: Extend the OrderWizard.Module.PaymentMethod.Creditcard.js File

Step 2: Prepare the Developer Tools for Your Customizations

Step 3: Deploy Your Extension

Related Topics