We are developing a POC for integrating Resco Mobile CRM App with Accept.js to accept mobile payments. I created below HTML page and when I click on Pay button, I am getting the "E_WC_02: The page that embeds Accept.js must be served over an HTTPS connection." error:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Empty Offline HTML page</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="initial-scale=1, user-scalable=no" />
<script src="JSBridge.js"></script>
</head>
<body>
<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>
<button type="button" onclick="sendPaymentDataToAnet()">Pay3</button>
<script type="text/javascript"
src="https://jstest.authorize.net/v1/Accept.js"
charset="utf-8">
</script>
<script type="text/javascript">
function sendPaymentDataToAnet() {
MobileCRM.bridge.alert('Start: ');
var authData = {};
authData.clientKey = "7JCKT3AW5LrZgdCY5AEV4k9tR2h64q52q6xT5WAtFLac4q95pUVk8uT3wyHybv2E";
authData.apiLoginID = "3jB4s3mPac";
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;
Accept.dispatchData(secureData, responseHandler);
function responseHandler(response) {
if (response.messages.resultCode === "Error") {
MobileCRM.bridge.alert('Error: ');
var i = 0;
while (i < response.messages.message.length) {
MobileCRM.bridge.alert('Code: ' + response.messages.message[i].code);
MobileCRM.bridge.alert('text: ' + response.messages.message[i].text);
i = i + 1;
}
} else {
paymentFormUpdate(response.opaqueData);
}
}
}
function paymentFormUpdate(opaqueData) {
MobileCRM.bridge.alert('dataDescriptor: ' + opaqueData.dataDescriptor);
MobileCRM.bridge.alert('dataValue: ' + opaqueData.dataValue);
}
</script>
</body>
</html>
