AcceptUI responseHandler error

[geetfun]

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?

[leehinde]

Hi;

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

[leehinde]

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.

[kevintechie]

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');
    }

[dking]

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:

function responseHandler(response) {
if (response.messages.resultCode === "Error") {
var i = 0;
while (i < response.messages.message.length) {
console.log(
response.messages.message[i].code + ": " +
response.messages.message[i].text
);
i = i + 1;
}
} else {
paymentFormUpdate(response.opaqueData);
}
}

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

[anush]

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

Did anybody found any solution?

[Dimitar_Terzov]

Hi,

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

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

Hope it helps!