Cybersource Developer Community Cybersource Developer Community

kofhearts · ‎03-10-2018

I have a payment form as follows

<body>
    <g:if test="${flash.message}">
        <div class="message">${flash.message}</div>
    </g:if>
    <div class="content">
    <h1>Secure Checkout</h1>

        <g:form name="paymentForm"
              method="POST"
              action="processAcceptPayment" >
            <input type="text" name="cardNumber" id="cardNumber" placeholder="cardNumber"/> <br><br>
            <input type="text" name="expMonth" id="expMonth" placeholder="expMonth"/> <br><br>
            <input type="text" name="expYear" id="expYear" placeholder="expYear"/> <br><br>
            <input type="text" name="cardCode" id="cardCode" placeholder="cardCode"/> <br><br>
            <input type="hidden" name="dataValue" id="dataValue" />
            <input type="hidden" name="dataDescriptor" id="dataDescriptor" />
            <button type="button" onclick="sendPaymentDataToAnet()">Pay</button>
        </g:form>


    </div>




<g:javascript>


    function sendPaymentDataToAnet() {
        var authData = {};
        authData.clientKey = "valid key";
        authData.apiLoginID = "valid id";

        var cardData = {};
        cardData.cardNumber = document.getElementById("cardNumber").value;
        cardData.month = document.getElementById("expMonth").value;
        cardData.year = document.getElementById("expYear").value;
        cardData.cardCode = document.getElementById("cardCode").value;

        var secureData = {};
        secureData.authData = authData;
        secureData.cardData = cardData;
        // If using banking information instead of card information,
        // send the bankData object instead of the cardData object.
        //
        // secureData.bankData = bankData;

        Accept.dispatchData(secureData, responseHandler);

    }

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

    function paymentFormUpdate(opaqueData) {
        document.getElementById("dataDescriptor").value = opaqueData.dataDescriptor;
        document.getElementById("dataValue").value = opaqueData.dataValue;

        document.getElementById("cardNumber").value = "";
        document.getElementById("expMonth").value = "";
        document.getElementById("expYear").value = "";
        document.getElementById("cardCode").value = "";
        document.getElementById("accountNumber").value = "";
        document.getElementById("routingNumber").value = "";
        document.getElementById("nameOnAccount").value = "";
        document.getElementById("accountType").value = "";

        document.getElementById("paymentForm").submit();
    }


</g:javascript>
</body>

This generates the payment form and I enter test credit card numbers and click Pay.

The values i use are

no = 370000000000002

month = 12

year = 19

card code = 123

I get the following error in my javascript console.

"E_WC_14: Accept.js encryption failed"

I was just following the accept.js tutorial from the official page.

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

I appreciate any help as to the reason for this "Encryption Failed" error? Thanks!

karan56 · ‎10-26-2019

@kofhearts wrote: