Accept.js function issues?

[hhalim]

Hi,

Currently i'm trying to intregrate Accept.js into my website. It seems i have it all set up correctly and its just that i'm having an issue with the AcceptCore.js issues.(TypeError: window[b] is not a function)

Hence i am unable to run the responseHandler callback function.

Any help would be needed.

[hhalim · Accepted solution]

Aight,

It seems its depends on my framework apparently. Im using knockout.js framework hence my declaration for a function is different that causes the response callback execution issues.

(normal javascript function calling)

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);
        }
    } else {
        useOpaqueData(response.opaqueData)
    }
}

(knockoutjs function calling)

  responseHandler = function(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);
                        }
                    } else {
                        useOpaqueData(response.opaqueData)
                    }
                }

I'm replying this anyways since some people might think its the Accept.js issues, apparently its not. Check your framework documentation just to make sure how the function calling is called.

[dgohlke]

I ran into this problem too. I had to attach the callback function to window, e.g. 

 window.responseHandler = function(response) {

[jenlampton]

I also had this problem, when calling these functions from within jQuery. Thanks for the recommended solution, it cleared things right up for me :) 

[Aaron]

Just a heads up for anyone watching this thread that we've released code in sandbox that fixes many issues with Accept.js 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.

This last fix makes it easier to call the responseHandler function, so it may actually fix the issue with calling the function in Knockout or other frameworks. If anyone has a similar issue and sees this thread, it would be helpful to let us know if there's any change there.

[vamshi27]

I am still facing this issue in ReactJS

Loading the script with postscribe

componentDIdMount={
 postscribe(
      '#paymentButton',
      `<script language="javascript" src="https://jstest.authorize.net/v3/AcceptUI.js"></script>`
    );
}

Rendering the form with 

<form id="paymentForm" method="POST" action="">
          <input type="hidden" name="dataValue" id="dataValue" />
          <input type="hidden" name="dataDescriptor" id="dataDescriptor" />
          <InputDiv id="proceed">
            <Button
              type="button"
              id="paymentButton"
              className="AcceptUI"
              data-billingAddressOptions='{"show":true, "required":false}'
              data-apiLoginID="loginId"
              data-clientKey="key"
              data-acceptUIFormBtnTxt="Submit"
              data-acceptUIFormHeaderTxt="Card Information"
              data-paymentOptions='{"showCreditCard": true, "showBankAccount": true}'
              data-responseHandler={handleSendPaymentToAuthorizeNet}
              crossOrigin="anonymous"
            >
              Proceed
            </Button>
          </InputDiv>
        </form>

[Complex210]

I solved this problem by changing my script source from https://jstest.authorize.net/v3/AcceptUI.js to https://js.authorize.net/v3/AcceptUI.js