E_WC_14: Accept.js encryption failed?

Question

I have a payment form as follows

<body>
    <g:if test="${flash.message}">
        <div class="message">${flash.message}</div>
    </g:if>
    <div class="content">
    <h1>Secure Checkout</h1>

        <g:form name="paymentForm"
              method="POST"
              action="processAcceptPayment" >
            <input type="text" name="cardNumber" id="cardNumber" placeholder="cardNumber"/> <br><br>
            <input type="text" name="expMonth" id="expMonth" placeholder="expMonth"/> <br><br>
            <input type="text" name="expYear" id="expYear" placeholder="expYear"/> <br><br>
            <input type="text" name="cardCode" id="cardCode" placeholder="cardCode"/> <br><br>
            <input type="hidden" name="dataValue" id="dataValue" />
            <input type="hidden" name="dataDescriptor" id="dataDescriptor" />
            <button type="button" onclick="sendPaymentDataToAnet()">Pay</button>
        </g:form>


    </div>




<g:javascript>


    function sendPaymentDataToAnet() {
        var authData = {};
        authData.clientKey = "valid key";
        authData.apiLoginID = "valid id";

        var cardData = {};
        cardData.cardNumber = document.getElementById("cardNumber").value;
        cardData.month = document.getElementById("expMonth").value;
        cardData.year = document.getElementById("expYear").value;
        cardData.cardCode = document.getElementById("cardCode").value;

        var secureData = {};
        secureData.authData = authData;
        secureData.cardData = cardData;
        // If using banking information instead of card information,
        // send the bankData object instead of the cardData object.
        //
        // secureData.bankData = bankData;

        Accept.dispatchData(secureData, responseHandler);

    }

    function responseHandler(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
                );
                i = i + 1;
            }
        } else {
            paymentFormUpdate(response.opaqueData);
        }
    }

    function paymentFormUpdate(opaqueData) {
        document.getElementById("dataDescriptor").value = opaqueData.dataDescriptor;
        document.getElementById("dataValue").value = opaqueData.dataValue;

        document.getElementById("cardNumber").value = "";
        document.getElementById("expMonth").value = "";
        document.getElementById("expYear").value = "";
        document.getElementById("cardCode").value = "";
        document.getElementById("accountNumber").value = "";
        document.getElementById("routingNumber").value = "";
        document.getElementById("nameOnAccount").value = "";
        document.getElementById("accountType").value = "";

        document.getElementById("paymentForm").submit();
    }


</g:javascript>
</body>

This generates the form as follows

I enter test credit card numbers and click Pay.

I get the following error in my javascript console.

I was just following the accept.js tutorial from the official page.

https://developer.authorize.net/api/reference/features/acceptjs.html

I appreciate any help as to the reason for this "Encryption Failed" error? Thanks!

UPDATE:

Ok so i did some more debugging. I put a test code "console.log("test");" inside responseHandler() function and noticed that it was called twice. I am now wondering why is responseHandler() being called twice.

Which form you are using? Your Own Payment Form or the Hosted Payment Information Form? — Rahul Mahadik, Mar 11 '18 at 11:28
I experienced this same issue. It appears Accept.js consumes any JavaScript error on the page and logs this generic error in it's place. I was able to hunt down my offending code by using a breakpoint in Firefox dev tools in the responseHandler error condition and looking through the call stack to discover the actual underlying error. — Travis Miller, May 08 '18 at 23:28

score 12 · Answer 1 · answered Dec 13 '19 at 21:34

When Accept.js triggers the callback function twice due to some other Javascript error occurring on the page, you can pretty quickly track down the source of that error on the by wrapping the contents of your callback function in a try/catch block:

Accept.dispatchData(secureData, responseHandler);

...

function responseHandler(response) {
  try {
    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
        );
        i = i + 1;
      }
    }
  } catch (error) {
    console.log(error);
  }
}

score 4 · Answer 2 · answered Nov 03 '19 at 07:04

Ok so i did some more debugging. I put a test code "console.log("test");" inside responseHandler() function and noticed that it was called twice. I am now wondering why is responseHandler() being called twice.

I repeated this test and can confirm that this is a common cause of this error. It is also true that Accept.js will mistakingly call your responseHandler() twice if it calls a function that has a Javascript error in it, or some other Javascript error is in the page. In my case, I had a sendOrder() AJAX function that was assuming a variable. Once I fixed that other function, the responseHandler() function was called only once.

I know this is a two year old post, but it really helped me to figure out what I was doing wrong today. First I added the try catch from above, and then was told I was trying to set a property of a null object, finale solution for me was I had removed the bank account fields from the payment form but was still trying to blank out those fields in my form before submitting to the back end. A little bit of a duh moment but this did save me thanks! — James Lawrence, May 02 '20 at 00:22

score 0 · Answer 3 · answered Aug 02 '18 at 06:37

The same error appeared to me too. Instead seeing the console, I go to the Network tab of Chrome browser and then see the success message has already appeared as below:

opaqueData
:
{dataDescriptor: "COMMON.ACCEPT.INAPP.PAYMENT",…}

Please note, while testing, enter the test cards for sandbox from https://developer.authorize.net/hello_world/testing_guide/

E_WC_14: Accept.js encryption failed?

3 Answers3