topic getting an error with the new accept.js solution in Integration and Testing

getting an error with the new accept.js solution

joekerns168 — Thu, 30 Jun 2016 02:30:35 GMT

I am trying to test the new accept.js solution. I am copying/pasting the example code. I am just trying to log the results to the console, at this point.

However, when I load the page in FF or Chrome, I get the following error:

Chrome: Accept.js:1 Uncaught SyntaxError: Invalid or unexpected token

FireFox: SyntaxError: illegal character

...4>s;s++){var t=q+g.Î£1(n)+g.Ch(n,o,p)+b[s]+r[s],u=g.Î£0(j)+g.Maj(j,k,l);q=p,p=o

Here is the code from the page I'm testing (of course I put my key/api login):

<!DOCTYPE HTML>

<html>

<head>
        <title>Auth.net Accept.js</title>
        <script type="text/javascript" src="https://jstest.authorize.net/v1/Accept.js"></script>
        <script type="text/javascript">
        function sendPaymentDataToAnet() {
        	var secureData = {}, authData = {}, cardData = {};

        	cardData.cardNumber = document.getElementById('CARDNUMBER_ID').value;
	        cardData.month = document.getElementById('EXPIRY_MONTH_ID').value;
	        cardData.year = document.getElementById('EXPIRY_YEAR_ID').value;
        	secureData.cardData = cardData;

        	authData.clientKey = 'my_client_key';
        	authData.apiLoginID = 'my_api_login';
        	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 {
        		postBackToMyServer(response.opaqueData);
                        console.log(response.opaque.Data);
        	        }
                }
        </script>

</head>

<body>


<form>

CC#: <input type="text" id="CARDNUMBER_ID" />
MM: <input type="text" id="EXPIRY_MONTH_ID" />
YY: <input type="text" id="EXPIRY_YEAR_ID" />
<button type="submit" onclick="sendPaymentDataToAnet()">Pay</button>
</form>


</body>

</html>

Any ideas?

Thanks,

Joe

Re: getting an error with the new accept.js solution

brianmc — Thu, 30 Jun 2016 14:41:49 GMT

Make sure you include the UTF-8 charset meta tag:

Brian

Re: getting an error with the new accept.js solution

earthskater1 — Sun, 10 Jul 2016 18:44:26 GMT

Utf-8 tag seems to be the solution.

Next, can ayone help with this error: E_WC_14:Accept.js encryption failed.

All form validation is working so it appears accept.js is loading but error above is coming on submit.

Re: getting an error with the new accept.js solution

brianmc — Mon, 11 Jul 2016 05:06:29 GMT

Can you post your html/javascript?

Re: getting an error with the new accept.js solution

matt77 — Tue, 12 Jul 2016 02:03:45 GMT

Hello,

I'm also getting error E_WC_14:Accept.js encryption failed.

using https localhost

in Chrome, showing this message in the js console on page load:

XMLHttpRequest cannot load https://jstest.authorize.net/v1/AcceptCore.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://localhost' is therefore not allowed access.

anyone have suggestions ?

-thanks

Re: getting an error with the new accept.js solution

brianmc — Tue, 12 Jul 2016 19:07:26 GMT

Hi Matt,

We have some updates to our documentation page coming today which should help greatly. Right now I can tell you that the CORS warning "cannot load" is actually correct behaviour in that it's alerting the fact that the page cannot call our core js library only the Accept.js library. So that will not impact functionality (we are nonetheless looking at ways to stop the browser doing this).

On the WC_14 error, we have an error in our sample code, if you make the response handler like this it should work:

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);
$("#blob").val(response.messages.message[i].code + ':' + response.messages.message[i].text);
}
} else {
useOpaqueData(response.opaqueData)
}
}
function useOpaqueData(responseData) {
console.log(responseData.dataDescriptor);
console.log(responseData.dataValue);
alert(responseData.dataValue);
}

Re: getting an error with the new accept.js solution

ali25000 — Mon, 18 Jul 2016 19:03:33 GMT

With sandbox and "https://jstest.authorize.net/v1/Accept.js", getting this error: E_WC_03:Accept.js is not loaded correctly.

Re: getting an error with the new accept.js solution

ali25000 — Mon, 18 Jul 2016 19:19:16 GMT

With the same code using sandbox and "https://jstest.authorize.net/v1/Accept.js", most of the times getting error: E_WC_03:Accept.js is not loaded correctly.

Re: getting an error with the new accept.js solution

brianmc — Tue, 19 Jul 2016 16:10:39 GMT

Hi @ali25000, can you post your code or send it to developer@authorize.net?

Also, have you looked at our sample app code? https://github.com/AuthorizeNet/accept-sample-app/blob/master/acceptJSCaller.js Lines 68 - 93

Thanks,

Brian

Re: getting an error with the new accept.js solution

