Reply
Contributor
Posts: 29
Registered: ‎12-08-2015

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

[ Edited ]

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>

 

Contributor
Posts: 29
Registered: ‎12-08-2015

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

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

Member
Posts: 1
Registered: ‎09-16-2016

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

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?

Member
Posts: 6
Registered: ‎12-31-2016

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

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

Administrator
Posts: 296
Registered: ‎11-03-2016

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

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!

-Aaron

Aaron Wright
Developer Evangelist - Authorize.Net

Follow Authorize.Net developer news on Twitter!
Member
Posts: 1
Registered: ‎03-13-2017

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

[ Edited ]

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

Administrator
Posts: 296
Registered: ‎11-03-2016

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

Yes, these are all now in production.

-Aaron

Aaron Wright
Developer Evangelist - Authorize.Net

Follow Authorize.Net developer news on Twitter!
Member
Posts: 3
Registered: ‎03-31-2017

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

[ Edited ]

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>



Member
Posts: 2
Registered: ‎03-31-2017

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

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>
Administrator
Posts: 296
Registered: ‎11-03-2016

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

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.

 

 

 

 

-Aaron

Aaron Wright
Developer Evangelist - Authorize.Net

Follow Authorize.Net developer news on Twitter!