topic AcceptUI responseHandler error in Integration and Testing

AcceptUI responseHandler error

geetfun — Sun, 01 Jul 2018 16:28:02 GMT

Hi all,

I'm receiving the following error when using AcceptUI (hosted mode):

Uncaught TypeError: window[s] is not a function
    at _sendRespondBackToMerchant (AcceptUI.js:1)
    at U (AcceptUI.js:1)

When you prettify the minified JS source (https://jstest.authorize.net/v3/AcceptUI.js), you'll see that the code tries to find out if the responseHandler is a function or not:

"function"==typeof s?s.call(null,t):window[s](t)

Unfortunately, the responseHandler is set as a data-attribute (data-responseHandler) on the initiating button.

Example:

<form id="paymentForm"
    method="POST"
    action="https://YourServer/PathToExistingPaymentProcessingScript">
    <input type="hidden" name="dataValue" id="dataValue" />
    <input type="hidden" name="dataDescriptor" id="dataDescriptor" />
    <button type="button"
        class="AcceptUI"
        data-billingAddressOptions='{"show":true, "required":false}' 
        data-apiLoginID="YOUR API LOGIN ID" 
        data-clientKey="YOUR PUBLIC CLIENT KEY"
        data-acceptUIFormBtnTxt="Submit" 
        data-acceptUIFormHeaderTxt="Card Information" 
        data-responseHandler="responseHandler">Pay
    </button>
</form>

When set using the example, the code breaks when the AcceptUI library tries to determine if it's a function or not. It always turns out as a string. FYI: The responseHandler value (regardless if set inline or by JavaScript) returns as a string no matter what in my testing:

element.setAttribute("data-responseHandler", function() { console.log('Hello World'); });

Will still return as "string" when using typeof.

Is this a bug in the AcceptUI code or is there a workaround?

Re: AcceptUI responseHandler error

leehinde — Wed, 18 Jul 2018 16:59:13 GMT

Hi;

I just ran into this. Did you get it figured out?

Re: AcceptUI responseHandler error

leehinde — Wed, 18 Jul 2018 18:17:40 GMT

Here's what I found.

My callback is called:

myNameSpace.myResponseHandler.

In my button definition I had:

" data-responseHandler='myNameSpace.myResponseHandler'>

Based on problems with earlier versions of AcceptUI that I found discussed here, I changed as follows.

After the AcceptUI is loaded, I do this:

window.responseHandler = myNameSpace.myResponseHandler; // assign my response handler to a global 'responseHandler'

and then I changed the responseHandler call as so:

data-responseHandler='responseHandler'

I'm not sure if responsHandler is a magic word (I'm guessing not), or if there's something about calling a nested function or who knows. But this works.

Re: AcceptUI responseHandler error

kevintechie — Fri, 02 Nov 2018 17:28:16 GMT

The leehinde explanation helped a lot.

In my case, I'm using Vue w/ Nuxt and ran accross the same issue.

template.vue:

 mounted: function() {
    let accept = document.createElement("script");
    accept.setAttribute("src", "https://jstest.authorize.net/v3/AcceptUI.js");
    document.body.appendChild(accept);
    if (process.client) {
      window.checkout = this.checkout;
    }

...<snip>...

 methods:{
    checkout() {
      console.log('hello world');
    }

Re: AcceptUI responseHandler error

dking — Thu, 16 Apr 2020 19:16:21 GMT

I'm having the same problem.

button code:

<form id="paymentForm"
method="POST"
action="https://YourServer/PathToExistingPaymentProcessingScript">
<input type="hidden" name="dataValue" id="dataValue" />
<input type="hidden" name="dataDescriptor" id="dataDescriptor" />
<button type="button"
class="AcceptUI btn btn-primary"
data-billingAddressOptions='{"show":true, "required":true}'
data-apiLoginID="6jWN5Num7s"
data-clientKey="45WcsGtuZutcLj2Kfu5qx5dRk5Bb55vVcZ9GB9kzqjsqQBn3y99VA5jKX8TUKd2q"
data-acceptUIFormBtnTxt="Submit"
data-acceptUIFormHeaderTxt="Card Information"
data-responseHandler= "responseHandler">
Submit For Payment
</button>
</form>

Javascript code:

Also, what is this:https://YourServer/PathToExistingPaymentProcessingScript? No documentation on Authorize.net.

The error I'm getting is: window[I] is not a function.. AcceptUI.js:1

Re: AcceptUI responseHandler error

anush — Tue, 22 Sep 2020 13:38:48 GMT

I am also facing this issue in React.js version 16.13.1

Did anybody found any solution?

Re: AcceptUI responseHandler error

Dimitar_Terzov — Mon, 12 Oct 2020 13:44:46 GMT

Hi,

I used this solution for React, according to solutions above and it's working for me:

useEffect(() => {
window.responseHandler = responseHandler;
});

Hope it helps!