iDEAL Basic (ING Bank) Integration

In Payment Gateway on March 2nd, 2010

iDEAL Basic integration method is different from iDEAL Advance. Sumit Bankskota has provided code for basic integration, thanks Sumit. Below is complete code, try on your own:

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  4. </head>
  5. <body>
  6. <FORM METHOD="post" ACTION="https://idealtest.secure-ing.com" name="frm1" id="frm1">
  7. <INPUT type="hidden" NAME="merchantID" value="xxxxxxx" />
  8. <INPUT type="hidden" NAME="subID" value="0" />
  9. <INPUT type="hidden" NAME="amount" VALUE="xxxxx" />
  10. <INPUT type="hidden" NAME="purchaseID" VALUE="xxxx" />
  11. <INPUT type="hidden" NAME="language" VALUE="nl" />
  12. <INPUT type="hidden" NAME="currency" VALUE="EUR" />
  13. <INPUT type="hidden" NAME="description" VALUE="iDEAL Basic purchase" />
  14. <INPUT type="hidden" NAME="itemNumber1" VALUE="xxxx" />
  15. <INPUT type="hidden" NAME="itemDescription1" VALUE="xxxxx" />
  16. <INPUT type="hidden" NAME="itemQuantity1" VALUE="xxxx" />
  17. <INPUT type="hidden" NAME="itemPrice1" VALUE="xxxxx" />
  18. <INPUT type="hidden" NAME="paymentType" VALUE="ideal" />
  19.  
  20. <INPUT type="hidden" NAME="validUntil" VALUE=" 2009-01-01T12:00:00:0000Z" />
  21.  
  22. <input type="hidden" name="PSPID" value="PSP-id" />
  23.  
  24. <input type="hidden" name="accepturl" value="http://www.hosturl.nl/path/accept_url.php" />
  25. <input type="hidden" name="declineurl" value="http://www.hosturl.nl/path/decline_url.php" />
  26. <input type="hidden" name="exceptionurl" value="http://www.hosturl.nl/path/exception_url.php" />
  27. <input type="hidden" name="cancelurl" value="http://www.hosturl.nl/path/cancel_url.php" />
  28. <input type="hidden" name="homeurl" value="http://www.hosturl.nl/home">
  29.  
  30. <input type="submit" value="Bevestig bestelling" id="submit2" name="submit2" />
  31. </form>
  32. </body>
  33. </html>

Parameter values in hidden control are hypothetical (dummy). So you need to replace with right values.

For iDEAL Advance, click this link.

If you have done for any other Bank or other way, let me know.

, ,
View Comments

TinyMCE editor – image upload plugin (Ajax File Manager)

In Javascript on March 2nd, 2010

TinyMCE is very nice editor. But it lacks image upload functionality which drives crazy to lot of programmer as enabling image upload facility is tough. I have chance to play around with it and found actually integrating image upload facility is very easy. Among lot of plugin, I find Ajax File Manger is nice.

You can download tinyMCE with Ajax File Manager plugin from http://www.phpletter.com/DOWNLOAD, See under “Tinymce Ajax File and Image Manager”. Direct link http://www.phpletter.com/download_project_version.php?version_id=28.

A copy of demo TinyMCE with Ajax File Manager can be seen here http://demo.phpletter.com/tinymce_test.php. View Source and copy code.

