Accept.js encryption failed

[blackwood821]

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.

[svora]

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

[blackwood821]

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.

[blackwood821]

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

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.

[Gregory845]

---

@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?

[blackwood821]

@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.

[chsriniv9]

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

[blackwood821]

@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.

[menudwai]

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