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!

6 thoughts on “WebCreator Pro + jQuery + Moneris

  1. Salut Hugo,

    C’est drôle, je suis aussi entrain de faire une intégration Moneris sur une application Facebook et j’ai le même problème concernant l’encoding ISO-8859. Je suis tombé sur ton blog par Google! As-tu trouvé une façon de faire fonctionner ta solution avec IE?

    J’ai fait une méthode JS qui est appelée au moment du submit du form et qui convertit les caractères accentués en HTML entities, ça fonctionne bien dans Chrome et Firefox mais pas de chance avec IE… C’est vraiment une plaie ce navigateur!

    • Salut P-O,

      Non, je n’ai as trouvé de solution à ce problème. Les accents sont donc perdu et de toute façon, le personnel de gestion étaient conscient du problème et recréait la fiche manuellement de toute façon.

      Si j’avais eu du contrôle sur la génération de la page web, je l’aurais généré en ISO-8859-1 pour pas avoir de problème avec Moneris. Mais ce n’était pas le ca, WebCreatorPro génère tout en UTF8.

      Mais le pire dans tout ça je trouve, c’est Moneris. Ils devraient supporter UTF8.

  2. Bien d’accord! J’ai le même problème que toi. Comme Facebook encode les pages en UTF-8, je n’ai pas de contrôle là-dessus… Je peste contre Moneris et IE. L’encodage ne devrait plus poser problème en 2010. C’est con parfois le temps qu’on perd sur des détails pareils!

    Merci de ton feedback!

    • Mezan… et j’ai un autre sujet de perte de temps pour mon prochain billet: l’encryption avec OpenSSL.😉 J’ai perdu un temps fou hier sur une niaiserie et je vais documenter ça, même que je risque d’améliorer un plugin.

      En parlant d’encodage, il faut ce méfier de ISO-8859-1. Des fois, des pages indiques cet encodage, mais dans le fonds, elles sont encodées avec CP1252 (un autre format windows).

      Et rien de pire qu’un utilisateur qui copie/colle du texte de Word dans un formulaire UTF-8. Arggg… que de problèmes en vue! Pour ça (et pour bien d’autres problème d’encodage), le merveilleux gem CMess: http://github.com/blackwinter/cmess. Je m’en sert pour “deviner” l’encodage d’un contenu et de le convertir à UTF8 si nécessaire.

  3. Moneris fait une fausse publicité en affirmant que son support technique est 24/7.

    La personne qui répond ne fait que vous demander si votre connexion Internet fonctionne ou si votre PC est ouvert.

    Ils vous confirme que votre compte est activé alors que ce n’est pas le cas.

    Après 24 heures, plusieurs appels et 5 heures de perdues, j’attends toujours un simple suivi sur la situation.

    Je recommande fortement d’éviter ce service et de trouver une entreprise honnête.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s