How to to add authorize.net direct post payment method in Magento 2 .

There are two ways to add authorize.net Direct post payment method to a custom checkout page .

  • Use template and js module in magento core module
  • Create new js model and new credit card form

Use template and js module in magento core module

  1. vendor/magento/module-authorizenet/view/frontend/web/template/payment/authorizenet-directpost.html
  2. vendor/magento/module-authorizenet/view/frontend/web/js/view/payment/method-renderer/authorizenet-directpost.js

Create new js model and new credit card form

Template file:

 <iframe id="webpos-payment-iframe" allowtransparency="true" frameborder="0" name="iframeDirectPost"

           style="width: 100%; background-color:transparent; display:none;"

           src="">

   </iframe>

   <div class="col-sm-12">

                   <form id="form-checkout-creditcard">                        

                           <div class="input-box">

    <select id="checkout_cc_type"> </select><!-- Credit card type -->

                           </div>

<div class="input-box">

     <input type=”text” id="checkout_cc_number">  <!-- Credit card number -->

                           </div>

<div class="input-box">

      <select id="checkout_cc_exp_month"> </select> <!-- Credit card date time →

      <select id="checkout_cc_exp_year> </select> <!-- Credit card date time -->

                           </div>

<div class="input-box">

       <input type=”text” id="checkout_cc_number"> <!-- Credit card CVV -->

                           </div>                             

                   </form>

    <button data-bind="click: placeOrder()">

           <label>Place Order</label>

    </button>

     </div>

JS model file function:

placeOrder: function(){

   var apiUrl = this.getAuthorizeApiUrl(); // authorize url: https://test.authorize.net/gateway/transact.dll

   var paymentData = this.preparePaymentRequest(params);  // Your order params

   this.sendPaymentRequest(apiUrl, paymentData)

},

sendPaymentRequest : function(cgiUrl, paymentData) {

   this.recreateIframe();

   this.tmpForm = document.createElement('form');

   this.tmpForm.style.display = 'none';

   this.tmpForm.enctype = 'application/x-www-form-urlencoded';

   this.tmpForm.method = 'POST';

   document.body.appendChild(this.tmpForm);

   this.tmpForm.action = cgiUrl;

   this.tmpForm.target = $(this.iframeId).attr('name');

   this.tmpForm.setAttribute('target', $(this.iframeId).attr('name'));

   for ( var param in paymentData) {

       this.tmpForm.appendChild(this.createHiddenElement(param, paymentData[param]));

   }

   this.tmpForm.submit();

},

createHiddenElement : function(name, value) {

   var field;

   field = document.createElement('input');

   field.type = 'hidden';

   field.name = name;

   field.value = value;

   return field;

},

recreateIframe : function() {

   if ($(this.iframeId) != undefined) {

       $(this.iframeId).empty();

       $(this.iframeId).show();

       if (this.tmpForm) {

           document.body.removeChild(this.tmpForm);

       }

   }

},

preparePaymentRequest : function(data) {

   if($('#checkout_cc_exp_month') != "undefined" && $('#checkout_cc_exp_month').val() != "" &&

       $('#checkout_cc_exp_year') != "undefined" && $('#checkout_cc_exp_year').val() != "") {

       var year = $('#checkout_cc_exp_year').val();

       if (year.length > 2) {

           year = year.substring(2);

       }

       var month = parseInt($('#checkout_cc_exp_month').val(), 10);

       if (month < 10) {

           month = '0' + month;

       }

       data.x_exp_date = month + '/' + year;

   }

   if($('#checkout_cc_number') != "undefined" && $('#checkout_cc_number').val() != "")

       data.x_card_num = $('#checkout_cc_number').val();

   if($('#checkout_cc_owner') != "undefined" && $('#checkout_cc_owner').val() != "")

       data.cc_owner = $('#checkout_cc_owner').val();

   if($('#checkout_cc_type') != "undefined" && $('#checkout_cc_type').val() != "")

       data.cc_type = $('#checkout_cc_type').val();

   return data;

},

Add Authorize.net Direct post Payment Method

The following function: send payment request function.

These following way is used to add authorize.net direct post payment method in magento .

Last Update: April 9, 2018  

February 6, 2018   138   Nandini R    Payment    
Total 1 Votes:
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Facebook
Google+
http://www.webnexs.com/blog/kb/add-authorize-net-direct-post-payment-method-magento-2
Twitter
LinkedIn