Reply
Contributor
Posts: 21
Registered: ‎01-07-2018

Accept.js encryption failed

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.

 

Contributor
Posts: 11
Registered: ‎07-25-2018

Re: Accept.js encryption failed

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

Contributor
Posts: 21
Registered: ‎01-07-2018

Re: Accept.js encryption failed

[ Edited ]

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.

 

Contributor
Posts: 21
Registered: ‎01-07-2018

Re: Accept.js encryption failed

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.

 

Member
Posts: 2
Registered: ‎10-14-2018

Re: Accept.js encryption failed


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

Contributor
Posts: 21
Registered: ‎01-07-2018

Re: Accept.js encryption failed

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

Highlighted
Developer
Posts: 15
Registered: ‎12-05-2017

Re: Accept.js encryption failed

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