OSCommerce and Paypal

I wanted to integrate Paypal payment facility to an osCommerce web solution. Although the default osCommerce solution is geared with a paypal module but it had limited functionality. But I had to provide the Paypal IPN validation for each successful transaction.

osCommerce logoWith little bit of searching I found that osCommerce has a massive collection of freely downloadable addons to leverage its functionality. In there I found an addon that fits my exact requirements: Paypal IPN.

Paypal logoThe Paypal site provides a clear and comprehensive knowledge base on how to integrate Paypal payment scheme(s) to our existing web solution in an easy to understand manner. It also maintains a comprehensive documentation, SDKs, an API reference, etc.. to guide both developers and normal users to fulfill their requirements with minimum effort.

As a developer once you have successfully set up the Paypal payment scheme in the site use Paypal Sandbox test environment to test the functionality before releasing it for live operations. First create a Paypal Sandbox account. Next create a merchant(seller) account and some customer(buyer) accounts using Test Account tab. Each account is entitled to a bank account, credit card, some cash. Now test the payment process using this test environment.

  • Test environment: https://www.sandbox.paypal.com/cgi-bin/webscr
  • Live environment: https://www.paypal.com/cgi-bin/webscr

Inside Test Account tab in the Paypal Sandbox it lists all the available accounts(merchant or seller and customers or buyers) and below that is a button called Enter Sandbox Test Site, that opens the test environment. Based on the account type can set and alter the parameters to meet the requirements.
eg: To provide the return url of the merchant’s shop for both default Paypal addon and Paypal IPN addon: My account » Profile » Website Payment Preferences

  • Auto Return: On
  • Return URL: http://www.merchantstore.com/checkout_process.php

eg: To send the IPN to the merchant’s shop: My account » Profile » Instant Payment Notification Preferences

  • Notification URL: http://www.merchantstore.com/checkout_process.php
  • Turn On IPN

Sahana XForm

Let me give you a quick introduction on what this “Sahana XForm” is all about and what is trying to achieve through this. The main idea behind this effort is to come up with a working prototype to transform the forms on Web-based applications in to a print friendly form that heavily involves data capturing. Sahana is one such application that heavily involves in such activities and it’s main targeted for the overall management of diverse activities in a post disaster situation.

A disaster means it involves recording and dissemination of information among various parties for the immediate fulfillment of victims requirements. Although there are very sophisticated methods and equipments in most cases still the preferred and the used method is the use of paper based forms. In here I should especially mentioned about Chamindra because it was he who came up with this idea and encouraged me on this.

In this approach it provides a way to extracts the XHTML from elements in an active Web form and transform them to a print friendly format (printed and to be used as off-line paper forms) leaving behind the images and unwanted elements on the page. In order for the functionality to work the XHTML mark for the form should be organized in the following manner.

<h2>Personal Details</h2>
<div class="xform-container">
<form name="form" >
  <fieldset><legend> Identity </legend>
     <label for="nic"> Identity Card Number </label>
              <input type="text" name="nic" id="nic"/>
     
     <label for="passport"> Passport Number </label>
              <input type="text" name="passport" id="passport"/>
     
  </fieldset>

  <fieldset><legend> Basic Details </legend>
     <label for="family_name"> Family Name </label>
              <input type="text" name="family_name" id="family_name" value=""/>
     
     <label for="local_name"> Local Name </label>
              <input type="text" name="local_name" id="local_name" value=""/>
     
     <label for="dob"> Date of Birth </label>
              <input type="text" name="dob" value="" id="dob"/>
     
     <label for="opt_gender"> Gender </label>
              <select name="opt_gender">
                <option value="male"> Male </option>
                <option value="female"> Female </option>
              </select>
     
  </fieldset>

  <fieldset><legend> Contact Information </legend>
     <label for="address"> Address </label>
              <textarea name="address" id="address"></textarea>
     
     <label for="zip"> Postal Code </label>
              <input type="text" name="zip" id="zip"/>
     
     <label for="home_phone"> Home Phone </label>
              <input type="text" name="home_phone" id="home_phone"/>
     
     <label for="mobile_phone"> Mobile Phone </label>
              <input type="text" name="mobile_phone" id="mobile_phone"/>
     
  </fieldset>
</form>
</div>

