diff options
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | README.md | 20 | ||||
| -rw-r--r-- | calculator.html | 43 | ||||
| -rw-r--r-- | css/bitcoin_pos.css | 7 | ||||
| -rw-r--r-- | db/migrations/001_create_database.rb | 19 | ||||
| -rw-r--r-- | db/migrations/001_create_users.rb | 10 | ||||
| -rw-r--r-- | img/dailycatch.jpg (renamed from img/banner.jpg) | bin | 27656 -> 27656 bytes | |||
| -rw-r--r-- | index.html | 32 | ||||
| -rw-r--r-- | js/bitcoin_pos.js | 17 | ||||
| -rw-r--r-- | js/report.js | 2 | ||||
| -rw-r--r-- | report.html | 6 | ||||
| -rw-r--r-- | ticker.json | 1 |
12 files changed, 112 insertions, 46 deletions
@@ -1,4 +1,3 @@ -ticker.json transactions.json .htpasswd .rvmrc @@ -1,19 +1,27 @@ # Bitcoin Point of Sale -This is a simple utility that a merchant can run on a tablet or phone to convert dollars to bitcoins and receive payments from clients +This is a simple utility that a merchant can run on a tablet or phone to convert dollars to bitcoins and receive payments from clients. A setup page allows you to configure the company title, logo, address, exchange rate, and commission. -It uses the websocket payment notification API from http://blockchain.info/ to display notifications in real time. +We use the websocket payment notification API from http://blockchain.info/api/api_websocket to listen for and display payment notifications in real time. The bitcoin exchange rates are fetched from http://bitcoincharts.com/. -# Installation +When transactions are detected, they are logged along with the time and current exchange rate, and a report is provided so that merchants can account for how many bitcoins they received in a given time period and see their equivalent dollar value. If desired, merchants can then keep a cash float on hand and instruct cashiers to convert the received bitcoins to dollars on-premise at the time of payment, daily, weekly, monthly or as desired. -Download market price data into a file called `ticker.json`: +# Installation - curl "http://bitcoincharts.com/t/depthcalc.json?symbol=virtexCAD&type=bid&amount=1000¤cy=true" > ticker.json +The main calculator page `calculator.html` is programmed in HTML5 and should run in any modern browser. The transaction logging and reporting functionality requires a data store. It's currently using PHP to write to flat JSON files but am probably going to switch to NodeJS and MySQL. # Demo Instance -http://bitcoin.adamsoltys.com/ +http://vanbtc.ca/ + +# Todo +* Allow calculator configurations to be saved and assigned to an account +* Short/pretty URLs for pre-saved configurations +* Security/authentication around transaction logging +* Verify transaction logs against the blockchain +* More robust disconnect and error handling +* Better device detection and browser testing # License diff --git a/calculator.html b/calculator.html new file mode 100644 index 00000000..906bff14 --- /dev/null +++ b/calculator.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=480, height=752, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> + <title>Bitcoin Payment Calculator</title> + <link href="img/favicon.ico" rel="shortcut icon" /> + <link href="css/bootstrap.min.css" rel="stylesheet" /> + <link href="css/bootstrap-responsive.min.css" rel="stylesheet" /> + <link href="css/bitcoin_pos.css" rel="stylesheet" /> + <script src="js/jquery-1.8.2.min.js"></script> + <script src="js/moment.min.js"></script> + <script src="js/qr.js"></script> + <script src="js/bootstrap.min.js"></script> + <script src="js/bitcoin_pos.js"></script> + </head> + <body> + <div class="container-fluid" style="display: none"> + <h1 id="title">Bitcoin Payment Calculator</h1> + + <img id="logo" src="img/logo.jpg" alt="Logo" style="display: none" /> + + <label for="exchange">Exchange Rate:</label> + <input type="text" id="exchange" value="0" disabled="disabled" /> + <small>CAD / BTC</small> + + <label for="amount">Amount:</label> + <input type="text" id="amount" /> + <small>CAD</small> + + <br /><br /> + + <div id="payment"> + <p>Please send <strong id="total">0.0</strong> bitcoins to:</p><br /> + <p id="address"></p> + + <canvas id="qrcanv">No Canvas Support</canvas> + </div> + + <span id="received" class="btn btn-success">Payment Received. Thank you!</span> + </div> + </body> +</html> diff --git a/css/bitcoin_pos.css b/css/bitcoin_pos.css index f6b80f58..736a206e 100644 --- a/css/bitcoin_pos.css +++ b/css/bitcoin_pos.css @@ -1,13 +1,16 @@ body { text-align: center; } body { font-size: 100%; line-height: 100%; } +h1 { width: 100%; text-align: center; } p, span, input[type="text"] { font-size: 1.4em; } -input[type="text"] { height: 1.4em; width: 5em; } +input[type="text"] { height: 1.4em; } +#exchange, #amount { width: 5em; } span.btn { font-size: 1.4em; width: 80%; } small, label { color: #999; font-size: 1.2em; } strong#total { font-size: 2em; } -img#banner { width: 100%; } +#logo { padding: 10px 0; } div.container-fluid { + width: 600px; margin-left: auto; margin-right: auto; text-align:left; diff --git a/db/migrations/001_create_database.rb b/db/migrations/001_create_database.rb new file mode 100644 index 00000000..9e374de2 --- /dev/null +++ b/db/migrations/001_create_database.rb @@ -0,0 +1,19 @@ +class CreateDatabase < ActiveRecord::Migration + def change + create_table :users do |t| + t.string :login + t.string :password + t.string :name + t.string :address + t.decimal :credit, :precision => 10, :scale => 2 + t.string :logo + end + + create_table :transactions do |t| + t.string :address + t.decimal :amount, :precision => 10, :scale => 2 + t.decimal :exchange, :precision => 10, :scale => 2 + t.timestamps + end + end +end diff --git a/db/migrations/001_create_users.rb b/db/migrations/001_create_users.rb deleted file mode 100644 index 4225589d..00000000 --- a/db/migrations/001_create_users.rb +++ /dev/null @@ -1,10 +0,0 @@ -class CreateUsers < ActiveRecord::Migration - def change - create_table :users do |t| - t.string :name - t.string :address - t.decimal :credit, :precision => 10, :scale => 2 - t.string :logo - end - end -end diff --git a/img/banner.jpg b/img/dailycatch.jpg Binary files differindex 2df858c3..2df858c3 100644 --- a/img/banner.jpg +++ b/img/dailycatch.jpg @@ -8,34 +8,22 @@ <link href="css/bootstrap.min.css" rel="stylesheet" /> <link href="css/bootstrap-responsive.min.css" rel="stylesheet" /> <link href="css/bitcoin_pos.css" rel="stylesheet" /> - <script src="js/jquery-1.8.2.min.js"></script> - <script src="js/moment.min.js"></script> - <script src="js/qr.js"></script> <script src="js/bootstrap.min.js"></script> - <script src="js/bitcoin_pos.js"></script> </head> <body> <div class="container-fluid"> - <img id="banner" src="img/banner.jpg" alt="The Daily Catch" /> + <form action="calculator.html"> + <h1>Calculator Setup</h1> - <label for="exchange">Exchange Rate:</label> - <input type="text" id="exchange" value="0" disabled="disabled" /> - <small>CAD / BTC</small> + <label for="title">Name:</label> + <input type="text" id="title" name="title" /> - <label for="amount">Amount:</label> - <input type="text" id="amount" /> - <small>CAD</small> - - <br /><br /> - - <div id="payment"> - <p>Please send <strong id="total">0.0</strong> bitcoins to:</p><br /> - <span id="address"></span> - - <canvas id="qrcanv">No Canvas Support</canvas> - </div> - - <span id="received" class="btn btn-success">Payment Received. Thank you!</span> + <label for="address">Bitcoin Address:</label> + <input type="text" id="address" name="address" /> + + <br /> + <input class="btn" type="submit" value="Go" /> + </form> </div> </body> </html> diff --git a/js/bitcoin_pos.js b/js/bitcoin_pos.js index 9a2ac153..014732b1 100644 --- a/js/bitcoin_pos.js +++ b/js/bitcoin_pos.js @@ -1,14 +1,23 @@ $(function() { var websocket = null; + var title = getParameterByName('title'); var address = getParameterByName('address'); + var logo = getParameterByName('logo'); var exchange = 0; + if (title != "") + $('#title').html(title); + + if (logo != "") { + $('#logo').attr('src', logo).show(); + $('#title').hide(); + } + if (address == "") - window.location = 'index.html?address=1KDaKixtYqPdDNsu3fMeAHHB52R2WHvXCQ' + address = '1VAnbtCAnYccECnjaMCPnWwt81EHCVgNr' + $('#address').html(address); $('#received').hide() - $('div.container-fluid').css('width', Math.min(screen.width, 600) + 'px'); - $('#address').html(address); setupQR(); setInterval(setupSocket, 5000); @@ -29,6 +38,8 @@ $(function() { updateTotal(); }); + $('div.container-fluid').fadeIn('slow'); + function updateTotal() { var amount = parseFloat($('#amount').val()); var total = amount / exchange; diff --git a/js/report.js b/js/report.js index 6cacf077..a470f348 100644 --- a/js/report.js +++ b/js/report.js @@ -1,5 +1,5 @@ $(function() { - $('#date').datepicker(); + $('.date').datepicker(); $.getJSON('transactions.json', function(data) { $.each(data.transactions, function() { diff --git a/report.html b/report.html index 30ec240b..7ded2cb5 100644 --- a/report.html +++ b/report.html @@ -16,7 +16,11 @@ </head> <body> <div class="container-fluid"> - Date: <input id="date" name="date" type="text" /> + <h1>Transactions Report</h1> + + From: <input id="from" name="from" type="text" class="date" /> + To: <input id="to" name="to" type="text" class="date" /> + <table class="table"> <thead> <tr> diff --git a/ticker.json b/ticker.json new file mode 100644 index 00000000..63e0842b --- /dev/null +++ b/ticker.json @@ -0,0 +1 @@ +<? echo file_get_contents("http://bitcoincharts.com/t/depthcalc.json?symbol=virtexCAD&type=bid&amount=1000¤cy=true") ?> |
