Getting an "HTTPS Connection is Required" Error, but I'm Already Using HTTPS - Using Accept.js to Integrate Authorize.net Payment Gateway

Question

Goal: Integrate credit card processing on my website using Accept.js with my own payment form.

Problem: I have an active valid SSL certificate on my website that grants my website HTTPS protection. Despite having HTTPS protection, whenever I try doing test transactions using these test cards (found here: https://developer.authorize.net/hello_world/testing_guide.html) I get an error that is caused from not having a secure HTTPS connection, which is obviously not true. I do have a secure HTTPS connection. Here is a screenshot of the error:

Debug error saying that I need an HTTPS-secured conection.

EDIT: Literally just saw this after I posted my question. Here is what I saw:

action="https://YourServer/PathToExistingPaymentProcessingScript" >

This looks like placeholder stuff. What am I supposed to put here?

What I've tried: I've contacted my host and they renewed my SSL certificate. HTTPS is running on all aspects of my website. I've contacted Authorize.net and both of their support teams. Neither include any professionals in coding, for some bizarre reason, and neither have helped. They all just ping-pong me constantly to my "web developer," which is just me.

I've cleared my history and cache to make sure I was looking at my current website. Nothing happened.

I've used both my Authorize.net sandbox and merchant accounts. Both have the same error.

I flushed my DNS cache in the command prompt. The error persisted.

===========================================================================================================

Below is my HTML file:

<!--Accept.js sandbox library used to communicate with the Authorize.net payment gate-->
    <script type="text/javascript"
    src="https://jstest.authorize.net/v1/Accept.js"
    charset="utf-8">
    </script>

<!--PAYMENT GATEWAY TESTING-->
  <form id="paymentForm"
    method="POST"
    action="https://YourServer/PathToExistingPaymentProcessingScript" >
    <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="text" name="accountNumber" id="accountNumber" placeholder="accountNumber"/> <br><br>
    <input type="text" name="routingNumber" id="routingNumber" placeholder="routingNumber"/> <br><br>
    <input type="text" name="nameOnAccount" id="nameOnAccount" placeholder="nameOnAccount"/> <br><br>
    <input type="text" name="accountType" id="accountType" placeholder="accountType"/> <br><br>-->
    <input type="hidden" name="dataValue" id="dataValue" />
    <input type="hidden" name="dataDescriptor" id="dataDescriptor" />
    <button type="button" onclick="sendPaymentDataToAnet()">Pay</button>
  </form>

  <script type="text/javascript">

    function sendPaymentDataToAnet() {
      var authData = {};
        authData.clientKey = "MY_CLIENT_KEY";
        authData.apiLoginID = "MY_LOGIN_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;

      // If using banking information instead of card information,
      // build a bankData object instead of a cardData object.
      //
      // var bankData = {};
      //     bankData.accountNumber = document.getElementById('accountNumber').value;
      //     bankData.routingNumber = document.getElementById('routingNumber').value;
      //     bankData.nameOnAccount = document.getElementById('nameOnAccount').value;
      //     bankData.accountType = document.getElementById('accountType').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;

      // If using your own form to collect the sensitive data from the customer,
     // blank out the fields before submitting them to your server.
      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();
    }
  </script>

Screenshot of the error I receive in Google Chrome after submitting a test transaction:

DNS Error caused by not having a secure HTTPS protection. At least, that's my assumption.

I've been working on this for almost a month and this seems like it should be so simple. What could I possibly be missing? Thank you for your help.

Answer 1

To fix this, make sure that all of the resources (scripts, images, etc.) on your payment form are being loaded over HTTPS. One way to check this is to look at the source code of the page and check the URLs of the resources being loaded.

Also, you might want to check the browser console for any errors that might provide more details about the cause of the problem. You can access the browser console by pressing F12 or right-clicking on the page and selecting "Inspect Element" or "Developer Tools" (depending on the browser you are using).

As for the "action" attribute of the payment form, it should point to the URL of your payment processing script. This is the script that will handle the payment data submitted by the form and communicate with the payment gateway (Authorize.net) to process the payment.

You will need to replace "https://YourServer/PathToExistingPaymentProcessingScript" with the actual URL of your payment processing script. If you don't have one yet, you will need to create it.

This script will receive the payment data submitted by the form, validate it, and send it to the payment gateway for processing. The payment gateway will then send a response back to the script, which will handle the response and update the payment status on your website.