Cybersource Developer Community Cybersource Developer Community

joekerns168 · ‎06-29-2016

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

rockon77 · ‎07-23-2016

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>

rockon77 · ‎07-23-2016

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."

danjump24 · ‎09-16-2016

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?

firebird · ‎12-31-2016

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

Aaron · ‎03-07-2017

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!

ImTheC · ‎03-13-2017

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

Aaron · ‎03-13-2017

Yes, these are all now in production.

roman_agently · ‎03-31-2017

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>

JimM · ‎03-31-2017

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>

Aaron · ‎04-01-2017

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.

Cybersource Developer Community Cybersource Developer Community

getting an error with the new accept.js solution