Thanks @Renaissance , I appreciate you reaching out. Here's the code we're running, pretty much a direct copy/paste from their documentation. The exception being we are running this code inside jquery validate.
$("form[name=checkoutStep3]").validate({
rules: {...},
messages: {...},
errorPlacement: function(error, element) {...},
submitHandler: function(form) {
// disable button and change text to please wait
$("button[type=submit]").prop("disabled",true).text("Please Wait...");
// build the data needed to send to authnet
var authData = {};
authData.clientKey = document.getElementById("CLIENT_KEY").value;
authData.apiLoginID = document.getElementById("API_LOGIN_ID").value;
var cardData = {};
cardData.cardNumber = document.getElementById("USER_CARD_NUMBER").value.replace(/\s+/g, '');
cardData.month = document.getElementById("USER_CARD_EXPIRATION_MONTH").value;
cardData.year = document.getElementById("USER_CARD_EXPIRATION_YEAR").value;
cardData.cardCode = document.getElementById("USER_CARD_CVV_CODE").value;
var secureData = {};
secureData.authData = authData;
secureData.cardData = cardData;
// send data to authnet
Accept.dispatchData(secureData, 'handleAuthnetResponse');
// function to handle the response
window.handleAuthnetResponse = function(response) {
// if there is an error in the response
if (response.messages.resultCode === "Error") {
var i = 0;
while (i < response.messages.message.length) {
//console.log(response.messages.message[i].code + ": " + response.messages.message[i].text);
// alert out the error to the user
alert("Error: " + response.messages.message[i].text);
i = i + 1;
}
// Put the button back to the starting state
$("button[type=submit]").prop("disabled",false).text("Continue To Review");
}
else{
paymentFormUpdate(response.opaqueData);
}
}
// function to update the form with the data descriptor and value coming from authnet
function paymentFormUpdate(opaqueData) {
// get the data descriptor and value
document.getElementById("DATA_DESCRIPTOR").value = opaqueData.dataDescriptor;
document.getElementById("DATA_VALUE").value = opaqueData.dataValue;
// remove values from form
document.getElementById("USER_CARD_NUMBER").value = "";
document.getElementById("USER_CARD_EXPIRATION_MONTH").value = "";
document.getElementById("USER_CARD_EXPIRATION_YEAR").value = "";
document.getElementById("USER_CARD_CVV_CODE").value = "";
form.submit();
}
}
});
Because of some old posts I read dealing with CORS issues (see here), you'll see this (callback function is in quotes)...
Accept.dispatchData(secureData, 'handleAuthnetResponse');
and this (window.handleAuthnetResponse)...
window.handleAuthnetResponse = function(response) {
instead of this...
Accept.dispatchData(secureData, handleAuthnetResponse);
and this...
function handleAuthnetResponse(response) {
I didn't see any improvement in terms of the frequency in which we see these CORS issues, but it was worth a shot. At the moment we're seeing maybe a couple per day out of ~300 transactions using this form.
