Merchant 2.0 From Key issue

[pmanojhs]

When Merchant 2.0 is enabled and trying to making payment . It shows invalid signature because magento for key generation .

[arunkumarkannuru]

yeah. I too face the same issue. form_key is appended to tokenization request. Due to this additional parameter signature mismatch. How to resolve this?

[pmanojhs]

in the checkout.js i have added the another field in the auto generated fro called "form_key" with disabled property . so that when the form get submitted it wont be posted . adding the field stops from the form_key auto generation .

$('').attr({
type: 'hidden',
id: 'test',
name:'form_key',
value: 'test'
}).appendTo($('#'+formId));
$("input[name='form_key']").prop("disabled", true);
$('#'+formId).attr('action', response.url);

[arunkumarkannuru]

in the checkout.js i have added the another field in the auto generated fro called "form_key" with disabled property . so that when the form get submitted it wont be posted . adding the field stops from the form_key auto generation .

$('').attr({
type: 'hidden',
id: 'test',
name:'form_key',
value: 'test'
}).appendTo($('#'+formId));
$("input[name='form_key']").prop("disabled", true);
$('#'+formId).attr('action', response.url);

@pmanojhs Great.
Can u please share the directory path of this file and also if possible please attach or paste that file.
looking forward
Thanks a lot.

[pmanojhs]

File path : app/code/Payfort/Fort/view/frontend/web/js/view/payment/method-renderer/payfort_fort_cc_merchant_page2-method.js

[pmanojhs]

/**

• Payfot_Fort Magento JS component

• @category Payfort

• @Package Payfot_Fort
  */
  /browser:true/
  /global define/
  define(
  [
  'ko',
  'jquery',
  'Magento_Payment/js/view/payment/cc-form',
  'Magento_Checkout/js/model/quote',
  'underscore',
  'Magento_Checkout/js/model/full-screen-loader',
  'Magento_Checkout/js/action/set-payment-information',
  'Magento_Checkout/js/action/place-order',
  'Magento_Checkout/js/model/payment/additional-validators',
  'Magento_Ui/js/model/messageList',
  'mage/translate',
  'uiRegistry',
  'mage/utils/wrapper'
  ],
  function (ko, $, Component, quote, _, fullScreenLoader, setPaymentInformationAction, placeOrderAction, additionalValidators, messageList, $t) {
  'use strict';
  return Component.extend({
  placeOrderHandler: null,
  validateHandler: null,
  defaults: {
  template: 'Payfort_Fort/payment/payfort-form-merchant-page2',
  isCcFormShown: true,
  },

       getCode: function() {
           return 'payfort_fort_cc';
       },
       
       isActive: function() {
           return true;
       },
       
       /**
        * @returns {exports.context}
        */
       context: function() {
           return this;
       },
       
       getInstructions: function() {
           return window.checkoutConfig.payment.payfortFort.payfort_fort_cc.instructions;
       },
       
       // Overwrite properties / functions
       redirectAfterPlaceOrder: false,
       
       /**
        * @param {Function} handler
        */
       setPlaceOrderHandler: function (handler) {
           this.placeOrderHandler = handler;
       },
       
       /**
        * @param {Function} handler
        */
       setValidateHandler: function (handler) {
           this.validateHandler = handler;
       },
       
       /**
        * @returns {Boolean}
        */
       isShowLegend: function () {
           return true;
       },
       
       /**
        * @returns {*|String}
        */
       canInitialise: function () {
           return true;
       },
       
       /**
        * @function
        */
       initVars: function () {
           this.canSaveCard = false;
           this.isPaymentProcessing = null;
           this.quoteBaseGrandTotals = quote.totals()['base_grand_total'];
       },
       
       /**
        * @override
        */
       initObservable: function () {
           var self = this;
  
           this.initVars();
           this._super()
               .track('availableCcValues')
               .observe([
                   'paymentMethodNonce',
                   'verified'
               ]);
  
           // subscribe on billing address update
           /*quote.billingAddress.subscribe(function () {
               self.updateAvailableTypeValues();
           });*/
  
           return this;
       },
       
       /**
        * @override
        */
       getData: function () {
           return {
               'method': this.item.method,
               'additional_data': {
                   
               }
           };
       },
       
       /**
        * Get list of available CC types
        */
       /*getCcAvailableTypes: function () {
           return window.checkoutConfig.payment.ccform.availableTypes[this.getCode()];
       },*/
       
       /**
        * @returns {*}
        */
       isCcDetectionEnabled: function () {
           return true;
       },
       
       
       /**
        * @returns {String}
        */
       getCssClass: function () {
           return 'field type required';
       },
       
       /**
        * Update list of available CC types values
        */
       updateAvailableTypeValues: function () {
           this.availableCcValues = this.getCcAvailableTypesValues();
       },
       
       /**
        * Prepare and process payment information
        */
       preparePayment: function () {
           var self = this,
               cardInfo = null;
  
           /*if (this.validateHandler() && this.validate() && additionalValidators.validate()) {
               
           }
           return false;*/
           if (this.validateHandler()) {
               this.messageContainer.clear();
               this.quoteBaseGrandTotals = quote.totals()['base_grand_total'];
  
               /*this.isPaymentProcessing = $.Deferred();
               $.when(this.isPaymentProcessing).done(
                   function () {
                       self.placeOrder();
                   }
               ).fail(
                   function (result) {
                       self.handleError(result);
                   }
               );*/
  
               cardInfo = {
                   number: this.creditCardNumber(),
                   expirationMonth: this.creditCardExpMonth(),
                   expirationYear: this.creditCardExpYear(),
                   cvv: this.creditCardVerificationNumber()
               };
               this.placeOrder();
           }
       },
       
       afterPlaceOrder: function() {
           var cardInfo = {
                   number: this.creditCardNumber(),
                   expirationMonth: this.creditCardExpMonth(),
                   expirationYear: this.creditCardExpYear(),
                   cvv: this.creditCardVerificationNumber(),
                   holderName: $('#payfort_fort_cc_cc_holder_name').val()
               };
           var expMonth = cardInfo.expirationMonth;
           if(expMonth.length == 1) {
               expMonth = '0'+expMonth;
           }
           var expYear = cardInfo.expirationYear;
           expYear = expYear.substr(expYear.length - 2);
           var expiryDate = expYear+''+expMonth;
           cardInfo.expiryDate = expiryDate;
           $.ajax({
               url: window.checkoutConfig.payment.payfortFort.payfort_fort_cc.ajaxUrl,
               type: 'get',
               context: this,
               dataType: 'json',
   			beforeSend: function(xhr){
  
   			},
               success: function(response) {
                   var preparedData,
                       msg;
                   if (response.success) {
                       var formId = 'frm_payfort_fort_payment';
                       if(jQuery("#"+formId).size()) {
                           jQuery( "#"+formId ).remove();
                       }
                       $('<form id="'+formId+'" action="#" method="POST"></form>').appendTo('body');
                       response.params.card_number = cardInfo.number;
                       response.params.card_holder_name = cardInfo.holderName;
                       response.params.card_security_code = cardInfo.cvv;
                       response.params.expiry_date = cardInfo.expiryDate;
                       $.each(response.params, function(k, v){
   					
                           $('<input>').attr({
                               type: 'hidden',
                               id: k,
                               name: k,
                               value: v
                           }).appendTo($('#'+formId));
   						
                       });
   					$('<input>').attr({
                               type: 'hidden',
                               id: 'test',
                               name:'form_key',
                               value: 'test'
                           }).appendTo($('#'+formId));
   					$("input[name='form_key']").prop("disabled", true);
                       $('#'+formId).attr('action', response.url);
   					
                       $('#'+formId).submit();
                       return false;
                   } else {
                       msg = response.error_messages;
                       if (typeof (msg) === 'object') {
                           alert({
                               content: msg.join("\n")
                           });
                       }
                       if (msg) {
                           alert({
                               content: msg
                           });
                       }
                   }
               }
           });
  
           return false;
       },
   });
  

  }
  );

