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

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: 

Extend the OrderWizard.Module.PaymentMethod.Creditcard.js File

1. 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.zipIf 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.
2. 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
3. In your new module, create a subdirectory called JavaScript.
4. 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
5. Open this file and overwrite the following method as described below:
6. _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();
        });
     }
  }

});
});