brianmc — Tue, 19 Jul 2016 17:00:11 GMT

One more thing to check is that you haven't downloaded or altered the Authorize.Net javascript libraries. That would cause E_WC03

Brian

Re: getting an error with the new accept.js solution

rockon77 — Sat, 23 Jul 2016 14:46:56 GMT

Here is what I have, and it always results in an error ("acceptJS library error!"). I've tried the various code suggestions from this post. Anyone have any luck?

Also, how does one get back the info from authorize (such as card type, response code, etc)? I had mine with a relay response page before.

<!DOCTYPE HTML>
<meta charset="utf-8">

<html>

<head>
    <title>Auth.net Accept.js</title>
    <script type="text/javascript" src="https://js.authorize.net/v1/Accept.js"></script>
    <script type="text/javascript">
        function sendPaymentDataToAnet() {
            var secureData = {}, authData = {}, cardData = {};
            cardData.cardNumber = document.getElementById('creditCardNumber').value;
            //add cvv
            cardData.month = document.getElementById('expiryDateMM').value;
            cardData.year = document.getElementById('expiryDateYY').value;
            secureData.cardData = cardData;
            authData.clientKey = 'clientkeyhere';
            authData.apiLoginID = 'loginidhere';
            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);
                createTransact(response.opaqueData);
                alert("2");
            }
        }

      
    </script>

</head>

<body>


    <form>

        CC#: <input type="text" id="creditCardNumber" />
        MM: <input type="text" id="expiryDateMM" />
        YY: <input type="text" id="expiryDateYY" />
        <button type="submit" onclick="sendPaymentDataToAnet()">Pay</button>
    </form>


</body>

</html>

Re: getting an error with the new accept.js solution

rockon77 — Sat, 23 Jul 2016 15:26:07 GMT

Chrome is saying this error: "XMLHttpRequest cannot load https://js.authorize.net/v1/AcceptCore.js. No 'Access-Control-Allow-Origin' header is present on the requested resource."

Re: getting an error with the new accept.js solution

danjump24 — Fri, 16 Sep 2016 08:42:03 GMT

Im currently getting the XMLHttpRequest cannot load https://jstest.authorize.net/v1/AcceptCore.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. issue as well and then when i try and submit it tells me that windows[c] is not a function.

has anyone been able to get this to work yet?

Re: getting an error with the new accept.js solution

firebird — Sun, 01 Jan 2017 00:05:47 GMT

I am also seeing "windows[b] is not a function" and the 'Access-Control-Allow-Origin'. Has anyone gotten this working?

Re: getting an error with the new accept.js solution

Aaron — Wed, 08 Mar 2017 00:06:49 GMT

Just a heads up for you and anyone watching this thread that we've released code in sandbox that fixes many of the issues brought up here, and this code should make it into the production environment within the next couple of days.

Specifically for Accept.js, there's no longer any "Access-Control-Allow-Origin" related error in the console, the accept.js script can now be loaded at any point in the workflow, and the response handler function can be passed directly in the function call instead of having to pass the name.

Of course, please let us know if anything's not working as expected!

Re: getting an error with the new accept.js solution

ImTheC — Mon, 13 Mar 2017 18:40:51 GMT

@Aaron Have the fixes made it into the production environment yet?

Re: getting an error with the new accept.js solution

Aaron — Mon, 13 Mar 2017 19:55:38 GMT

Yes, these are all now in production.

Re: getting an error with the new accept.js solution

roman_agently — Fri, 31 Mar 2017 10:41:08 GMT

I'm getting the same problem right now using sandbox account. Yesterday it was fine. (E_WC_14:Accept.js encryption failed)

Here is code, from the example page I'm using (changed only for messages UI and submit)

<script type="text/javascript" src="https://jstest.authorize.net/v1/Accept.js" charset="utf-8"></script>
    <script type="text/javascript">
        var $form = $('.payment-form');
        
        $(function() {

            $('.payment-form').submit(function(event) {
                var $form = $(this);

                event.preventDefault();

                // Disable the submit button to prevent repeated clicks
                $form.find('button').prop('disabled', true);
                $('#js-error-message').hide();

                sendPaymentDataToAnet();
            });
        });

        function responseHandler(response) {
            if (response.messages.resultCode === 'Error') {
                
                console.log(response.messages);
                
                var code = response.messages.message[0].code;
                
                // Show the errors on the form
                switch(code){
                    case "E_WC_05":
                        $('#js-error-message').html('{{ trans('texts.invalid_card_number') }}').fadeIn();
                    break;

                    case "E_WC_08":
                        $('#js-error-message').html('{{ trans('texts.invalid_expiry') }}').fadeIn();
                    break;

                    default:
                        $('#js-error-message').html(response.messages.message[0].text).fadeIn();
                    break;
                }

                $form.find('button').prop('disabled', false);

            } else {
                useOpaqueData(response.opaqueData)
            }
        }

        function useOpaqueData(responseData) {
            $form.append($('<input type="hidden" name="sourceToken"/>').val(responseData.dataValue));
            $form.get(0).submit();
        }

        function sendPaymentDataToAnet() {
            var secureData = {}, authData = {}, cardData = {};
            
            cardData.cardNumber = document.getElementById('card_number').value;
            cardData.month = document.getElementById('expiration_month').value;
            cardData.year = document.getElementById('expiration_year').value;
            secureData.cardData = cardData;

            authData.clientKey = '{{env('AUTHORIZE_NET_CLIENT_KEY')}}';
            authData.apiLoginID = '{{env('AUTHORIZE_NET_API_LOGIN')}}';
            secureData.authData = authData;
            
            Accept.dispatchData(secureData, 'responseHandler');
        }
    </script>