[arunkumarkannuru]

@pmanojhs
Thank u so much for your time and consideration.
you have to get the reward for this. you saved my time, I am working on this issue since from one week. your solution works.
please drop an email at [email protected] or drop a message in Skype : engarunkumar
Thank u once again and looking forward.

[DeyaZ88]

Hi all,
Sorry for the delayed response.

we will check this issue and try to solve it ASAP.
@pmanojhs thank you for your contribution, I will check your solution and apply it to our plugin if applicable.

[DeyaZ88]

@pmanojhs can you provide me with magento version no that you are using ?

[DeyaZ88]

Hi Guys,

It seems that there is a plugin you installed on you magento, this plugin is appending form_key input to any form including our form.

[smoizs]

@DeyaZ88 @pmanojhs form_key is not due to a plugin. This is added by Magento 2.3. Magento has a form key validation in place for all POST non-AJAX requests. Some questions have been asked on other channels too https://magento.stackexchange.com/questions/262102/how-form-key-is-forcefully-required-in-the-magento-2-3 or https://magento.stackexchange.com/questions/135986/why-form-key-is-added-in-every-page-in-magento-2/135987

form key always existed, but in 2.3 it is now mandatory.

We fixed this in our fork of Payfot by white listing the parameters in an array that should be used for signature calculation and ignore the rest in a post request. Just before calculating signature, sanitize the post request to only include the variables required to calculate the signature.

[DeyaZ88]

@smoizs than you for your respond, I will install magento 2.3 to try it out.

[DeyaZ88]

Hi All,

I fixed this issue by disabling form_key inside Payfort form.

I've pushed the change to my account https://github.com/DeyaZ88/magento2-payfort

can anyone try it and confirm if its working, if confirmed I will proceed to merge it with Payfort account.

[DeyaZ88]

the change is now pushed to master branch, please update your plugin.