Skip to content

An agnostic bitcoin donation widget. See it live here, and consider leaving a tip if you use the code:

License

Notifications You must be signed in to change notification settings

ouillie/send-btc

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

send-btc

This is a super simple way to receive bitcoin online.

Building

This package includes a shitty build system that minifies all source files into a single script called send-btc.min.js. The build system is just a node script that depends on fs, minimize, and node-minify. Run:

node build

Javascript Dependencies

send-btc depends on jQuery.qrcode and Bootstrap. Include (using major CDNs as examples):

<!-- jQuery JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js" integrity="sha384-8C+3bW/ArbXinsJduAjm9O7WNnuOcO+Bok/VScRYikawtvz4ZPrpXtGfKIewM9dK" crossorigin="anonymous"></script>
<!-- jQuery QR-code JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js" integrity="sha384-0B/45e2to395pfnCkbfqwKFFwAa7zXdvd42eAFJa3Vm8KZ/jmHdn93XdWi//7MDS" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

somewhere in your page before including:

<script src="send-btc.min.js"></script>

CSS Dependencies

send-btc also depends on Font Awesome (and Bootstrap CSS). Include these anywhere in your page:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">

Usage

Use whatever you want for the button. I like to use the BitPay donate button images:

small medium large

The widget uses a Bootstrap modal to interact with the user. It can be opened from HTML using Bootstrap's data attributes (or using the equivalent JavaScript):

<a data-toggle="modal" data-target="#send-btc-modal"
 data-address="1GTw1pfrxEV6tNwRQxwocnMRoF9B7LjmJ2" data-label="Donate plz" data-amount="1.0" data-fiat="USD">
    <img src="https://bitpay.com/img/donate-md.png" />
</a>

There is a single global modal window #send-btc-modal whose attributes address, label, amount, and fiat can change each time it opens, so having multiple widgets on the same page is as easy as setting up another link to the same modal with new parameters. Modals should never be open simultaneously.

amount is in bitcoin. fiat is the ISO currency code of the preferred native conversion. Currently, this must be one of "JPY", "KRW", "CNY", "RUB", "EUR", "GBP", or "USD".

The user is given the option to modify label, amount, and fiat (which is superfluous to the transaction anyway) and then open a bitcoin URI, scan a QR code in the modal window, or simply copy-paste the recipient's public address for settling however she pleases.

In the future we could add a minimal bill / receipt printing component for people who like paper.

About

An agnostic bitcoin donation widget. See it live here, and consider leaving a tip if you use the code:

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published