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>
