bitcoinaddress.js is a a JavaScript component library for making easy bitcoin payments, sending bitcoins and presenting bitcoin addresses on HTML pages.
- Mobile and touch friendly - no pop-ups
- Use Bitcoin URI protocol to make payments from your desktop, web or mobile bitcoin wallet
- Generate QR codes in-fly with JavaScript to make payments from mobile applications
- Copy Bitcoin address to the clipboard
- Customize and extend easily with custom DOM templates and JavaScript hooks
No server-side components needed.
You must have jQuery (version 1.9 or later) installed.
Drop bitcoinaddress.js on your HTML page with option elements as described below.
You can `download your preferred flavour on Github dist folder <https://github.com/miohtama/bitcoinaddress.js/tree/master/dist>_.
The bundle includes QRCode.js library (see below).
- Include
bitcoinaddress.json your HTML page - Configure and initialize it with a
<script>tag - Supply a client-side template in a hidden <div> on your page
- When the HTML page has been loaded,
bitcoinaddress.init()scans for.bitcoin-addressCSS classes, applies template on them and sets up UI event handlers
Setting up <script> tag:
<script src="bitcoinaddress-bundle.min.js"></script>
<script>
$(document).ready(function() {
bitcoinaddress.init({
// jQuery selector defining bitcon addresses on the page
// needing the boost
selector: ".bitcoin-address",
// Id of the DOM template element we use to decorate the addresses.
// This must contain placefolder .bitcoin-address
template: "bitcoin-address-template",
// Passed directly to QRCode.js
// https://github.com/davidshimjs/qrcodejs
qr : {
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff"
}
});
});
</script>
A DOM templating is used to built the controls for the Bitcoin addresses. Embed the following snippet hidden in <body> and customize for your needs. See index.html for example CSS styles:
<div id="bitcoin-address-template" class="bitcoin-address-container" style="display: none">
<div>
<span class="bitcoin-address"></span>
</div>
<a href="#" class="bitcoin-address-action bitcoin-address-action-send">
<i class="fa fa-btc"></i>
Pay from wallet
</a>
<a href="#" class="bitcoin-address-action bitcoin-address-action-copy">
<i class="fa fa-copy"></i>
Copy
</a>
<a href="#" class="bitcoin-address-action bitcoin-address-action-qr">
<i class="fa fa-qrcode"></i>
QR code
</a>
<div class="bitcoin-action-hint bitcoin-action-hint-send">
Sending payment to the address from locally installed Bitcoin wallet app.
</div>
<div class="bitcoin-action-hint bitcoin-action-hint-copy">
Press CTRL + C or ⌘ + C to copy the Bitcoin address.
</div>
<div class="bitcoin-action-hint bitcoin-action-hint-qr">
<p>
Scan the QR code with your mobile Bitcoin app to
make the payment:
</p>
<div class="bitcoin-address-qr-container">
<!-- Filled in by JS on action click -->
</div>
</div>
</div>
Then you can have Bitcoin addresses on your page, with or without payment amounts.
Plain Bitcoin address example:
<strong class="bitcoin-address" data-bc-address="19356KxTs9Bw5AAdxens5hoxDSp5bsUKse">19356KxTs9Bw5AAdxens5hoxDSp5bsUKse</strong>
Bitcoin address with payment amount example:
<strong class="bitcoin-address"
data-bc-amount="0.1"
data-bc-label="bitcoinaddress.js project"
data-bc-message="0.1 BTC donation"
data-bc-address="19356KxTs9Bw5AAdxens5hoxDSp5bsUKse">19356KxTs9Bw5AAdxens5hoxDSp5bsUKse</strong>
See the demo how to nominate the payment in the fiat currency using bitcoinprices.js library.
The following HTML5 data attributes are supported on .bitcoin-address elements
data-bc-address- bitcoin address for programmatical manipulation, requireddata-bc-amount- suggestion how much to senddata-bc-label- address label in the walletdata-bc-message- transaction message
This project is also packaged and distributed on npmjs.org.
You can install the package with browserify and various other tools to include it in app JavaScript stack.
QRCode.js - generate QR codes in JavaScript by Shim Sangmin.
NPM + Node required. We have a ``Makefile` which provides many commands to develop, test and publish this project.
browserify used for client-side module imports.
Install dependencies locally:
make setup
Run the development server with auto-reload (save bitcoinaddress.js in your text editor and the browser will reload index.html):
make dev-server
Run unit tests locally:
make test-server
Make a release:
make publish
This package uses NPM, browserify for JavaScript dependencies, beefy development server, uglify-fs JavaScript minimizer.
tape unit testing framework runs the tests on testling continuous integration service infrastructure.
Check out Makefile if you want to learn how to use these tools.
Mikko Ohtamaa (blog, Facebook, Twitter, Google+)
Contact for work and consulting offers.