I've literally copied/pasted this code from the Auth.net documentation for the Accept.js hosted payment form into an HTML file on my dev server. The documentation is available here: https://developer.authorize.net/api/reference/features/accept_hosted.html
The problem I am having is on mobile. When you click the "Pay" button and the form is shown, the "X" button that should close the form rarely works if it does at all. It's like the click event is registered with some element just outside of the "X" rather than the "X". I contacted Authorize.net support and they said they were aware of the issue but didn't have any solutions or plans to fix the issue at this time and referenced me here. I've tested this on both IOS and Android devices.
<!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>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample form</title>
</head>
<body>
<script type="text/javascript"
src="https://jstest.authorize.net/v3/AcceptUI.js"
charset="utf-8">
</script>
<form id="paymentForm"
method="POST"
action="https://YourServer/PathToExistingPaymentProcessingScript">
<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=""
data-clientKey=""
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>
