Reply
Highlighted
Member
Posts: 2
Registered: ‎05-17-2018

Accept Hosted form not opening on tablet PCs

I have integrated the hosted credit card form into our environment and am having an issue with it opening on a PC that is also a tablet. The form will fire if you touch the screen but it will not if you use the track pad or mouse in chrome or mozilla. Below is the code that I am using that is directly from the following example. We have also experienced that for some people on an iPhone once the form pops in they are not able to select any fields to enter data.

 

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

 

<!DOCTYPE html>
<html>

<!--
    This file is a standalone HTML page demonstrating usage of the Authorize.net
    Accept JavaScript library using the integrated payment information form.

    For complete documentation for the Accept JavaScript library, see
    https://developer.authorize.net/api/reference/features/acceptjs.html
-->

<head>
    <title>Sample form</title>
</head>

<body>

<script type="text/javascript" src="https://js.authorize.net/v3/AcceptUI.js" charset="utf-8"></script>
<form id="paymentForm" method="POST" action="https://www.read-a-thon.com/authreturn.php">
    <input type="hidden" name="dataValue" id="dataValue" />
    <input type="hidden" name="dataDescriptor" id="dataDescriptor" />

    <button type="button"
        class="AcceptUI"
        data-billingAddressOptions='{"show":true, "required":false}'
        data-apiLoginID="xxxxxxxx"
        data-clientKey="xxxxxxxx"
        data-acceptUIFormBtnTxt="Submit"
        data-acceptUIFormHeaderTxt="Card Information"
        data-responseHandler="responseHandler">Pay
    </button>
</form>

<script type="text/javascript">

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("paymentForm").submit();
}
</script>

</body>
</html>