Code snippet to enable Ajax File Manager in TinyMCE:

  1. tinyMCE.init({
  2.  mode : "exact",
  3.  elements : "ajaxfilemanager",
  4.  theme : "advanced",
  5.  plugins : "table,advhr,advimage,advlink,flash,paste,fullscreen,noneditable,contextmenu",
  6.  theme_advanced_buttons1_add_before : "newdocument,separator",
  7.  theme_advanced_buttons1_add : "fontselect,fontsizeselect",
  8.  theme_advanced_buttons2_add : "separator,forecolor,backcolor,liststyle",
  9.  theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,",
  10.  theme_advanced_buttons3_add_before : "tablecontrols,separator",
  11.  theme_advanced_buttons3_add : "flash,advhr,separator,fullscreen",
  12.  theme_advanced_toolbar_location : "top",
  13.  theme_advanced_toolbar_align : "left",
  14.  extended_valid_elements : "hr[class|width|size|noshade]",
  15.  file_browser_callback : "ajaxfilemanager",
  16.  paste_use_dialog : false,
  17.  theme_advanced_resizing : true,
  18.  theme_advanced_resize_horizontal : true,
  19.  apply_source_formatting : true,
  20.  force_br_newlines : true,
  21.  force_p_newlines : false,
  22.  relative_urls : true
  23. });
  24.  
  25. function ajaxfilemanager(field_name, url, type, win) {
  26.  var ajaxfilemanagerurl = "http://<host>/<path_to_ajaxfilemanage>/ajaxfilemanager/ajaxfilemanager.php?editor=tinymce";
  27.  switch (type) {
  28.   case "image":
  29.    break;
  30.   case "media":
  31.    break;
  32.   case "flash":
  33.    break;
  34.   case "file":
  35.    break;
  36.   default:
  37.    return false;
  38.  }
  39.  var fileBrowserWindow = new Array();
  40.  fileBrowserWindow["file"] = ajaxfilemanagerurl;
  41.  fileBrowserWindow["title"] = "Ajax File Manager";
  42.  fileBrowserWindow["width"] = "782";
  43.  fileBrowserWindow["height"] = "440";
  44.  fileBrowserWindow["close_previous"] = "no";
  45.  tinyMCE.openWindow(fileBrowserWindow, {
  46.    window : win,
  47.    input : field_name,
  48.    resizable : "yes",
  49.    inline : "yes",
  50.    editor_id : tinyMCE.getWindowArg("editor_id")
  51.  });
  52.  
  53.  return false;
  54. }

Analysis of code:
Line number 15:

  1. file_browser_callback : "ajaxfilemanager"

The value ‘ajaxfilemanager’ defines the name of the Javascript function which will be called every time a user clicks the browse button in one of the dialogue windows. You can see function definition start from line number 25 to 54. This function opens a new window calling a URL tailored (See line number 26).

Important Points
Don’t forget to set upload directory path in tiny_mce/plugins/ajaxfilemanager/inc/config.base.php. It should be relative path.

  1. define('CONFIG_SYS_DEFAULT_PATH', '../../../../../uploads/');
  2. define('CONFIG_SYS_ROOT_PATH', '../../../../../uploads/');

Above folder should have 777 permission. Also set 777 permission to session folder folder, tiny_mce/plugins/ajaxfilemanager/session.

Alternatively you can try following uploader

http://dustweb.ru/log/projects/tinymce_images/

Cofigure:

  1. Give class name to your editor e.g. class=”tiny”
  2. Add following
    In list of plugins, add images
    add editor_selector : “tiny”,
    In list of button, add images
  3. Change DIR_IMAGES and DIR_FILES path on tiny_mce/plugins/images/connector/php/config.php to suit your location. Upload folder should have 777 permission.

Actual configuration looks like (See images on line number 8 and 12):

  1. tinyMCE.init({
  2.  // General options
  3.  mode : "textareas",
  4.  theme : "advanced",
  5.  
  6.  //plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount",
  7.  editor_selector : "tiny",
  8.  plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,images,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
  9.  
  10.  // Theme options
  11.  theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
  12.  theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,images, cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
  13.  theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
  14.  theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
  15.  theme_advanced_toolbar_location : "top",
  16.  theme_advanced_toolbar_align : "left",
  17.  theme_advanced_statusbar_location : "bottom",
  18.  theme_advanced_resizing : true,
  19.  
  20.  // Example content CSS (should be your site CSS)
  21.  content_css : "css/content.css",
  22.  
  23.  // Drop lists for link/image/media/template dialogs
  24.  template_external_list_url : "lists/template_list.js",
  25.  external_link_list_url : "lists/link_list.js",
  26.  external_image_list_url : "lists/image_list.js",
  27.  media_external_list_url : "lists/media_list.js",
  28.  
  29.  // Replace values for the template plugin
  30.  template_replace_values : {
  31.   username : "Some User",
  32.   staffid : "991234"
  33.  }
  34. });