Re: getting an error with the new accept.js solution

JimM — Sat, 01 Apr 2017 02:36:16 GMT

I'm getting the same E_WC_14:Accept.js encryption failed error. Just set this up today using mostly code from samples found.

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<?php 
if ($_SERVER["HTTP_HOST"] == "www.myserver.com")
{
    // For Production, use: 
    echo "<script type=\"text/javascript\" src=\"https://js.authorize.net/v1/Accept.js\" charset=\"utf-8\"></script>\n"; 
}
else
{
    // For Sandbox/Testing, use: -->
    echo "<script type=\"text/javascript\" src=\"https://jstest.authorize.net/v1/Accept.js\" charset=\"utf-8\"></script>\n"; 
}
?>


<script type="text/javascript">
function sendPaymentDataToAnet() {

    var secureData = {}; authData = {}; cardData = {};

    // Extract the card number, expiration date, and card code.
    cardData.cardNumber = document.getElementById("cardNumberID").value;
    cardData.month = document.getElementById("monthID").value;
    cardData.year = document.getElementById("yearID").value;
    cardData.cardCode = document.getElementById("cardCodeID").value;
    cardData.zip = document.getElementById("zip").value;
    cardData.fullName = document.getElementById("fullName").value;
    secureData.cardData = cardData;

    authData.clientKey = "ClientKey";
    authData.apiLoginID = "APILogin";
    secureData.authData = authData;

    // Pass the card number and expiration date to Accept.js for submission to Authorize.Net.
    Accept.dispatchData(secureData, responseHandler);
    
    // Process the response from Authorize.Net to retrieve the two elements of the payment nonce.
    // If the data looks correct, record the OpaqueData to the console and call the transaction processing function.
    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 useOpaqueData(responseData) {
        console.log(responseData.dataDescriptor);
        console.log(responseData.dataValue);
        alert(responseData.dataValue);
    }    
}
</script>







<script type="text/javascript">
function processTransaction(responseData) {
    
    //create the form and attach to the document
    var transactionForm = document.createElement("form");
    transactionForm.Id = "transactionForm";
    transactionForm.action = "authnet_test_response.php";
    transactionForm.method = "POST";
    document.body.appendChild(transactionForm);

    //create form "input" elements corresponding to each parameter
    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();
}
</script>

<title>Untitled Document</title>
</head>

<body>
<?php // Step 2. Collect payment data in a form and intercept your form submission: ?>
<form>
    Card Number<br>
    <input type="text" id="cardNumberID" placeholder="5424000000000015" autocomplete="off" /><br><br>
    Expiration Date (Month)<br>
    <input type="text" id="monthID" placeholder="12" value="12" /><br><br>
    Expiration Date (Year)<br>
    <input type="text" id="yearID" placeholder="2025" value="2025" /><br><br>
    Card Security Code<br>
    <input type="text" id="cardCodeID" placeholder="123" /><br><br>
    Amount<br>
    <input type="text" id="amount" placeholder="10.00" /><br><br>
    
    Cardholder Name<br>
    <input type="text" id="fullName" /> <br><br>
    Cardholder Zip<br>
    <input type="text" id="zip" /> <br><br>
    
    <!-- On submit, cause this data to be sent to the "sendPaymentDataToAnet()" function. -->
    <button type="button" id="submitButton" onClick="sendPaymentDataToAnet()">Pay</button>
</form>
</body>
</html>

Re: getting an error with the new accept.js solution

Aaron — Sat, 01 Apr 2017 07:33:15 GMT

Hi @JimM,

The way the Accept.js script is written, the E_WC_14 error becomes a sort of fallback error for any error condition that's not caught and reported by some other function.

In your case, your line

amount.value = document.getElementById('AMOUNT').value;

is failing, because it's looking for an element with ID "AMOUNT", but your form field has the ID "amount". Change one or the other case to match and all should be well. It appears that error comes right from one of our samples, so we'll fix that right away.

I also noticed you have a "useOpaqueData()" function that's not being called anywhere. Feel free to remove that.