topic Re: Accept.js - Exceptions regarding failure to load from CDN and bad CORS headers in Integration and Testing

Accept.js - Exceptions regarding failure to load from CDN and bad CORS headers

describeit — Fri, 11 Nov 2016 18:25:00 GMT

I'm getting two errors when loading the library:

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

2) Library is not coming from Accept CDN.

based on some posts from a previous thread here back in August (https://community.developer.authorize.net/t5/Integration-and-Testing/Accept-js-error-E-WC-14-Accept-js-encryption-failed/td-p/55531/page/2)

I've tried not only loading the script as listed in the official documentation:

This generates error #1 above related to the CORS origin headers.

I've also tried loading the script dynamically as recommended by the moderator on the thread by doing this:

$(document).ready(function () {
        $.getScript(jsUrl, function (data, textStatus, jqxhr) {
            dispatchEvent(new Event('load'));
            GetScriptCallback();
        });
    });

and this generates both of the errors listed above.

Since both errors appear to be blocking issues, I can't seem to get past it, so at the moment I'm dead in the water.

From the thread I cited above, it seems these errors just magically stopped happening for some folks and then came back randomly and then stopped again and so on. It seems I'm at a point where they are reappearing.

I'm not sure what the status of the Accept.js library but based on the open threads and the errors I'm stills seeing 2 months later it seems like somebody shipped it before it was ready for primetime.

Nonetheless, I've now got a client who is looking to get up and running with it next week and I'm stuck sorting out these errors so I'd appreciate some assistance.

Any updates on what the latest code or documentation is for this library?

Re: Accept.js - Exceptions regarding failure to load from CDN and bad CORS headers

krisajenkins — Mon, 14 Nov 2016 10:53:21 GMT

I'm getting this same CORS error, followed by:

AcceptCore.js:1 Uncaught TypeError: window[c] is not a function(…)

...when I try to submit. :-(

Re: Accept.js - Exceptions regarding failure to load from CDN and bad CORS headers

describeit — Mon, 14 Nov 2016 14:24:12 GMT

krisajenkins - I'm also seeing that error regarding window[c] as well. It seems to happen only when i actually call the dispatchData method.

Any updates from the admins on any of this?

Re: Accept.js - Exceptions regarding failure to load from CDN and bad CORS headers

RichardH — Mon, 14 Nov 2016 15:23:39 GMT

Hello @describeit

Sorry for the delay, it was a holiday for us last Friday. I've notified our product team about your issue.

Richard

Re: Accept.js - Exceptions regarding failure to load from CDN and bad CORS headers

describeit — Mon, 14 Nov 2016 16:55:45 GMT

Thanks Richard, I'll keep an eye out for a response.

Re: Accept.js - Exceptions regarding failure to load from CDN and bad CORS headers

jhoffman20 — Tue, 15 Nov 2016 15:45:14 GMT

I am having this same issue. I decided to install the accept-sample-app from the Authorize.net github project, and it has the same issue:

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

My project is completely dead in the water due to this bug.

Thank you,

Jeff

Re: Accept.js - Exceptions regarding failure to load from CDN and bad CORS headers

describeit — Tue, 15 Nov 2016 16:19:59 GMT

Admins any updates on this?

Is anyone successfully using this library?

FYI - I received an email from support yesterday asking me to ensure I was declaring UTF-8 charset on the page and the script include. I am doing both already and its still producing the error.

Still produces:

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

Re: Accept.js - Exceptions regarding failure to load from CDN and bad CORS headers

brianmc — Tue, 15 Nov 2016 16:21:47 GMT

Hi guys,

I have a very simple test page hosted at https://brianmc.github.io/test-acceptjs.html, the source is on github at https://github.com/brianmc/brianmc.github.io/blob/master/test-acceptjs.html

Note that if you open a js console you will see the CORS error on load, that one is due to the internal core library not being available for external access, it does not impact processing but it is unfortunate that the error presents. I have shown this error plus the successful nonce returned in the screen shot below.

Hope this helps but please let me know if not and we can continue troubleshooting,

Brian

Re: Accept.js - Exceptions regarding failure to load from CDN and bad CORS headers

describeit — Tue, 15 Nov 2016 17:15:03 GMT

Hi Brian,

Thanks for the response. I've used your code and gone line by line through it. I'm getting much farther but its still failing.

The error occurs on line 181 in the AcceptCore.js file. In the compressed/minified code it reads as

window[b](c);

If I put a breakpoint on that line, window[b] is in fact undefined. b itself looks to contain the responseHandler method and c accurately contains a successful response with a payment Nonce included.

Since b is an input parameter to the method, why is it being accessed via window[b] instead of just b? If I call b(c) that works, but unfortunately its happening inside of AcceptCore.js which I can't change.

PS - I'm loading the script tags in the HTML head tag just like in your example, but my execution is a bit more complex than your example. I'm invoking the script from within a RequireJS module in a function that is invoked by an .on('submit') event listener.

Is it possible that this is causing part of the problem? I don't even know where to begin debugging that, but woudl love to know why your referencing the callback handler from within the window array.

Re: Accept.js - Exceptions regarding failure to load from CDN and bad CORS headers

krisajenkins — Tue, 15 Nov 2016 17:18:02 GMT

Thanks for the response brianmc, but I'm afraid it doesn't help. I get that CORS error, ignore it, and when I call dispatchData I get that window[c] error posted above.

My setup is much simpler than describeit's, but it looks like it's broken either way. :-(

Re: Accept.js - Exceptions regarding failure to load from CDN and bad CORS headers

jhoffman20 — Tue, 15 Nov 2016 17:24:44 GMT

Brian,

FYI: we are trying this with a sandbox account. Is that the issue? I am not sure how Auth.net routes requests through the back end, but I wonder if perhaps a different server is handling the request when a sandbox account is referenced?

Thanks

Jeff

Re: Accept.js - Exceptions regarding failure to load from CDN and bad CORS headers

describeit — Tue, 15 Nov 2016 17:26:11 GMT

Hi Brian,

In reviewing your code again, I just realized that instead of passing the actual callback method into dispatchData() your only passing in the name of the callback method and forcing your code to go find it in the window array.

This seems like a really convoluted way to accomplish this and in my situation where I have a non-trivial js architecture somewhat impossible to actually implement. Is there plans to allow dispatchData() to accept the actual function instead of a string to the function name?

Re: Accept.js - Exceptions regarding failure to load from CDN and bad CORS headers

describeit — Tue, 15 Nov 2016 17:30:04 GMT

Kris and Jeff, make sure your passing in a string for the second parameter for dispatchData and not the actual responseHandler method.

I'm coming from the Stripe world where you just pass in the responseHandler method and your done, but this requires you to pass in the name of the method as a string and then define the responseHandler as a global function that can then be found by window[c].

Kind of unorthodox and a pain to deal with, but once i adjusted for that I got it to work.

Invoking Call:

Accept.dispatchData(secureData, 'handleAuthnetResponse');

Note the second parameter is a string, not a variable.

ResponseHandler:

  window.handleAuthnetResponse = function(response) {
    var error_messages = '';
    var error_container = '';

    if (response.messages.resultCode === 'Error') {
      for (var i = 0; i < response.messages.message.length; i++) {
        error_messages = error_messages + response.messages.message[i].code + ':';
        error_messages = error_messages + response.messages.message[i].text + '<br/>';
      }

      error_container = '<div class="alert alert-danger"><a class="close" data-dismiss="alert">×</a>' + error_messages + '</div>';

      $authnetRoot.find('#processor_error').html(error_container).show();
      $authnetRoot.find('button[type=submit]').prop('disabled', false);
      $authnetRoot = null;
      return false;
    }
    else {
      console.log(response.opaqueData.dataDescriptor);
      console.log(response.opaqueData.dataValue);

      $authnetRoot.find('.authnet-card-token').val(response.opaqueData.dataValue);
      $authnetRoot.find('form.authnet-on')[0].submit();
      return true;
    }
  }

Re: Accept.js - Exceptions regarding failure to load from CDN and bad CORS headers

brianmc — Tue, 15 Nov 2016 17:47:27 GMT

I'm afraid lazy loading does not work in this release of Accept.js. This is our number one request for the next version and we hope to get it out soon. Can you try without using require?

Brian

Re: Accept.js - Exceptions regarding failure to load from CDN and bad CORS headers

describeit — Tue, 15 Nov 2016 20:37:45 GMT

Brian,

I'm using the ruby-sdk version of the Authorize.Net API and I'm a bit unsure how to build the CreateTransactionRequest that you list in your sample application that you linked to above.

    transaction = Transaction.new(params[:api_login_id] , params[:transaction_key] , :gateway=>:sandbox)

    request = CreateTransactionRequest.new

    request.transactionRequest = TransactionRequestType.new()
    request.transactionRequest.transactionType = TransactionTypeEnum::AuthCaptureTransaction
    request.transactionRequest.amount = params[:amount]
    request.transactionRequest.payment = PaymentType.new

    request.transactionRequest.payment.creditCard = CreditCardType.new(params[:card_number] , params[:exp_date] , card_code)

What do I replace the CreditCardType.new command with to generate the opaqueData structure that you have laid out.

Its unclear in the source code in github how that is being handled. Any advice on that would be much appreciated.

Re: Accept.js - Exceptions regarding failure to load from CDN and bad CORS headers

brianmc — Tue, 15 Nov 2016 22:05:31 GMT

We have a sample in our Ruby Sample code repo: https://github.com/AuthorizeNet/sample-code-ruby/blob/master/MobileInappTransactions/create-an-accept-transaction.rb

I have just updated it as the data descriptor was incorrect. I'm still testing with a live token but I wanted to get you the sample at least.

Brian

Re: Accept.js - Exceptions regarding failure to load from CDN and bad CORS headers

krisajenkins — Wed, 16 Nov 2016 09:27:12 GMT

Brilliant, thanks describeit! I was passing a string, but the callback function I'd defined wasn't in window scope, so their callback hack couldn't find it. When I put the callback at the top-level (yuck!) it works.

Brianmc, is there a reason for the callback parameter being a globally-scoped string-name-of-a-function? I've never seen anyone else handle callbacks in this way, and it seems like a real hack from here. It's just cost us 3 days progress, so it would be nice to know there's some method in the madness...

Re: Accept.js - Exceptions regarding failure to load from CDN and bad CORS headers

firebird — Sun, 01 Jan 2017 01:14:34 GMT

Thanks @describeit!

For me, the crucial part to get Accept.js working was the terrible practice of declaring the function on the window object:

window.handleAuthnetResponse = function(response) {

Re: Accept.js - Exceptions regarding failure to load from CDN and bad CORS headers

dustin1 — Thu, 09 Feb 2017 17:57:45 GMT

Although this thread is marked with a solution, it sounds like the CORS issue was not resolved?

Re: Accept.js - Exceptions regarding failure to load from CDN and bad CORS headers

Aaron — Tue, 07 Mar 2017 18:10:18 GMT

Hi @dustin1,

As of today, the CORS issue is resolved in sandbox.

For anyone else watching this thread, we've released code in sandbox that fixes these issues, 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!