topic Re: Accept.js encryption failed in Integration and Testing

Accept.js encryption failed

blackwood821 — Thu, 22 Mar 2018 17:38:52 GMT

Hi,

I am using Accept.js in a single page React application. I have my own AddPaymentProfileForm component so I'm building the form myself and sending the CC info to Accept.js for a token in return. I'm receiving the following error:

E_WC_14: Accept.js encryption failed.

I have analyzed the network requests and both the OPTIONS request and the POST request are receving successful 200 responses. The POST response contains:

code:"I00001"
text:"Successful."

I searched the forums for the "Accept.js encryption failed" message and read some of the suggestions. One of them was to find out if my responseHandler function is getting called twice and IT IS. I can't figure out why it's being called twice. Here is my setup...

The onSubmit event on the form (specified in the render function of the component) is calling a function in the component called sendPaymentDataToAnet.

<AddPaymentProfileForm
     id="paymentForm"
     onSubmit={this.sendPaymentDataToAnet}
/>

sendPaymentDataToAnet = (event, paymentProfile) => {
    event.preventDefault();

    // ...

    let self = this;
    Accept.dispatchData(secureData, responseHandler);

    function responseHandler(response) {
        console.log("responseHandler function called");
        if (response.messages.resultCode === "Error") {
            // stopLoading();
            var i = 0;
            while (i < response.messages.message.length) {
                console.log(
                    response.messages.message[i].code + ": " +
                    response.messages.message[i].text
                );
                // only show the user the first error message
                if (i == 0) {
                    var error = response.messages.message[i].text;
                    self.alert("Error", error);
                }	
                i = i + 1;
            }
        } else {
            paymentFormUpdate(response.opaqueData, paymentProfile);
        }
    }
}

Accept.js is being loaded at the top of the web page before the component is defined in a <script> tag.

Any help is much appreciated. Thank you.

Re: Accept.js encryption failed

svora — Thu, 26 Jul 2018 20:26:34 GMT

I am seeing the same issue. Do you have any updates on this?

Re: Accept.js encryption failed

blackwood821 — Sun, 29 Jul 2018 13:35:35 GMT

I just tested again and I don't have the issue anymore. My code has changed since so I will post my working code below. However, I reverted to the old version of the sendPaymentDataToAnet() function (in my original post) and I DO get the "encryption failed" error but my responseHandler() function DOES NOT get called twice so I'm not sure what else I changed outside of this code to resolve the duplicate call. However, either way, the code below should work for you since it's working for me.

sendPaymentDataToAnet = (event, paymentProfile) => {
        console.log("sendPaymentDataToAnet()");
        event.preventDefault();
        this.setState({ processing: true });

        var authData = {};
            authData.clientKey = this.state.clientKey;
            authData.apiLoginID = this.state.apiLoginID;

        var cardData = {};
            cardData.cardNumber = paymentProfile.cardNumber;
            cardData.month = paymentProfile.expMonth;
            cardData.year = paymentProfile.expYear;
            cardData.cardCode = paymentProfile.cardCode;

        var secureData = {};
            secureData.authData = authData;
            secureData.cardData = cardData;

        let lastResponse = null;

        Accept.dispatchData(secureData, response => {
            // just in case it still gets called twice, ignore the second call
            if (response == lastResponse) {
                console.log("skipping duplicated responseHandler() call because it's the same response as the previous response");
                return;
            }
            lastResponse = response;

            console.log("responseHandler function called");
            if (response.messages.resultCode === "Error") {
                // stopLoading();
                var i = 0;
                while (i < response.messages.message.length) {
                    console.log(
                        response.messages.message[i].code + ": " +
                        response.messages.message[i].text
                    );
                    // only show the user the first error message
                    if (i == 0) {
                        var error = response.messages.message[i].text;
                        console.error("Error", error);
                    }	
                    i = i + 1;
                }
            } else {
                this.paymentFormUpdate(response.opaqueData, paymentProfile);
            }
        });
    }

I hope this helps.

Re: Accept.js encryption failed

blackwood821 — Sun, 29 Jul 2018 13:40:00 GMT

