Contents
There are 2 ways to add authorize.net direct-post payment method to a custom checkout page.
| 1 | Use template and js model of magento core modules |
| 2 | Create new js model and new creditcard form |
1.Use template and js model of magento core modules.
| 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 |
2.Create new js model and new creditcard form:
-
Template file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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 functions:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
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; }, |
- You have to use an iframe to be shown data response after connect to authorize.net api
(https://test.authorize.net/gateway/transact.dll) instead of using ajax request.
- You have to create a temp form by this function and target to this iframe. Please look at sendPaymentRequest function.