WebCreator Pro + jQuery + Moneris

One of my customers created a simple form in WebCreator Pro, a donation form sending an email to their administrators.  Next, they wanted to tie the form with a payment gateway, Moneris in this case.  This is not a out-of-the-box feature of WebCreator Pro, of course.  Here I come to the rescue.

They built all their site with WebCreator Pro, and they didn’t want to switch to another CMS.  They also wanted to integrate the Moneris payment gateway at the lowest possible cost .  My previous experience was with fully embedded payment solutions, using Active Merchant and Ruby on Rails.  So this was a new challenge for me.

Solution

First, the cheapest way to integrate Moneris is to use their eSelect Plus Hosted Payment Page package.  The form submits the data to one of their web servers, and you then configure the page to your needs.  This solution also supports recurrent transactions, which was needed by the customer. Moneris has a great testing environment, so I was able to fully test my solution.

Next, when submitting data, you have to use a naming convention for the fields, as per Moneris integration guide.  And you also have to make sure the data is well formatted for the fields .

So here I am with an HTML page generated by WebCreator Pro.  This tool does not allow the designer to control how the HTML is generated.  You can include some javascript code, but tying it with elements in the DOM is not that smple.

I decided to go with jQuery (I love jQuery!).  It was just a matter of including a “javascript include” in the page and then all my logic would sit in a .js file that I have full control on it.  I was able to do that in WebCreator Pro by adding a Counter object at the top of the page.

In a nutshell, here’s what my script does after it loads:

  1. When the DOM is ready, modify the form to change the encoding to ISO-8859-1 (required by Moneris to support french accents – by the way, this won’t work in IE).
  2. Add hidden fields for the store ID and key.
  3. Add additional hidden field to comply with the integration guide.  I also have some fields that are specific to the recurrent payment (if selected by the user).
  4. Change the “onclick” event of the submit tag so that it calls one of my functions.
  5. Fill-out some default values.

Then, the script will do some validations and some data manipulations when the user hits the Submit button.  If everything is find, the form will get posted to the Moneris server and the user will then enter her credit information.

This solution of course requires Javascript, but we assume that Javascript is enabled on the browser.  Anyway, most of the WebCreator Pro output requires javascript.

Then it was as simple as deploying my javascript files on the test and production servers.  Fortunately, WebCreator Pro does not wipe out the files when it publishes the site.

Have fun!

Advertisements