You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
3.1 KiB
102 lines
3.1 KiB
<!DOCTYPE HTML> |
|
<html> |
|
<head> |
|
<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 jqxhr = $.getJSON(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")); |
|
$(function () { |
|
var current; |
|
var max = 100; |
|
var initial = data.time; |
|
var duration = data.exp; |
|
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); |
|
}); |
|
}) |
|
.fail(function() { |
|
console.log("error fail"); |
|
$("<p />").text("error").appendTo($("p#error")); |
|
}); |
|
}; |
|
|
|
var ws = new WebSocket("wss://electrum.org:9999/"); |
|
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); |
|
}; |
|
|
|
|
|
// 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>
|
|
|