Cybersource Developer Community Cybersource Developer Community

saadm · ‎07-09-2017

Hi,

I am testing credit card payments on my NopCommerce based web store using Test mode in Authorize.net with Accept.js.

I am getting the javascript run-time error, 'Accept is undefined' when I try to call

Accept.dispatchData.

Intellisense picks up the Accept object.

My script is as follows:

var PaymentInfo = {
form: false,
saveUrl: false,

init: function (form, saveUrl) {
this.form = form;
this.saveUrl = saveUrl;
},

save: function () {
if (Checkout.loadWaiting != false) return;

this.sendPaymentDataToAnet();
Checkout.setLoadWaiting('payment-info');
$.ajax({
cache: false,
url: this.saveUrl,
data: $(this.form).serialize(),
type: 'post',
success: this.nextStep,
complete: this.resetLoadWaiting,
error: Checkout.ajaxFailure
});
},
sendPaymentDataToAnet: function () {
var secureData = {}; authData = {}; cardData = {};

//document.writeln("<script type='text/javascript' src='https://js.authorize.net/v1/Accept.js' charset='utf-8'></script>");

var imported = document.createElement("script");
imported.src="https://jstest.authorize.net/v1/Accept.js";
imported.charset = "utf-8";

document.head.appendChild(imported);
// for Sandbox / Testing use
// for Production use, use https://js.authorize.net/v1/Accept.js
//$.getScript('https://jstest.authorize.net/v1/Accept.js', function () {
try {
// Extract the card number, expiration date, and card code.
cardData.cardNumber = document.getElementById("CardNumber").value;
cardData.month = document.getElementById("ExpireMonth").value;
cardData.year = document.getElementById("ExpireYear").value;
cardData.cardCode = document.getElementById("CardCode").value;
secureData.cardData = cardData;

// The Authorize.Net Client Key is used in place of the traditional Transaction Key. The Transaction Key
// is a shared secret and must never be exposed. The Client Key is a public key suitable for use where
// someone outside the merchant might see it.
authData.clientKey = "****" ;

authData.apiLoginID = "****";
secureData.authData = authData;

// Pass the card number and expiration date to Accept.js for submission to Authorize.Net.

Accept.dispatchData(secureData, 'responseHandler');
} catch (ex) {
console.log(ex.message);
}

//});
},
responseHandler: function (response) {
if (response.messages.resultCode === "Error") {
for (var i = 0; i < response.messages.message.length; i++) {
console.log(response.messages.message[i].code + ": " + response.messages.message[i].text);
}
alert("acceptJS library error!")
} else {
console.log(response.opaqueData.dataDescriptor);
console.log(response.opaqueData.dataValue);
//this.processTransaction(response.opaqueData);

var frmPaymentInfo= document.getElementById("co-payment-info-form");
var amount = document.createElement("input")
amount.hidden = true;
amount.value = document.getElementById('amount').value;
amount.name = "amount";
amount.id = "amount";
frmPaymentInfo.appendChild(amount);

var dataDesc = document.createElement("input")
dataDesc.hidden = true;
dataDesc.value = response.opaqueData.dataDescriptor;
dataDesc.name = "dataDesc";
dataDesc.id = "dataDesc";
frmPaymentInfo.appendChild(dataDesc);

var dataValue = document.createElement("input")
dataValue.hidden = true;
dataValue.value = response.opaqueData.dataValue;
dataValue.name = "dataValue";
dataValue.id = "dataValue";
frmPaymentInfo.appendChild(dataValue);

}
},

Please help.

Saad

NexusSoftware · ‎07-10-2017

In this case, Accept.js functions are not loaded when the call to Accept.dispatchData() is made.
One way is to remove the loading from the sendPaymentDataToAnet() function and do something like :

<body onload="loadScript()"> 

function loadScript() {
var imported = document.createElement("script");
imported.src="https://jstest.authorize.net/v1/Accept.js";
imported.charset = "utf-8";
document.head.appendChild(imported);
}

Powered by NexWebSites.com -
Certified Authorize.net developers

saadm · ‎07-10-2017

It did not work with body onload either. I finally got it to work by copying and pasting the Accept.js script directly into the sendPaymentDataToAnet function like this:

sendPaymentDataToAnet: function () {
var secureData = {}; authData = {}; cardData = {};

var Accept = function () { "use strict"; function a(a) { var b; ((b = g.hash(a.responseText)) && b ? b = "187361d772b193b659e74089acebc3a2077f044c89345d96b2149775796a3bc3" !== b : 0) && (console.warn("Library is not coming from Accept server--- " + g.hash(a.responseText)), setTimeout(f, 2e3)), a = void 0 } function b(a, b) { var c = null; c = "undefined" != typeof XDomainRequest ? new XDomainRequest : new XMLHttpRequest, c.open("get", a, !0), c.send(), c.onload = function () { setTimeout(function () { b(c), 2e3 }) } } function c(a) { var b = document.createElement("script"); b.type = "text/javascript", b.src=a, (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(b) } function d(a, b) { console.warn("Accept.js is not loaded correctly"); var c = { messages: { resultCode: "Ok", message: [] } }; c.messages.resultCode = "Error", c.messages.message.push({ code: "E_WC_03", text: "Accept.js is not loaded correctly" }), "function" == typeof b ? b.call(null, c) : window[b](c) } function e() { var a = document.getElementsByTagName("body")[0]; a.addEventListener("handshake", function () { window.isReady = !0 }, !1) } window.cdnPath = "https://js.authorize.net", window.cdnPath = window.cdnPath + "/v1/", window.encryptEndPoint = "https://api.authorize.net"; var f = function () { Accept.dispatchData = function (a, b) { var c = { messages: { resultCode: "Ok", message: [] } }; c.messages.resultCode = "Error", c.messages.message.push({ code: "E_WC_03", text: "Accept.js is not loaded correctly" }), "function" == typeof b ? b.call(null, c) : window[b](c) } }, g = {}; return g.hash = function (a) { a = a.utf8Encode(); var b = [1116352408, 1899447441, 3049323471, 3921009573, 961987163, 1508970993, 2453635748, 2870763221, 3624381080, 310598401, 607225278, 1426881987, 1925078388, 2162078206, 2614888103, 3248222580, 3835390401, 4022224774, 264347078, 604807628, 770255983, 1249150122, 1555081692, 1996064986, 2554220882, 2821834349, 2952996808, 3210313671, 3336571891, 3584528711, 113926993, 338241895, 666307205, 773529912, 1294757372, 1396182291, 1695183700, 1986661051, 2177026350, 2456956037, 2730485921, 2820302411, 3259730800, 3345764771, 3516065817, 3600352804, 4094571909, 275423344, 430227734, 506948616, 659060556, 883997877, 958139571, 1322822218, 1537002063, 1747873779, 1955562222, 2024104815, 2227730452, 2361852424, 2428436474, 2756734187, 3204031479, 3329325298], c = [1779033703, 3144134277, 1013904242, 2773480762, 1359893119, 2600822924, 528734635, 1541459225]; a += String.fromCharCode(128); for (var d = a.length / 4 + 2, e = Math.ceil(d / 16), f = new Array(e), h = 0; h < e; h++) { f[h] = new Array(16); for (var i = 0; i < 16; i++)f[h][i] = a.charCodeAt(64 * h + 4 * i) << 24 | a.charCodeAt(64 * h + 4 * i + 1) << 16 | a.charCodeAt(64 * h + 4 * i + 2) << 8 | a.charCodeAt(64 * h + 4 * i + 3) } f[e - 1][14] = 8 * (a.length - 1) / Math.pow(2, 32), f[e - 1][14] = Math.floor(f[e - 1][14]), f[e - 1][15] = 8 * (a.length - 1) & 4294967295; var j, k, l, m, n, o, p, q, r = new Array(64); for (h = 0; h < e; h++) { for (var s = 0; s < 16; s++)r[s] = f[h][s]; for (s = 16; s < 64; s++)r[s] = g.s1(r[s - 2]) + r[s - 7] + g.s0(r[s - 15]) + r[s - 16] & 4294967295; for (j = c[0], k = c[1], l = c[2], m = c[3], n = c[4], o = c[5], p = c[6], q = c[7], s = 0; s < 64; s++) { var t = q + g.S1(n) + g.Ch(n, o, p) + b[s] + r[s], u = g.S0(j) + g.Maj(j, k, l); q = p, p = o, o = n, n = m + t & 4294967295, m = l, l = k, k = j, j = t + u & 4294967295 } c[0] = c[0] + j & 4294967295, c[1] = c[1] + k & 4294967295, c[2] = c[2] + l & 4294967295, c[3] = c[3] + m & 4294967295, c[4] = c[4] + n & 4294967295, c[5] = c[5] + o & 4294967295, c[6] = c[6] + p & 4294967295, c[7] = c[7] + q & 4294967295 } return g.toHexStr(c[0]) + g.toHexStr(c[1]) + g.toHexStr(c[2]) + g.toHexStr(c[3]) + g.toHexStr(c[4]) + g.toHexStr(c[5]) + g.toHexStr(c[6]) + g.toHexStr(c[7]) }, g.ROTR = function (a, b) { return b >>> a | b << 32 - a }, g.S0 = function (a) { return g.ROTR(2, a) ^ g.ROTR(13, a) ^ g.ROTR(22, a) }, g.S1 = function (a) { return g.ROTR(6, a) ^ g.ROTR(11, a) ^ g.ROTR(25, a) }, g.s0 = function (a) { return g.ROTR(7, a) ^ g.ROTR(18, a) ^ a >>> 3 }, g.s1 = function (a) { return g.ROTR(17, a) ^ g.ROTR(19, a) ^ a >>> 10 }, g.Ch = function (a, b, c) { return a & b ^ ~a & c }, g.Maj = function (a, b, c) { return a & b ^ a & c ^ b & c }, g.toHexStr = function (a) { for (var b, c = "", d = 7; d >= 0; d--)b = a >>> 4 * d & 15, c += b.toString(16); return c }, "complete" === document.readyState ? e() : window.addEventListener ? window.addEventListener("load", e, !1) : window.attachEvent ? window.attachEvent("onload", e) : window.onLoad && (window.onload = e), "undefined" == typeof String.prototype.utf8Encode && (String.prototype.utf8Encode = function () { return unescape(encodeURIComponent(this)) }), "undefined" == typeof String.prototype.utf8Decode && (String.prototype.utf8Decode = function () { try { return decodeURIComponent(escape(this)) } catch (a) { return this } }), c(cdnPath + "AcceptCore.js"), b(cdnPath + "AcceptCore.js", a), { dispatchData: d } }();
//document.writeln("<script type='text/javascript' src='https://js.authorize.net/v1/Accept.js' charset='utf-8'></script>");

//var imported = document.createElement("script");
//imported.src="https://jstest.authorize.net/v1/Accept.js";
//imported.charset = "utf-8";

//document.head.appendChild(imported);
// for Sandbox / Testing use
// for Production use, use https://js.authorize.net/v1/Accept.js
//$.getScript('https://jstest.authorize.net/v1/Accept.js', function () {
try {
// Extract the card number, expiration date, and card code.
cardData.cardNumber = document.getElementById("CardNumber").value;
cardData.month = document.getElementById("ExpireMonth").value;
cardData.year = document.getElementById("ExpireYear").value;
cardData.cardCode = document.getElementById("CardCode").value;

secureData.cardData = cardData;

// The Authorize.Net Client Key is used in place of the traditional Transaction Key. The Transaction Key
// is a shared secret and must never be exposed. The Client Key is a public key suitable for use where
// someone outside the merchant might see it.
authData.clientKey = "54uHXf4tGxS3ghn448PSn7wHWJ2RZDxAe2qc68fJdxx43Q438khaHV9TRdyzBTAq";
authData.apiLoginID = "concordea2014";
secureData.authData = authData;

// Pass the card number and expiration date to Accept.js for submission to Authorize.Net.

Accept.dispatchData(secureData, this.responseHandler);
} catch (ex) {
console.log(ex.message);
}

//});
},

but now I am getting an 'acceptJS library error' in responseHandler callback function.

Saad

NexusSoftware · ‎07-10-2017

It is working being called from the body onload: https://nexwebsites.com/authorize.net-token-tester/test-accept.html

Why not just put :

<script type="text/javascript" src="https://jstest.authorize.net/v1/Accept.js" charset="utf-8"></script>

in your header or do a conditional file inclusion from the code behind, if you must?

Powered by NexWebSites.com -
Certified Authorize.net developers

Cybersource Developer Community Cybersource Developer Community

Getting 'Accept is undefined' JavaScript runtime error when testing with accept.js

Photos