Does anyone know if there are any other API methods similar to accept.js where credit card data is contained client side? I’ve experimented with accept.js and would like something with a bit more of my own coding. I’ve built an example using authorize.net’s JSON example but I can’t see how to keep the transactionkey private. I prefer to build my own forms and interfaces. My primary goal is to keep all credit card data client side without exposing my authorize.net credentials. Accept.js uses authData.clientKey and authData.apiLoginID as public credentials. The JSON example uses apiLoginID with the transactionkey (not a public credential). I'm actually new to all this so I welcome any clarifications. Here is my working JSON sandbox test with the transactionkey exposed. Any direction would be appreciated.
<html>
<head>
<title>authorize.net</title>
<script type="text/javascript">
function post() {
var data = JSON.stringify( {
createTransactionRequest: {
merchantAuthentication: {
name: '<id>',
transactionKey: '<key>'
},
refId: '123456',
transactionRequest: {
transactionType: 'authCaptureTransaction',
amount: '5',
payment: {
creditCard: {
cardNumber: '5424000000000015',
expirationDate: '2020-12',
cardCode: '999'
}
},
poNumber: '683128',
customer: {
id: '99999456654'
},
customerIP: '192.168.1.1',
transactionSettings: {
setting: {
settingName: 'testRequest',
settingValue: 'false'
}
}
}
}
} );
if (window.XMLHttpRequest) {
var XHR = new XMLHttpRequest();
} else {
var XHR = new ActiveXObject("Microsoft.XMLHTTP");
}
XHR.open("POST","https://apitest.authorize.net/xml/v1/request.api",true);
XHR.setRequestHeader("Content-Type", "application/json");
XHR.onreadystatechange = function () {
if (XHR.readyState === 4 && XHR.status === 200) {
var jsonx = JSON.parse(XHR.responseText);
alert(jsonx.transactionResponse.responseCode);
alert(jsonx.transactionResponse.messages[0]['description']);
alert(jsonx.transactionResponse.transHashSha2);
}
};
XHR.send(data);
}
</script>
</head>
<body>
<div><input type="button" value="submit" onclick="post();"></div>
</body>
</html>
