Introduction

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.

Installation

You can download boleto.js using npm, Bower or you can get its code.

Using package managers

npm install boleto.js --save

bower install boleto.js

 

Download the source from Github

Usage

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)

Demo

Try for yourself! Use your bank's mobile app to scan the code below. Or enter your own bank slip number.

Number
Number (pretty)
Amount
Amount (pretty)
Expiration
Bank
Currency
Barcode
Checksum