Login/Register
E_WC_14: Accept.js encryption failed?
Asked Answered
grailsauthorize.netaccept.js
K

3

6

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

enter image description here

I enter test credit card numbers and click Pay.

enter image description here

I get the following error in my javascript console.

enter image description here

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.

Karyokinesis answered 11/3, 2018 at 7:35 Comment(4)
Which form you are using? Your Own Payment Form or the Hosted Payment Information Form? – Dodger
Have you imported Accept.js? – Dodger
I am using custom form and have imported accept.js in head. – Karyokinesis
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. – Northwest
T
12

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);
  }
}
Tumor answered 13/12, 2019 at 21:34 Comment(0)
L
4

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.

Lueck answered 3/11, 2019 at 7:4 Comment(1)
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! – Continent
N
0

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/

Nessy answered 2/8, 2018 at 6:37 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.