klarna-on-demand
Version:
SDK for Klarna's on-demand purchase service.
88 lines (72 loc) • 2.72 kB
HTML
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src='../lib/klarna-on-demand.js'></script>
<style>
.btn-group-vertical > button{
margin-bottom:10px;
margin-top:10px;
border-radius:10px ;
}
</style>
</head>
<body>
<script>
KlarnaOnDemand.setApiKey('test_d8324b98-97ce-4974-88de-eaab2fdf4f14');
function buyButtonClicked() {
event.preventDefault();
var userToken = getKlarnaUserToken();
if (userToken == null) {
KlarnaOnDemand.openRegistrationView(onSuccess, onError);
} else {
buy(userToken);
}
};
function preferencesButtonClicked() {
event.preventDefault();
KlarnaOnDemand.openPreferencesView(getKlarnaUserToken(), onError);
};
var onSuccess = function(userToken) {
saveKlarnaUserToken(userToken);
buy(userToken);
};
var onError = function(code) {
alert('Error on Klarna Registration. Code: ' + code);
};
function buy(userToken) {
var originProof = new KlarnaOnDemand.OriginProof(9900, "SEK", userToken).toString();
var data = JSON.stringify({
'origin_proof': originProof,
'reference': "TCKT0001",
'user_token': userToken
});
var request = new XMLHttpRequest();
request.open("POST", "http://localhost:9292/pay");
request.setRequestHeader("Content-type", "application/json; charset=utf-8");
request.onreadystatechange = function() {
if(request.readyState == 4 && request.status == 204) {
document.getElementById("info").textContent = "It's " + (new Date().toTimeString()) + " and you have just bought the thing!";
}
else {
document.getElementById("info").textContent = "Purchase failed with status " + request.status;
}
}
request.send(data);
};
function getKlarnaUserToken() {
return window.localStorage.getItem("klarnaUserToken");
};
function saveKlarnaUserToken(klarnaUserToken) {
window.localStorage.setItem("klarnaUserToken", klarnaUserToken);
};
</script>
<div class="btn-group-vertical" role="group" >
<button onclick="buyButtonClicked()" class="btn btn-primary btn-lg top10" id="buyButton" >Buy</button>
<button onclick="preferencesButtonClicked()" class="btn btn-primary btn-lg top10" >Preferences</button>
<h2>
<span class="label label-info" id="info"></span>
</h2>
</div>
</body>
</html>