<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Payment request</title>
<script type="text/javascript" charset="utf-8" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script type="text/javascript">
function getUrlParameter(sParam)
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam)
{
return sParameterName[1];
}
}
}
var id = getUrlParameter('id');
if (id) {
var uri_path = location.pathname;
var jqxhr = $.getJSON(uri_path.replace("index.html", "req/"+ id[0] + "/"+ id[1] + "/"+ id + "/"+ id + ".json"), function() {
console.log("getJSON:success");
})
.done( function(data) {
new QRCode(document.getElementById("qrcode"), data.URI);
$("<p />").text(data.memo).appendTo($("p#reason"));
$("<p />").text(data.amount/100000000 + "BTC").appendTo($("p#amount"));
$("a").attr("href", data.URI);
$("<p />").text("Powered by Electrum").appendTo($("p#powered"));
var websocket_server = data.websocket_server;
var websocket_port = data.websocket_port;
$(function () {
var current;
var max = 100;
var initial = data.time;
var duration = data.exp;
if(duration){
var current = 100 * (Math.floor(Date.now()/1000) - initial)/duration;
$("#progressbar").progressbar({
value: current,
max: max
});
function update() {
current = 100 * (Math.floor(Date.now()/1000) - initial)/duration;
$("#progressbar").progressbar({
value: current
});
if (current >= max) {
$("#container").html("This invoice has expired");
}
};
var interval = setInterval(update, 1000);
}
});
var wss_address = "wss://" + websocket_server + ":" + websocket_port +"/";
console.log("Opening WSS: " + wss_address)
var ws = new WebSocket(wss_address);
ws.onopen = function() {
ws.send('id:' + id);
};
ws.onmessage = function (evt) {
var received_msg = evt.data;
if(received_msg == 'paid'){
$("#container").html("This invoice has been paid.");
}
else alert("Message is received:"+ received_msg);
};
})
.fail(function() {
console.log("error fail");
$("<p />").text("error").appendTo($("p#error"));
});
};
// See http://stackoverflow.com/questions/29186154/chrome-clicking-mailto-links-closes-websocket-connection
$(document).on('click', 'a[href^="bitcoin:"]', function (e) {
e.preventDefault();
var btcWindow = window.open($(e.currentTarget).attr('href'));
btcWindow.close();
return false;
});
</script>
</head>
<body>
<div id="container" style="width:20em; text-align:center; margin:auto; font-family:arial, serif;">
<p id="error"></p>
<p id="reason"></p>
<p id="amount"></p>
<div style="background-color:#7777aa; border-radius: 5px; padding:10px;">
<a style="color:#ffffff; text-decoration:none;" id="paylink" target="_blank">Pay with Bitcoin</a>
</div>
<br/>
<div id="qrcode" align="center"></div>
<p id="powered" style="font-size:80%;"></p>
<div id="progressbar"></div>
</div>
</body>
</html>