In Brazil, there is a very commonly used payment method used for online purchases called Boleto Bancário, or bank slip.
When a web-store issues a bank slip, they often display the document entirely (a full A4 page) for the customer to print and take to a bank or post office to be paid.
Over the past few years, technology has evolved to the point where we can now simply use our smartphones to scan the bank slip's barcode and pay it immediately. There is no longer the need to have the entire document on-screen. We could display the only thing that matters: the barcode.
This is where boleto.js comes in handy, generating barcodes using SVG
that provide maximum sharpness in screens of any resolution or pixel density.
Using package managers
npm install boleto.js --save
bower install boleto.js
Basic
Include the library in your code
<script src="dist/boleto.min.js"></script>
Add this tag where you wish to place the barcode
<div id="boleto"></div>
And finally add the code to render the barcode
<script>
var number = '34195000080123320318964221470004584410000002000';
new Boleto(number).toSVG('#boleto');
</script>
Alternative Usage
Instead of appending the SVG to the source code, you can store it in a variable. To do so, simply do not provide a CSS selector when generating the SVG:
<script>
var number = '34195000080123320318964221470004584410000002000';
// Data will be stored in a variable
var boleto = new Boleto(number).toSVG();
</script>
Extra Features
boleto.js also provides a number of methods to help you display more information about the bank slip.
Bank slip number (raw):
boleto.number();
// 34195000080123320318964221470004584410000002000
Bank slip number (formatted):
boleto.prettyNumber();
// 34195.00008 01233.203189 64221.470004 5 84410000002000
Barcode number:
boleto.barcode();
// 34195844100000020005000001233203186422147000
Barcode checksum digit:
boleto.checksum();
// 5
Nominal amount:
boleto.amount();
// 20.00
Formatted amount:
boleto.prettyAmount();
// R$ 20,00
Bank name:
boleto.bank();
// Itaú
Currency:
boleto.currency();
// { code: 'BRL', symbol: 'R$', decimal: ',' }
Expiration date:
boleto.expirationDate();
// Sun Nov 15 2020 22:00:00 GMT-0200 (BRST)
Number
| |
Number (pretty)
| |
Amount
| |
Amount (pretty)
| |
Expiration
| |
Bank
| |
Currency
| |
Barcode
| |
Checksum |
|