cancel
Showing results for 
Search instead for 
Did you mean: 

implement getHostedpaymentPageRequest in Javascript

I need to call  getHostedpaymentPageRequest and generate a token using javascript with in HTML. I am using authorize.net provided code to display the form. But i need to generate token and pass the token information to my payment page. there is no example of javascript code on their webiste to generate the token. https://developer.authorize.net/api/reference/index.html#accept-suite-get-an-accept-payment-page

Here is my code:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<head>
<title>HostedPayment Test Page</title>

<script src="scripts/lib/jquery.min.js"></script>
<script type="text/javascript">

$(function () {

$("#btnOpenAuthorizeNetIFrame").click(function () {
$("#add_payment").show();
$("#send_token").attr({ "action": "https://test.authorize.net/payment/payment", "target": "add_payment" }).submit();

});

});


</script>
</head>
<body>

<div>
Open Authorize.net in an iframe to complete transaction
<button id="btnOpenAuthorizeNetIFrame" onclick="">Show Payment Form</button>
</div>
<div id="iframe_holder" class="center-block" style="width:90%;max-width: 1000px;height:90%max-height: 1000px">
<iframe id="add_payment" class="embed-responsive-item panel" name="add_payment" width="100%" height="1000" frameborder="0" scrolling="yes" hidden="false">
</iframe>
</div>
<form id="send_token" action="" method="post" target="add_payment" >
<input type="hidden" name="token" value="TOKEN VALUE" />

</form>

<script type="text/javascript">

(function () {
if (!window.AuthorizeNetIFrame) window.AuthorizeNetIFrame = {};
AuthorizeNetIFrame.onReceiveCommunication = function (querystr) {
var params = parseQueryString(querystr);
switch (params["action"]) {
case "successfulSave":
break;
case "cancel":
break;
case "resizeWindow":
var w = parseInt(params["100%"]);
var h = parseInt(params["100%"]);
var ifrm = document.getElementById("add_payment");
ifrm.style.width = w.toString() + "px";
ifrm.style.height = h.toString() + "px";
break;
case "transactResponse":
var ifrm = document.getElementById("add_payment");
ifrm.style.display = 'none';
}
};

function parseQueryString(str) {
var vars = [];
var arr = str.split('&');
var pair;
for (var i = 0; i < arr.length; i++) {
pair = arr[i].split('=');
vars.push(pair[0]);
vars[pair[0]] = unescape(pair[1]);
}
return vars;
}
}());

</script>
</body>
</html>

 

Please help I need to generate token using javascript. 

2 REPLIES 2

@furqanmajeed007 to get the token you don't use client side JS. You use node.js. 

Renaissance
All Star

The problem with doing this client-side isn't a technical issue but a security issue.   You'd be initiating requests from the client's ip address and running it on the client's browser and having to expose your credentials to do so.  So it seems like a bad idea.

But there's probably nothing stopping you from doing this client-side.

You can find code examples here:

https://github.com/orgs/AuthorizeNet/repositories?type=all

mkienenb
Contributor