Le blog de Phoceis

SIPS d’ATOS est la principale solution de paiement en France, proposée sous leur propre marque par de nombreuses banques (WebAffaires, E-Transactions, Sherlock, etc…).

Elle est toutefois ancienne et n’a pas évolué avec la demande pourtant toujours croissante des utilisateurs pour plus de convivialité. Notamment, elle nécessite l’affichage de plusieurs pages, là où l’on sait que chaque nouvelle page, chaque seconde perdue est un risque supplémentaire que l’utilisateur quitte le site sans passer à l’acte.

Nous avons donc essayé de nous affranchir pour le moins de la première page, celle du choix du moyen de paiement, ou tout du moins de l’intégrer mieux dans le processus d’achat via un affichage en Ajax (et donc un chargement de page en moins). Mais faire cela en .NET n’a pas été un chemin sans écueil.

Le résultat obtenu ressemblera à cela :

Nous utilisons dans cet exemple les ASPXCallBack de Devexpress, mais cela reste tout à fait faisable avec des CallBack classiques.

Côté ASPX, vous devez disposer :

• d’un bouton déclenchant l’affichage de la popup
• d’un ASPXCallback nommé cal_paiement
• d’une popup nommée pop_paiement avec comme contenu un div <div id=”div_paiement”></div> pour l’instant vide

Côté Code behind, une fonction permettant d’appeler la DLL de SIPS et renvoyer le code à afficher.

Le code sur le bouton est simple

cal_paiement.SendCallback();
pop_paiement.Show();

Il déclenche le CallBack du CallBackPanel.

protected void cba_paiement_Callback(object source, DevExpress.Web.ASPxCallback.CallbackEventArgs e)
    {
        string pathfile = globals.SIPS_Pathfile;
        string request_exe = globals.SIPS_Request_exe;
        string amount = 1500;
        string parm = "merchant_id=" + globals.SIPS_MerchantID;
        parm += " merchant_country=fr";
        parm += " amount=" + amount;
        parm += " currency_code=978"; //978 = EUR
        parm += " caddie=1";
        parm += " pathfile=" + pathfile;
        parm += " data=";
        Execute transaction = new Execute();
        transaction.cmdLine = request_exe;
        transaction.parameters = parm;
        // --Appel de l'activeX pour executer request
        string result = transaction.ExecuteApp();
        // --Sortie de la fonction executeApp() : !code!error!buffer!
        // --- code=0: la fonction génère une page html contenue dans la variable buffer
        // --- code=-1 : La fonction retourne un message d'erreur dans la variable error
        string[] tableau = result.Split('!');
        string code = tableau[1];
        if (code != "0")
            e.Result = tableau[2];
        else
            e.Result = tableau[3];
    }

Le callBack renvoie dans e.Result le code html qui nous a été renvoyé par la DLL de SIPS. Nous pensions au début utiliser un UpdatePanel classique. Toutefois un problème s’est présenté. Le code retourné par la DLL est en fait un formulaire “<FORM></FORM>”. Or si l’on clique sur un des boutons (les logos CB) à l’intérieur de ce formulaire, l’action du formulaire principal de .NET (<FORM runat=”server”>) est exécuté, entraînant un rafraîchissement de la page au lieu de nous envoyer vers le serveur de paiement.

C’est pourquoi nous avons utilisé un CallBack, et sa fonctionnalité d’exécuter le javascript aprés que son CallBack ait été effectué. Le but va être de changer le “Action” du formulaire ASP.NET par l’adresse du formulaire de SIPS. Pour plus d’informations, voir cet article.

Voilà donc le code pour l’évènement CallbackComplete de l’ASPXCallBackPanel

	//Displaying the SIPS form in our container layer
	document.getElementById('div_paiement').innerHTML= e.result;
	// parsing code to get the "action" value.
	// ok it is rough, will be tuned later on
	var formAction = e.result.substring(e.result.indexOf('ACTION=')+8);
	formAction = formAction.substring(0,formAction.indexOf(' ')-1);
	// changes the action value for the ASP.NET form tag
	document.forms[0].action = formAction;

Remarques sur ce code : il conviendra, si l’utilisateur ferme la popup sans cliquer sur un logo de restaurer la valeur initiale de action pour le formulaire ASP.NET