1. Home
  2. Libraries for webmasters
  3. Billon jQuery

Billon jQuery

Billon jQuery is a plugin for Billon simple payment system using library jQuery and PHP.
The aim of the plugin is to enable very simple integration with our system in just a few steps. Most of parameters of the payment are being set by JavaScript script. We recommend using NodeJS module Billon and JavaScript scripts used to communicate with the module from web pages.

Starting payment using Billon jQuery is a simple and intuitive process, in which specifying a small number of parameters relating to the payment and complete the (optional) data seller/receiving payment for an invoice for the customer is sufficient.

How to use?

Using jQuery Billon is very simple. It is enough to download appropriate files, place them on a server, and then insert inside <head> tag (or before closing tag </body>) of your page:

<script type="text/javascript" src="<path>/Billon-jQuery/js/zsc.js"></script>

Billon jQuery does not require earlier importing any libraries. It is enough to add the code of import in the page, and the script will takes care of loading compressed sub-libaries needed to its work (including mere jQuery!) by itself. The script will not import the libraries if they are already included in the page, so it will remain light up to the nines!

Next, a script that binds HTML elements with functionalities of API of Billon payments should be written, eg.:

<script type="text/javascript">
billon.ready(function(){
   billon.wuiAddress = "http://213.189.38.34:28291";
   billon.wallet = "foundation";
   billon.language = "en";
   $(".billonDonate").billon({ 
      paymentType: "donation"
   });
   $(".billonLike").billon({
      paymentType: "like"
   });
   $(".billonLove").billon({
      paymentType: "love"
   });
});   
</script>


If jQuery library is set in mode ‘noConflict’, global shortcut ‘$’ is not available. The code should be placed inside anonymous function where shortcut ‘$’ is defined as alias ‘jQuery’, eg.:

<script type="text/javascript">
billon.ready(function()
{
   billon.wuiAddress = "http://213.189.38.34:28291";
   billon.wallet = "foudation";
   billon.language = "pl";
   (function ($)
   {
      $(".billonDonate").billon({ 
         paymentType: "donate"
      });
      $(".billonLike").billon({
         paymentType: "like"
      });
      $(".billonLove").billon({
        paymentType: "love"
      });
   })(jQuery);
});   
</script>


Later, classes of the elements when clicking which the payments are to be made can be set or new elements can be inserted, eg.:

<a class="billonDonate" data-billon-product="support for foundation">Support the Fundation</a> 
<a class="billonLove"  data-billon-product="support for blogger">I love it!</a> 

 

Parametrs

Name Options Description
paymentType oneclick, cart, donate, like, love, pingpay a type of the payment:

  • ‘oneclick’ – payment for one product,
  • ‘cart’ – payment for several products,
  • ‘donate’ – donation in the user amount,
  • ‘like’ – donation in the amount of 1, eg. £ 1,
  • ‘love’ – donation in the amount of 0,01, eg. 1p,
  • ‘pingpay’ – a test payment with refund.
wuiAddress eg. http://213.189.38.34:28091 an address of the application 24/7
wallet eg. shop a username in the application 24/7
billonAgent eg. http://sklep3.billon.net.pl/billonDialog_dev/php/billonAgent.php an address of proxy  PHP script, file ‘billonAgent.php’ in directory ‘php’ be default
language pl, en the language in which payment will be processed
title eg. Order pizza custom title of the dialog
titleProductName true, false whether the name of a product is to displayed in brackets before amount
comment false, true whether user is able to append an additional comment
seller eg. seller17 a name of .json file that defines seller data without extension from directory ‘config’ (‘seller’ by default)
currency eg. £ displayed currency, which can be HTML element, eg. image
realCurrency eg. GBP ISO 4217 code of actual currency of payment, PLN by default

Further, a global advanced parameter ‘cufon’ accepting values ‘true’ and ‘false’ is available. It decides whether font rendering is to be turn on using JavaScript library ‘Cufon’. The default value of the parameter is ‘true’.

 

Method ‘on’

JavaScript function which is called after successfully finished payment or after the close of the dialog can be defined using method ‘on” of object ‘billon’. Example of the call:

<script type="text/javascript">
billon.ready(function()
{
   // (...)
   billon.on("paymentSuccess", function() // function called after successfully finished payment
   {
      billon.on("dialogclose", function()
      { // function called after the close of the dialog, in this case after successfully finished payment and the close of the dialog
         window.location.href = "/";
      });
      var DeleteLinks = $("a.cart_quantity_delete");
      for (var i = 0; i < DeleteLinks.length; ++i)
      {
         if (DeleteLinks[i].href)
         {
            $.ajax({url: DeleteLinks[i].href});
         }
      }
   });
   // (...)
});   
</script>

 

All parameters can be defined globally, eg.:

<script type="text/javascript">
billon.ready(function(){
   billon.wuiAddress = "http://213.189.38.34:28291";
   billon.wallet = "foundation";
   billon.language = "en";
});   
</script>

 

Globally defined parameters refer to all elements on the page in which function ‘billon’ have been used, but locally defined parameters causes overwriting this parameters for given call. It is recommended to define parameters globally initially, and define them locally for individual, different form each other types of payments, eg. for a payment in Polish:

<script type="text/javascript"
billon.ready(function(){
   billon.wuiAddress = "http://213.189.38.34:28291";
   billon.wallet = "foundation";
   billon.language = "en"; 
   $(".billonOneclikPL").billon({
      language: "pl",
   });
});
</script>
 

A description of the products (a supplement of invoice data)

You do not need to define a price of a product, its name and detailed description of the transaction for simple payments such as the donation, ‘I like it!’ or ‘I love it’. However, such a description is required for the payment for the products. Setting invoice data comprises the identification data of Seller and a specification of the products in Billon jQuery. The description of the products must be defined in attribute ‘data-billon-product’ of an element that triggers the payment, eg. of a button ‘Buy Now!’. The value filled in this attribute relates to the file in folder ‘products’. A payment will be made for product defined in ‘/products/1.json’ for example below:

<div class="billonBuyNow" data-billon-product="1">Buy Now!</div>

JavaScript array with values analogous to the payment for one product should be placed in the attribute ‘data-billon-product’ of HTML object that triggers a cart payment. A payment will be made for product defined in ‘/products/1.json’ and product defined in ‘/products/2.json’ for below example:

<div class="billonCart" data-billon-product="[1, 2]">Pay Cart</div>

Sample JSON document describing seller and products have been added to files of Billon jQuery in the directories ‘config’ and ‘products’.

A title of the donation can be placed in attribute ‘data-billon-product’ in the case of the donations, eg.:

<div class="billonDonate" data-billon-product="support for project">Donation</div>
Was this article helpful to you? Yes No

How can we help?