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

Aaron · ‎04-01-2017

Hi @roman_agently,

Can you post an example of this script running in an html page? Basically something that I can copy and run on this side for testing?

JimM · ‎04-01-2017

@Aaron wrote:
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.

Thank you, Aaron. That did the trick. Can't believe I missed the capitalization issue. I already knew about the extra function from another sample, but forgot to delete it - thanks for pointing that out also. So now my test code works and I can get to work on replacing our AIM integration with this. We are currently using AuthorizeNetAIM.php from the old SDK for processing AuthorizeAndCapture transactions. It looks like I'll need to integrate the code found in transactionCaller.php in the Accept.js GitHub sample to process the payment using the response from Accept.js.

roman_agently · ‎04-02-2017

Hi @Aaron, thanks for a reply.

What we have,

sendPaymentDataToAnet() sends 2 requests, first is OPTION with the error response:
https://www.dropbox.com/s/v26a9n1ghonolfd/Screenshot%202017-04-02%2014.17.05.png?dl=0
But I think that doesn't make any problems.

The next one is a POST request with a successful response:
https://www.dropbox.com/s/rri1z5lrhskqihe/Screenshot%202017-04-02%2014.18.18.png?dl=0

But, responseHandler() called twice:
https://www.dropbox.com/s/zr5tjn08ctu6h7y/Screenshot%202017-04-02%2014.19.54.png?dl=0

As you see the first reponse is fine, but then comes the next one (should it?) with an error.

Here is the js code once again:

<script type="text/javascript" src="https://jstest.authorize.net/v1/Accept.js" charset="utf-8"></script>
    <script type="text/javascript">

        $(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) {

            console.log(response);
            
            if (response.messages.resultCode === 'Error') {
                
                var code = response.messages.message[0].code;
                
                // Show the errors on the form
                switch(code){
                    case "E_WC_05":
                        $('#js-error-message').html('The credit card number is not valid.').fadeIn();
                    break;

                    case "E_WC_08":
                        $('#js-error-message').html('The expiration date is not valid.').fadeIn();
                    break;

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

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

            } else {
                useOpaqueData(response.opaqueData)
            }
        }

        function useOpaqueData(responseData) {
            $form.append($('<input type="hidden" name="sourceToken"/>').val(responseData.dataValue));
            // $('.payment-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 = '6LcF9gM6BUc3W6gzJS29L8T77s8CJcbg4MjNtg67RNTPgbw55Fy22JRp4LE3a2uL';
            authData.apiLoginID = '4Nna6p3jPQ3m';
            secureData.authData = authData;
            
            Accept.dispatchData(secureData, responseHandler);
        }
    </script>

and form code:

   <form accept-charset="utf-8" class="form-vertical payment-form" autocomplete="on" id="payment-form" method="POST" action="https://localhost/jgaf13faaf8l40">

    <h3>Contact Information</h3>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group required"><input required="true" class="form-control" placeholder="First Name" id="first_name" type="text" name="first_name" value=""></div>
        </div>
        <div class="col-md-6">
            <div class="form-group required"><input required="true" class="form-control" placeholder="Last Name" autocomplete="family-name" id="last_name" type="text" name="last_name" value=""></div>
        </div>
    </div>

    <div class="row" style="display:none">
        <div class="col-md-12">
            <div class="form-group required"><input required="true" class="form-control" placeholder="Email" autocomplete="email" id="email" type="email" name="email" value=""></div>
        </div>
    </div>

    <p>&nbsp;<br/>&nbsp;</p>

            <h3>Billing Address&nbsp;<span class="help">*Billing address must match address associated with credit card.</span></h3>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group required"><input required="true" class="form-control" autocomplete="address-line1" placeholder="Street" id="address1" type="text" name="address1" value=""></div>
            </div>
            <div class="col-md-6">
                <div class="form-group"><input class="form-control" autocomplete="address-line2" placeholder="Apt/Suite" id="address2" type="text" name="address2" value="2"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group required"><input required="true" class="form-control" autocomplete="address-level2" placeholder="City" id="city" type="text" name="city" value="Odessa"></div>
            </div>
            <div class="col-md-6">
                <div class="form-group required"><input required="true" class="form-control" autocomplete="address-level1" placeholder="State/Province" id="state" type="text" name="state" value="Odessa"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group required"><input required="true" class="form-control" autocomplete="postal-code" placeholder="Postal Code" id="postal_code" type="text" name="postal_code" value="65000"></div>
            </div>
            <div class="col-md-6">
                <div class="form-group country-select required"><select required="true" class="form-control" id="country_id" name="country_id"><option value="" disabled="disabled">Country</option><option value="4">Afghanistan</option><option value="248">Åland Islands</option><option value="8">Albania</option></select></div>
            </div>
        </div>

        <p>&nbsp;<br/>&nbsp;</p>
    
    <h3>Billing Method</h3>

    <div class="row">
        <div class="col-md-9">
                            <div class="form-group required"><input required="true" class="form-control" id="card_number" placeholder="Card Number" autocomplete="cc-number" type="text" name="card_number"></div>
                    </div>
        <div class="col-md-3">
                            <div class="form-group required"><input required="true" class="form-control" id="cvv" placeholder="CVV" autocomplete="off" type="text" name="cvv"></div>
                    </div>
    </div>
    <div class="row">
        <div class="col-md-6">
                            <div class="form-group required"><select required="true" class="form-control" id="expiration_month" autocomplete="cc-exp-month" name="expiration_month"><option value="" disabled="disabled" selected="selected">Expiration Month</option><option value="1">01 - January</option><option value="2">02 - February</option><option value="3">03 - March</option><option value="4">04 - April</option><option value="5">05 - May</option><option value="6">06 - June</option><option value="7">07 - July</option><option value="8">08 - August</option><option value="9">09 - September</option><option value="10">10 - October</option><option value="11">11 - November</option><option value="12">12 - December</option></select></div>
                    </div>
        <div class="col-md-6">
                            <div class="form-group required"><select required="true" class="form-control" id="expiration_year" autocomplete="cc-exp-year" name="expiration_year"><option value="" disabled="disabled" selected="selected">Expiration Year</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option><option value="2019">2019</option><option value="2020">2020</option><option value="2021">2021</option><option value="2022">2022</option><option value="2023">2023</option><option value="2024">2024</option><option value="2025">2025</option><option value="2026">2026</option></select></div>
                    </div>
    </div>
    <div class="row" style="padding-top:18px">
        <div class="col-md-5">
                            <input id="token_billing" type="checkbox" name="token_billing" CHECKED value="1" style="margin-left:0px; vertical-align:top">
                <label for="token_billing" class="checkbox" style="display: inline;">Save card details</label>
                <span class="help-block" style="font-size:15px">
                                    </span>
                    </div>
    </div>

    <div class="col-md-12">
        <div id="js-error-message" style="display:none" class="alert alert-danger"></div>
    </div>

    <p>&nbsp;</p>
    <center>
                    <button type='submit' class='btn btn-success btn-lg'>PAY NOW - 1,500.00 USD</button>
            </center>
    <p>&nbsp;</p>
</form>

Just FYI, I'm testing it on localhost with self-generated SSL certificate. Which may cause a problem?

roman_agently · ‎04-02-2017

Hm, it just went out and works fine now. Is any updates were done on your side? Because I didn't make any changes to my JS code.

Cybersource Developer Community Cybersource Developer Community

getting an error with the new accept.js solution