How to Add Authorize.net Direct Post Payment Method in Magento 2?

Learn how to add authorize.net direct post-payment method in Magento 2 platform with JS module.

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

• Use template and JS module in Magento core module
• Create a new JS model and new credit card form

Build your Amazon-like multi-vendor marketplace website @ $249/- now!!!

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

Add authorize.net direct post-payment method in Magento 2

Create a 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 in Magento 2

• To use an iframe to be shown data respond after connecting to authorize.net API
• Alternate of using AJAX request

  (https://test.authorize.net/gateway/transact.dll)

• To create a temp form by this function and target this iframe.

The following function: send payment request function.

The following way is used to add authorize.net direct post-payment method in Magento.

Contact us to build an online Magento store with all required features today!!!