1. Wstęp
  2. Biblioteki dla webmasterów
  3. Billon jQuery

Billon jQuery

Billon jQuery jest pluginem dla systemu prostych płatności Billon wykorzystującym bibliotekę jQuery i PHP.
Celem pluginu jest umożliwienie bardzo prostej integracji z naszym systemem w zaledwie kilku krokach. Większość parametrów płatności ustawia się poprzez skrypt JavaScript. Zalecamy korzystanie z modułu NodeJS Billon i skryptów JavaScript służących do komunikacji z nim ze stron internetowych.

Uruchomienie płatności przy użyciu Billon jQuery to prosty i intuicyjny proces, w którym wystarczy określić niewielką liczbę parametrów dotyczących płatności oraz uzupełnić (opcjonalnie) dane sprzedawcy/przyjmującego płatność do faktury dla Klienta.

Jak używać?

Korzystanie z jQuery Billon jest bardzo proste. Wystarczy pobrać odpowiednie pliki, umieścić je na serwerze, a następnie w rejonie <head> (lub przed tagiem zamykającym </body>) Twojej strony wstawić:

<script type="text/javascript" src="<ścieżka>/Billon-jQuery/js/zsc.js"></script>

Billon jQuery nie wymaga wcześniejszego importowania żadnych bibliotek. Wystarczy dodać kod importu na stronie, a skrypt sam zadba o załadowanie potrzebnych do jego działania skompresowanych pod-bibliotek (włącznie z samym jQuery!). Skrypt nie zaimportuje bibliotek, jeśli już zawarte są na stronie, więc pozostanie maksymalnie lekki!

Następnie należy napisać skrypt, który wiąże elementy HTML z funkcjonalnościami API płatności Billon, np.:

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


Jeśli biblioteka jQuery jest ustawiona na tryb noConflict”, globalny skrót $” nie jest dostępny. Należy kod umieścić wewnątrz funkcji anonimowej, gdzie zdefiniowany jest skrót $ jako alias jQuery, np.:

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


Potem można ustawić klasy elementów, po naciśnięciu których mają być wykonane płatności, lub wstawić nowe elementy, np.:

<a class="billonDonate" data-billon-product="wsparcie fundacji">Wesprzyj fundację</a>
<a class="billonLike"  data-billon-product="wsparcie bloggera">Lubię to!</a>
<a class="billonLove"  data-billon-product="wsparcie bloggera">Uwielbiam to!</a> 

 

Parametry

Nazwa Opcje Opis
paymentType oneclick, cart, donate, like, love, pingpay rodzaj płatności:

  • „oneclick” – płatność za jeden produkt,
  • „cart” – płatność za kilka produktów,
  • „donate” – datek na wybraną przez użytkownika kwotę,
  • „like” – datek na kwotę 1, np. 1 zł,
  • „love” – datek na kwotę 0,01, np. 1 gr,
  • „pingpay” – płatność testowa ze zwrotem środków.
wuiAddress np. http://213.189.38.34:28091 adres aplikacji sprzedawcy
wallet np. sklep nazwa użytkownika w aplikacji sprzedawcy
billonAgent np. http://sklep3.billon.net.pl/billonDialog_dev/php/billonAgent.php adres pośredniczącego skryptu PHP, domyślnie plik billonAgent.php w katalogu php
language pl, en język w którym obsługiwana będzie płatność
title np. Zamów pizzę niestandardowy tytuł dla okna dialogowego
titleProductName true, false czy nazwa produktu ma pojawiać się w nawiasie przed kwotą
comment false, true czy użytkownik ma mieć możliwość dołączenia dodatkowego komentarza
seller np. seller17 nazwa pliku .json bez rozszerzenia z folderu „config”, który określa dane sprzedawcy (domyślnie „seller”)
currency np. zł wyświetlana waluta, która może być elementem HTML, np. obrazem
realCurrency np. EUR kod ISO 4217 faktycznej waluty płatności, domyślnie PLN

Ponadto dostępny jest globalny parametr zaawansowany „cufon” przyjmujący wartości „true” i „false”. Decyduje on o tym, czy ma być włączone renderowanie czcionki za pomocą biblioteki JavaScript „Cufon”. Domyślną wartością parametru jest „true”.

 

Metoda „on”

Za pomocą metody „on” obiektu „billon” można zdefiniować funkcję JavaScript wywoływaną po pomyślnie ukończonej płatności lub po zamknięciu okna dialogowego. Przykład wywołania:

<script type="text/javascript">
billon.ready(function()
{
   // (...)
   billon.on("paymentSuccess", function() // funkcja po pomyślnie ukończonej płatności
   {
      billon.on("dialogclose", function()
      { // funkcja po zamknięciu okna dialogowego, w tym przypadku po ukończeniu płatności i zamknięciu okna
         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>

 

Wszystkie parametry można definiować globalnie w sposób jak poniżej np.:

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

 

Parametry zdefiniowane globalnie odnoszą się do wszystkich elementów na stronie, na której zostanie użyta funkcja „billon”, jednak parametry zdefiniowane lokalnie spowodują nadpisanie tych parametrów dla danego wywołania. Zaleca się wstępnie definiować parametry globalnie, a lokalne określać je dla poszczególnych, różnych od siebie rodzajów płatności, np. dla angielskiej wersji płatności:

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

Opisanie produktu (uzupełnianie danych do faktury)

Dla prostych płatności takich jak datek, „I like it!” lub „I love it”, nie potrzeba definiowania ceny produktu, jego nazwy i szczegółowego opisu transakcji. Natomiast taki opis wymagany jest dla płatności za produkty. W Billon jQuery określenie danych do faktury obejmuje dane identyfikacyjne Sprzedawcy oraz specyfikację produktów. Opis produktów należy zdefiniować w atrybucie „data-billon-product” dla elementu wywołującego płatność, np. przycisku „Kup teraz!”. Wartość wprowadzona w tym atrybucie odnosi się do pliku w folderze „products”. Dla poniższego przykładu płatność wykona się na produkt zdefiniowany w „/products/1.json”:

<div class="billonBuyNow" data-billon-product="1">Kup teraz!</div>

W atrybucie „data-billon-product” obiektu HTML wywołującego płatność koszykową należy umieścić tablicę JavaScript z wartościami analogicznymi do płatności za jeden produkt. Dla przykładu poniżej płatność zostanie wykonana na produkt zdefiniowany w „/products/1.json” i produkt zdefiniowany w „/products/2.json”:

<div class="billonCart" data-billon-product="[1, 2]">Opłać koszyk</div>

Przykładowe dokumenty JSON opisujące sprzedawcę i produkty zostały dołączone do plików Billon jQuery w katalogach „config” i „products”.

W przypadku płatności datkowych w atrybucie „data-billon-product” można umieścić tytuł datku, np.:

<div class="billonDonate" data-billon-product="wsparcie projektu">Datek</div>
Czy ten artykuł jest dla Ciebie pomocny? Tak 1 Nie

Jak możemy pomóc?