sendPaymentDataToAnet = (event, paymentProfile) => {
        console.log("sendPaymentDataToAnet()");
        event.preventDefault();
        this.setState({ processing: true });

        var authData = {};
            authData.clientKey = this.state.clientKey;
            authData.apiLoginID = this.state.apiLoginID;

        var cardData = {};
            cardData.cardNumber = paymentProfile.cardNumber;
            cardData.month = paymentProfile.expMonth;
            cardData.year = paymentProfile.expYear;
            cardData.cardCode = paymentProfile.cardCode;

        var secureData = {};
            secureData.authData = authData;
            secureData.cardData = cardData;

        let lastResponse = null;

        Accept.dispatchData(secureData, response => {
            // just in case it still gets called twice, ignore the second call
            if (response == lastResponse) {
                console.log("skipping duplicated responseHandler() call because it's the same response as the previous response");
                return;
            }
            lastResponse = response;

            console.log("responseHandler function called");
            if (response.messages.resultCode === "Error") {
                // stopLoading();
                var i = 0;
                while (i < response.messages.message.length) {
                    console.log(
                        response.messages.message[i].code + ": " +
                        response.messages.message[i].text
                    );
                    // only show the user the first error message
                    if (i == 0) {
                        var error = response.messages.message[i].text;
                        console.error("Error", error);
                    }	
                    i = i + 1;
                }
            } else {
                this.paymentFormUpdate(response.opaqueData, paymentProfile);
            }
        });
    }

The main difference in this version of the code is that it uses an arrow function instead of defining a new function inside of sendPaymentDataToAnet() function. I'm not sure exactly why this works over the other way but it is a bit strange to define a function inside of a React event handler so it must just be the way React handles that scenario.

I hope this helps.

Re: Accept.js encryption failed

Gregory845 — Wed, 17 Oct 2018 10:33:10 GMT

@blackwood821 wrote:
Hi,

I am using Accept.js in a single page React application. I have my own AddPaymentProfileForm component so I'm building the form myself and sending the CC info to Accept.js for a token in return. I'm receiving the following error:
E_WC_14: Accept.js encryption failed.
I have analyzed the network requests and both the OPTIONS request and the POST request are receving successful 200 responses. The POST response contains:
code:"I00001"
text:"Successful."
I searched the forums for the "Accept.js encryption failed" message and read some of the suggestions. One of them was to find out if my responseHandler function is getting called twice and IT IS. I can't figure out why it's being called twice. Facetime PC Here is my setup...

The onSubmit event on the form (specified in the render function of the component) is calling a function in the component called sendPaymentDataToAnet.
<AddPaymentProfileForm
     id="paymentForm"
     onSubmit={this.sendPaymentDataToAnet}
/>
sendPaymentDataToAnet = (event, paymentProfile) => {
    event.preventDefault();

    // ...

    let self = this;
    Accept.dispatchData(secureData, responseHandler);

    function responseHandler(response) {
        console.log("responseHandler function called");
        if (response.messages.resultCode === "Error") {
            // stopLoading();
            var i = 0;
            while (i < response.messages.message.length) {
                console.log(
                    response.messages.message[i].code + ": " +
                    response.messages.message[i].text
                );
                // only show the user the first error message
                if (i == 0) {
                    var error = response.messages.message[i].text;
                    self.alert("Error", error);
                }	
                i = i + 1;
            }
        } else {
            paymentFormUpdate(response.opaqueData, paymentProfile);
        }
    }
}
Accept.js is being loaded at the top of the web page before the component is defined in a <script> tag.

Any help is much appreciated. Thank you.

I have the same issue. Did you happen to resolve this?

Re: Accept.js encryption failed

blackwood821 — Wed, 31 Oct 2018 14:14:36 GMT

@Gregory845 See my previous reply above. It has been a while since I encountered the original issue. When I went back to check my current working solution the main difference I saw was that I was using an arrow function.

Re: Accept.js encryption failed

chsriniv9 — Wed, 05 Dec 2018 12:15:56 GMT

Hi,

Based on the code snippet provided in the post by @blackwood821 in sendpaymentdatatonet method there are not setting the authdata and card data values . Can you please check if you are setting the values first and then try to send to the Accept.dispatchData().

Please follow the below link has the information on how to send data to Accept.dispatchData() method.

https://developer.authorize.net/api/reference/features/acceptjs.html

HTH, Thanks

Re: Accept.js encryption failed

blackwood821 — Mon, 07 Jan 2019 14:46:14 GMT

@chsriniv9 In the original post I didn't include all of the code in the snippet but I indicated there is more code via the comment:

// ...

So I was always passing the correct data. If you look at the code snippet further down in this thread you will see the data being set.

Re: Accept.js encryption failed

menudwai — Wed, 15 May 2019 05:47:51 GMT

how can i access www.mcdvoice.com? They are showing me some errors while i am accessing it.