Good luck!

, ,
View Comments

iDEAL payment – ING Bank – iDEAL Advance Integration

In Payment Gateway on March 2nd, 2010

It’s always not easy to work with payment gateway service as each gateway service has different of configuration options, parameters. Lastly, I found iDEAL as weired/tough. You will hardly find documentation in English. So, I thought share idea how I did configure iDEAL Advance using PHP (ING bank).

In summery, it takes following steps to setup iDEAL Advance:

  1. Registration
  2. Integration
  3. Run mandatory test cases in iDEAL test environment
  4. iDEAL approve test cases and contract (you should sign up contract)
  5. Live account has to be activated (See below Mandatory Test)
  6. So, your live sale can be done in iDEAL.

Follow details steps below:

  1. Login to iDEAL/ING Dashboard (Given below are URL for dashboard)
    Test environment: https://idealtest.secure-ing.com
    Production environment: https://ideal.secure-ing.com
    Note: Merchant ID and Login name is same for both test and live. But password is different for live and test.
  2. Once you login, first thing you need to go to Document link. There you can download documentation and Advance integration code. Documentation is available in English and Dutch.
    Important Downloads:
    a) iDEAL General – Introduction and procedure (Click on link to get manual)
    b) iDEAL Advanced Integration Manual PHP (Click on link to get manual)
    c) iDEAL Advanced Integration Code PHP (Sorry,  no links, ups!!)
    Note: You should be aware about registration process. Look “Registration process (2)” in iDEAL General – Introduction and procedure
  3. To integrate Advance iDEAL in PHP, follow instruction in “iDEAL Advanced Integration Manual PHP”, there are lot of steps you should follow carefully. In summery:
    1) Generate private key using openSSL
    2) Generate certificate using private key.
    3) Upload certificate to configuration (Login to iDEAL dashboard -> Go to sign up process -> Click on Configuration tab)
    4) Change params value in config.conf which available in /includes/security.
    5) Also you should edit iDEALConnector_config.inc.php if you move security folder then then default.
  4. Upload scripts (PHP Advanced Code)
  5. Run 6 tests in iDEAL test environment. Wait for iDEAL response on your test.  (See below Mandatory Test)
  6. iDEAL has to set live account activate. Now your gateway is ready!!

Mandatory Test:

You should run mandatory test before you can set iDEAL live. Look “Registration process (2)” in iDEAL General – Introduction and procedure. It’s not easy to setup online store to configure to meet test suite requirement. Hence, you can use iDEAL Tester, which you can download from http://www.ideal-simulator.nl/ideal-professional-tester.html.

Once you download scripts, make changes on idealprofessional.cfg.php file which is located inside library folder. Upload scripts to server and access it http://<host>/ideal-professional-tester/index.php

You can confirm tests status from iDEAL dashboard.

  1. Login to Dashboard (test and live has different dashboard)
  2. Click on Sign up Process
  3. Click on Status (You’ll see following screen if test successes).

    iDEAL mandatory test results

    iDEAL mandatory test results

  4. Once you finish test suits, iDEAL will activate live account. It may take several hours, so I suggest you to call their support dept. and ask them to activate (it speed up).
  5. Once they activate your live account, your live dashboard looks different as given below.

iDEAL live dashboard (after activated)
Note: You should run this test on same domain where your online store will resides.

Note: this post describe process how to integrate iDEAL Adanced (ING Bank) using PHP APIs.

Configuring iDEAL basic is very easy which works with post method by redirecting URL to their gateway.

If you have done for any other Bank or other way, let me know.

Update: for iDEAL Basic click this link

, ,
View Comments
« Older Entries
Newer Entries »