accept.js E_WC_14:Accept.js encryption failed.

[microweb]

I have read through all of the posts on here for the encryption failed error and cannot resolve this.  I get the same error in my code and with the demo application.

I'm attempting to use this in a WordPress site.  The page that is loading has the following scripts on the page.  they are not in the head section, they are just in the page above the form.

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

I modified acceptJSCaller.js from the sample app to include my test apilogin and public key.

My form is as follows:

    <form>
        <input type="hidden" name="amount" value="750.00" />
      
        Card Number<br>
        <input type="tel" id="creditCardNumber" autocomplete="off" /><br><br>
        Expiration Date (Month)<br>
        <input type="text" id="expiryDateMM" /><br><br>
        Expiration Date (Year)<br>
        <input type="text" id="expiryDateYY"  /><br><br>
        Card Security Code<br>
        <input type="text" id="cvv" /><br><br>
        
        <button type="button" id="submitButton" onclick="acceptJSCaller()">Pay</button>
    </form>

Has anyone found a solution for this that consistently works?

[NexusSoftware]

Forget about the acceptJSCaller.js file.  For the sandbox, just include Accept.js with :

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

and put the following between <script> tags on the same page or as an external .js file. If an external .js file, include that as well:

function sendPaymentDataToAnet() {
    var secureData = {}; authData = {}; cardData = {};
    cardData.cardNumber = document.getElementById("cardNumberID").value;
    cardData.month = document.getElementById("monthID").value;
    cardData.year = document.getElementById("yearID").value;
    cardData.cardCode = document.getElementById("cardCodeID").value;
    secureData.cardData = cardData;

    authData.clientKey = "YOUR_PUBLIC_KEY";
    authData.apiLoginID = "YOUR_LOGIN_ID";
    secureData.authData = authData;

    Accept.dispatchData(secureData, responseHandler);

function responseHandler(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);
            processTransaction(response.opaqueData);
        }
    }
}

function processTransaction(responseData) {
    
    var transactionForm = document.createElement("form");
    transactionForm.Id = "transactionForm";
    
  //Your payment processing script to post the XML. 
    transactionForm.action = "paymentprocessor.php";
    transactionForm.method = "POST";
    document.body.appendChild(transactionForm);

    amount = document.createElement("input")
    amount.hidden = true;
    amount.value = document.getElementById('amount').value;
    amount.name = "amount";
    transactionForm.appendChild(amount);

    dataDesc = document.createElement("input")
    dataDesc.hidden = true;
    dataDesc.value = responseData.dataDescriptor;
    dataDesc.name = "dataDesc";
    transactionForm.appendChild(dataDesc);

    dataValue = document.createElement("input")
    dataValue.hidden = true;
    dataValue.value = responseData.dataValue;
    dataValue.name = "dataValue";
    transactionForm.appendChild(dataValue);

    //submit the new form
    transactionForm.submit();
}

Replace your button onclick event with:

<button type="button" id="submitButton" onclick="sendPaymentDataToAnet()">Pay</button>

Done. Good job.

[NexusSoftware]

PS. Don't forget to replace the example above's document IDs with your own ...

    cardData.cardNumber = document.getElementById("creditCardNumber").value;
    cardData.month = document.getElementById("expiryDateMM").value;
    cardData.year = document.getElementById("expiryDateYY").value;
    cardData.cardCode = document.getElementById("cvv").value;

[microweb]

The error message on this is very misleading.  I finally got it working by using the firebug console.  The problem was not in my call to accept.js but in the code on the payment processor page.

Once I realized the issue wasn't with the call to authorize, but more of a javascript error I was able to get this working quickly.