Learn how to make an interactive Bitcoin donation QR code using websoket

coinables (37)in #tutorial • 8 years ago

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=

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

That's it! Now you have a cool interactive donation QR code to put on your blog or website!

#development #code #bitcoin #coding