Next using JavaScript scripting language and CSS implement the functionality as follows.

  • First identify Web forms from rest of the page(s) (It is very important that you enclose all form related elements inside a XHTML div element having a class attribute which holds a name. eg: <div class=”xform-container” > rest comes here… </div> ).
  • On success extract the XHTML form elements.
  • Then regenerate the XHTML markup on the same page. This should maintain the correct sequence of the original form(Label name and its corresponding input ).
  • Use the CSS to maintain the layouts and dimensions to match the layout for each section, which was there on the original form (Label name and the place to fill the data)
  • Next since we need to print this generated from to a paper we should arrange the components to fit into the page size(A4, Letter. Legal, etc…).
  • To invoke the functionality link the JavaScript file that hold the logic to the head section of the Web page and call the initialization function on any convenient location on the page (eg: <a href=”#” onclick=”init_xform();” title=”Generate XForm” > XForm</a>).

In the current implementation it is capable of transforming the page as shown in figure 1 into a form as shown in figure 2. Since the functionality itself can be extended for various directions I would like to invite all those who are interested in this work to come join us to extend this approach and the functionality to be readily used(eliminate the application level dependencies and to extend it to generate customized label layouts, etc… ) with any web based system just by linking the JavaScript library and generate the print friendly form. The code library is released under LGPL license along with Sahana.

Disaster Victim Registry - Web from

Figure 1: Disaster Victim Registry - Web from

Disaster Victim Registry - XForn

Figure2: Disaster Victim Registry - XForm

Your comments and suggestions are highly appreciated in developing this into a readily usable library for any web application.

Elegant tools to easy your life in web development

As I have mentioned in my previous post these days I’m involve in developing a web based CRM for a client in UK in the company I’m employed. I’m currently in the phase two of its development. In this effort I had to incorporate various functionalities into it, such as calendar for event management, bulk file uploading, star rating for order and product profitability, various UI enhancements, etc…

In fulfilling these requirements within the strict project deadline I consult the help of Google Search to find answers to them. With few hours of searching I came across some fabulous tools that helped me to achieve my requirements with few or no effort. So I though of sharing the benefit with you. I must especially thank all the authors for releasing them to be used in any project for zero cost and fair licenses (LGPL, Apache, MIT, Mozilla etc… )

File Uploading

  • FancyUpload
    FancyUpload 3.0

    FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses mootools to work in all modern browsers.

  • JqUploaders

    jqUploader is a jquery plugin that substitutes html file input fields with a flash-based file upload widget, allowing to display a progressbar and percentage. It is designed to take most of its customization from the html code of your form directly – so you don’t have to do things twice.

Event Calendar

  • PHP-Calendar
    PHP-Calendar

    PHP-Calendar is a simple web calendar. It is targeted towards groups that need to collaboratively create and track events. In that same collaborative spirit, the source for PHP-Calendar is available under an open source license for anyone to use and modify.

  • Maian Events
    Maian Events

    Maian Events is a nice XHTML/CSS theme based calendar with options to auto archive events after they have finished. Visitors can also post comments for events if enabled and pictures can also be added by admin if applicable.

Instant Messaging

  • ajax im
    ajax im

    ajax im (“asynchronous javascript and xml instant messenger”) is a browser-based instant messaging client. It uses AJAX to create a near real-time IM environment that can be used in conjunction with community, intranet, and social websites. No refreshing of the page is ever needed for this “web application” to work, as everything is updated in real-time via JavaScript.

UI Enhancement

  • RokBox
    RokBox

    RokBox, the successor of our popular RokZoom plugin, is a mootools powered JavaScript slideshow that allows you to quickly and easily display multiple media formats including images, videos (video sharing services also) and music. RokBox provides a theme system that allows you to create your own custom ones to fit your websites design.

  • ReMooz
    ReMooz

    ReMooz is an open-source widget for great looking and unobtrusive inline-pop-ups, powered by mootools. It enables how your visitors browse through content, such as thumbnail images and HTML. ReMooz features centered or relative-positioned draggable zoomed images, content preloading, fading captions, with plenty of options and is highly configurable: Add a simple image zoom or create a fancy design element for any graphic that needs to be enlarged on your site..

  • LightBox
  • ThickBox

One mission Accomplished, what next?

The past four and half years was the most enjoyable and the productive years of my life. In this time I had all the freedom to explore into many areas of the society as a university student. This period left me many memorable things and also gave me the chance to decide what I’ll do in the future. Most of the occasions people welcome us so warmly and corporate well in most activities where normal citizen would had to put an extra effort do the same activity. In a way I’m so lucky that I was so fortunate to continue my higher education in the field I’m interested in and earn a degree from a state owned university. During this endeavor I got opportunities to share what I have learn for the benefit of the society both local(SLAF) and international(Sahana) activities.

Now the time has come for me to think and work in a more responsible manner because most of what I’ll do will have a bigger impact to my future. As a start I have to find a sufficient income to support my own expenses rather continue to put that burden on my parents. I was successful in getting over that, within a month time, completing the degree I found an exciting and challenging place to work. Its has been almost two months has passed since I join the company. It was very challenging where I got the opportunity to work directly with a client and carried out development of a software system. My target was to built a web based system that helps the parties (customers, salesmen, owner, manufacturers, suppliers, etc.. ) to carry out their tasks in a user friendly and with minimum effort. It was a very challenging task for me because I had to learn many things. Luckily for me the client (Stuart) I was contacting has worked as a software developer, so this helped me a lot in all means of activities. My deadline for the completing of the projects is only two weeks ahead. Looking at the progress so far I have achieved I believe that target is achievable. :-)

During the latter part of October I did a presentation at a local conference for a research carried out for the Sahana project. The presentation was grate success. Fifteen papers were presented at the conference covering various fields such as Software Engineering, Electrical Engineering, Telecommunication Engineering. Sahana is a project that focuses on building a versatile tool for post disaster/emergency management activities in the world with the collaborative effort of dedicated volunteers from all around the world.

Yahoo YUI Theater

Recently while I was searching the web to find resources on web development I came across the Yahoo’s YUI Theater that provides valuable insight into the world of Web development through a series of videos that covers basically most of things required to know by a person who is into web development. I strongly believe that anyone who likes to understand the basics should watch it.

Out of the dozens of videos I loved the following ones

  • Nate Koechley — Professional Frontend Engineering
  • Nate Koechley — The YUI CSS Foundation
  • Douglas Crockford — The JavaScript Programming Language
  • Douglas Crockford — An Inconvenient API: The Theory of the DOM
  • John Resig — The DOM Is a Mess

« Older entries