In this video we will create a simple interactive donation QR code using blockchain.info's websocket API. This will be done in just HTML and JavaScript, so you can do this on your home computer without needing a web server.
Open up your text editor. Notepad++ is free, or you can just use plain notepad that comes with windows.
Begin by opening your HTML and script tags
<html> <script> </script> </html>
Use this URL to create a QR code, paste your Bitcoin address after the chl=
<img src="http://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=1YourBitcoinAddress">
Open a new websocket connection using new WebSocket();
var btcs = new WebSocket('wss://ws.blockchain.info/inv');
Subscribe to your bitcoin address {"op":"addr_sub", "addr":"bitcoin_address"} BE SURE TO REPLACE WITH YOUR ADDRESS
btcs.onopen = function(){
btcs.send(JSON.stringify({"op":"addr_sub", "addr":"1YourBitcoinAddress"});
};
Then we'll create a function that will check all the outputs to find one that matches our address. Watch the video for a better idea of how this works.
btcs.onmessage = function(onmsg)
{
var response = JSON.parse(onmsg.data);
var getOuts = response.x.out;
var countOuts = getOuts.length;
for(i = 0; i < countOuts; i++)
{
//check every output to see if it matches specified address
var outAdd = response.x.out[i].addr;
var specAdd = "1YOurBitcoinAddress";
if (outAdd == specAdd )
{
var amount = response.x.out[i].value;
var calAmount = amount / 100000000;
document.getElementById("message").innerHTML = "Received: " + calAmount + "BTC";
}
}
}
Now, outside of the script tags, create a DIV with an ID of message
<div id="message"></div>
That's it! Now you have a cool interactive donation QR code to put on your blog or website!