E_WC_14: Accept.js encryption failed?

Question

E_WC_14: Accept.js encryption failed?

3.7k views Asked by kofhearts At 11 March 2018 at 07:35

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.

Original Q&A

There are 3 answers

**Niladri Banerjee - Uttarpara** · Answer 1 · 2018-08-02T06:37:52+00:00

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/

**Volomike** · Answer 2 · 2019-11-03T07:04:06+00:00

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.

**anakadote** · Answer 3 · 2019-12-13T21:34:49+00:00

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);
  }
}

TechQA.

E_WC_14: Accept.js encryption failed?

There are 3 answers

Related Questions in GRAILS

Related Questions in AUTHORIZE.NET

Related Questions in ACCEPT.JS

Popular Questions

Popular Tags

Trending Questions