2015-06-07 10:11:54 -07:00
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2015-07-25 03:50:00 -07:00
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
2015-07-24 03:36:08 -07:00
|
|
|
<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">
|
2015-06-07 10:11:54 -07:00
|
|
|
<script type="text/javascript">
|
2015-06-07 12:52:23 -07:00
|
|
|
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];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2015-06-07 10:11:54 -07:00
|
|
|
|
2015-06-07 12:52:23 -07:00
|
|
|
var id = getUrlParameter('id');
|
2015-06-07 10:11:54 -07:00
|
|
|
|
2015-06-07 12:52:23 -07:00
|
|
|
if (id) {
|
2016-09-30 22:40:40 -07:00
|
|
|
var uri_path = location.pathname;
|
|
|
|
|
var jqxhr = $.getJSON(uri_path.replace("index.html", "req/"+ id[0] + "/"+ id[1] + "/"+ id + "/"+ id + ".json"), function() {
|
2015-07-24 02:39:12 -07:00
|
|
|
console.log("getJSON:success");
|
2015-06-07 12:52:23 -07:00
|
|
|
})
|
|
|
|
|
.done( function(data) {
|
|
|
|
|
new QRCode(document.getElementById("qrcode"), data.URI);
|
2015-06-08 04:20:42 -07:00
|
|
|
$("<p />").text(data.memo).appendTo($("p#reason"));
|
|
|
|
|
$("<p />").text(data.amount/100000000 + "BTC").appendTo($("p#amount"));
|
2015-06-07 12:52:23 -07:00
|
|
|
$("a").attr("href", data.URI);
|
|
|
|
|
$("<p />").text("Powered by Electrum").appendTo($("p#powered"));
|
2016-09-21 05:45:50 -07:00
|
|
|
var websocket_server = data.websocket_server;
|
|
|
|
|
var websocket_port = data.websocket_port;
|
2015-06-07 12:52:23 -07:00
|
|
|
$(function () {
|
|
|
|
|
var current;
|
|
|
|
|
var max = 100;
|
2015-07-22 00:37:17 -07:00
|
|
|
var initial = data.time;
|
2016-09-21 03:54:09 -07:00
|
|
|
var duration = data.exp;
|
2016-02-19 05:08:28 -08:00
|
|
|
if(duration){
|
|
|
|
|
var current = 100 * (Math.floor(Date.now()/1000) - initial)/duration;
|
|
|
|
|
$("#progressbar").progressbar({
|
2015-06-07 12:52:23 -07:00
|
|
|
value: current,
|
|
|
|
|
max: max
|
2016-02-19 05:08:28 -08:00
|
|
|
});
|
|
|
|
|
function update() {
|
2015-06-07 12:52:23 -07:00
|
|
|
current = 100 * (Math.floor(Date.now()/1000) - initial)/duration;
|
|
|
|
|
$("#progressbar").progressbar({
|
|
|
|
|
value: current
|
|
|
|
|
});
|
|
|
|
|
if (current >= max) {
|
2015-07-24 02:39:12 -07:00
|
|
|
$("#container").html("This invoice has expired");
|
2015-06-07 12:52:23 -07:00
|
|
|
}
|
2016-02-19 05:08:28 -08:00
|
|
|
};
|
|
|
|
|
var interval = setInterval(update, 1000);
|
|
|
|
|
}
|
2015-06-07 10:11:54 -07:00
|
|
|
});
|
2016-09-21 05:45:50 -07:00
|
|
|
|
2016-10-01 20:55:19 -07:00
|
|
|
var wss_address = "wss://" + websocket_server + ":" + websocket_port +"/";
|
2016-09-21 05:45:50 -07:00
|
|
|
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);
|
|
|
|
|
};
|
|
|
|
|
|
2015-06-07 12:52:23 -07:00
|
|
|
})
|
|
|
|
|
.fail(function() {
|
2015-07-24 02:39:12 -07:00
|
|
|
console.log("error fail");
|
2015-06-07 12:52:23 -07:00
|
|
|
$("<p />").text("error").appendTo($("p#error"));
|
|
|
|
|
});
|
|
|
|
|
};
|
2015-07-24 02:39:12 -07:00
|
|
|
|
2015-07-24 04:30:51 -07:00
|
|
|
// 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;
|
|
|
|
|
});
|
|
|
|
|
|
2015-06-07 12:52:23 -07:00
|
|
|
</script>
|
2015-06-07 10:11:54 -07:00
|
|
|
</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;">
|
2015-07-24 04:30:51 -07:00
|
|
|
<a style="color:#ffffff; text-decoration:none;" id="paylink" target="_blank">Pay with Bitcoin</a>
|
2015-06-07 10:11:54 -07:00
|
|
|
</div>
|
|
|
|
|
<br/>
|
|
|
|
|
<div id="qrcode" align="center"></div>
|
|
|
|
|
<p id="powered" style="font-size:80%;"></p>
|
|
|
|
|
<div id="progressbar"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
