- Importation des éléments nécessaires
- Modification de la page "retourboutique"
- Ajout du code de localisation de la base du composant
- Personnalisation de la page de paiement
- Le lien "Payer"
- Les autres liens : où mettre le code qui enregistre le paiement ?
- Test du paiement
- Les éléments à déployer pour le paiement
- Problèmes les plus fréquents
- Erreur  : La page de retour n'a pas renvoyé le résultat attendu
- Après déploiement, un message indique : "Commande à mettre en attente avec intervention humaine nécessaire"
- Comment activer les log (WLOG) et les lire ?
Comment ajouter un paiement sécurisé dans un site WEBDEV ? Importation des éléments nécessaires - Ouvrez votre projet WEBDEV.
- Importez le composant externe "WW_PaiementSecurise".
- Sous le volet "Projet", dans le groupe "Projet", déroulez "Importer" et sélectionnez "Un composant externe .. A partir d'un fichier".
- Indiquez le chemin du fichier WDI voulu. Dans notre cas, ce fichier correspond à "PaiementSecurise.wdi" présent dans le sous-répertoire de WEBDEV : "\Composants\Composants exemples\WW_PaiementSecurise\Exe\Composant".
- La fenêtre de description du composant apparaît. Fermez cette fenêtre.
- Afin d'avoir une base pour intégrer le paiement sécurisé, nous vous proposons d'importer également 2 pages spécifiques dans votre projet :
- Sous le volet "Projet", dans le groupe "Projet", déroulez "Importer" et sélectionnez "Des éléments WEBDEV et leurs dépendances".
- Sélectionnez le répertoire d'importation. Ce répertoire correspond au répertoire du composant WW_Paiement_sécurise présent dans le sous-répertoire de WEBDEV : "Composants\Composants exemples\WW_PaiementSecurise"
- La liste des pages s'affiche.
- Sélectionnez :
- La page correspondant à la solution de paiement sécurisé à utiliser. Le nom de cette page commence par "PAGE_Paiement_Securise_XXX". Par exemple : "PAGE_Paiement_Securise_ATOS.wwh".
- La page "retourboutique.wwh".
- Validez. Les pages sont importées dans le projet.
- Recompilez le projet pour prendre en compte ces pages : sous le volet "Projet", dans le groupe "Projet", déroulez "Recompiler et synchroniser" et sélectionnez "Recompiler le projet et générer les pages HTML".
Modification de la page "retourboutique" - Ouvrez la page "retourboutique" sous l'éditeur.
- Cette page contient un champ Page interne "PI_RETOUR".
- Affichez la fenêtre de description du champ Page interne "PI_RETOUR".
- Dans l'onglet "Général", modifiez la page interne liée au champ : remplacez "PI_Payback" par "PaiementSécurisé.PI_Payback".
- Enregistrez la page (
). - Enregistrez une copie de cette page avec un nom personnalisé : sous le volet "Accueil", dans le groupe "Général", déroulez "Enregistrer" et sélectionnez "Enregistrer sous".
- Dans la fenêtre qui s'affiche, indiquez le nouveau nom de la page et validez.
Remarque : Le fait de personnaliser cette page avec un nom spécifique accroît la sécurité du paiement. - Assurez-vous que cette page ne soit pas référencée :
- Affichez la fenêtre de description de la page renommée.
- Dans l'onglet "Détail", l'option "Interdire le référencement" doit être cochée.
- Validez la fenêtre de description.
Ajout du code de localisation de la base du composant Il est nécessaire d'ajouter au début du code du projet (par exemple dans l'événement "Initialisation lors d'une connexion à une session prélancée"), le code permettant au composant de localiser le fichier des paiements et de fixer son mot de passe qui vous est personnel. Ce code est le suivant :
<BLOC>
ParamètresDonnées(fRepDonnées() + "\Paiement", "mot de passe du ficher à personnaliser")
<FIN>
Personnalisation de la page de paiement - Ouvrez la page "PAGE_Paiement_Securise_xxx" où xxx correspond à la solution de paiement que vous désirez utiliser. Dans cet exemple, nous manipulons la page "PAGE_Paiement_Securise_ATOS.wwh"
- Supprimez le bouton "Point d'interrogation" qui référence une page d'information qui n'a pas été importé dans ce projet.
- Uniquement pour ATOS :
- Supprimez le champ Image "IMG_BANQUE" dont l'image n'a pas été importé dans ce projet.
- Supprimez le code qui affecte le champ "IMG_BANQUE" dans les déclarations globales de la page.
- Ajustez le type de la page en fonction du type de page souhaité dans votre projet : Session, AWP, mode Zoning, mode Responsive, ...
- Dans le cas de ATOS, assurez-vous que le lien "Payer" a bien comme destination l'iFrame "IFRM_PAIEMENT".
Le lien "Payer" Ce lien contient le code qui déclenche le lancement du paiement sécurisé. 1. Paramètres spécifique du compte de la banque Dans ce code, les paramètres du compte de la banque doivent être indiqués. En fonction de la solution de paiement choisie, ces informations sont différentes. Votre projet contient une page spécifique correspondant au paiement souhaité : dans le code de ce lien, vous trouvez un code adapté au type de paiement choisi. Ce code contient des commentaires explicatifs spécifiques aux paramètres requis. Exemple pour ATOS : - Il faut indiquer un "code société" :
MonPaiement:CodeSociété - Il faut également remplacer les fichiers présents dans le sous-répertoire du nom relatif à la solution de paiement sécurisé utilisée par les fichiers fournis par la banque. Dans cet exemple, les fichiers se trouvant dans le sous-répertoire "Mercanet" précédemment copiés : pathfile, parmcom.08258434141111, parmcom.mercanet et certif.fr.082584341411111
Exemple pour Lyra (Systempay, Cyberplus, Spplus, Payzen, ...) : Il faut indiquer : - un "identifiant de site" : MonPaiement:IdentifiantSite
- un numéro de certificat MonPaiement:Certificat.
Il s'agit de deux informations que l'on peut trouver le site de back-office, dans le paramétrage de la boutique, onglet "Certificats". 2. Nom de la page de retour de "serveur à serveur" (aussi appelé IPN : Notification Instantanée de Paiement)Dans ce code, il faut également remplacer le nom de la page de retour de serveur à serveur par le nom de la page personnalisé précédemment. Par exemple : MonPaiement:PageRetourServeurÀServeur="nomdepagepersonnalisepourlesretours2s" devient : MonPaiement:PageRetourServeurÀServeur="RETOUR_S2S_B6SH7ZEX" Selon la solution de paiement choisie, il faut renseigner dans le back-office de la banque, l'URL à laquelle cette page sera accessible. Il s'agit d'une URL de cette forme : http://<domaine>/<Nom du site>_WEB/<Langue>/<Nom de la page>.awp Exemple : - Utilisation d'une page de retour (nommée "RETOUR_S2S_B6SH7ZEX") pour un site WEBDEV qui a comme nom "shop" et qui est déployé sur un serveur avec le nom de domaine "www.mondomaine.fr" en français :
http://www.mondomaine.fr/SHOP_WEB/FR/RETOUR_S2S_B6SH7ZEX.awp - Dans le site de back-office pour la solution Lyra, il faut aller dans le paramétrage de la boutique. Dans l'onglet "Configuration", partie "URL de retour", il faut ACTIVER l'option "URL de notification à la fin du paiement".
Attention : il ne faut pas mettre votre code de gestion de fin de paiement dans ces pages. Votre code de gestion de fin paiement doit être présent dans "le lien de retour à la boutique" et "le lien de retour de serveur à serveur" (ce point sera abordé dans la suite de ce document). 3. Images des cartes pour ATOS Dans le cas de ATOS, il se peut que les images des cartes bancaires ne s'affichent pas. Dans ce cas : - Ouvrez le code du lien "Payer".
- Ajoutez la ligne de code suivante après la déclaration de la variable MonPaiement :
MonPaiement est un PaiementSécurisé(nBanque)
MonPaiement.RepertoireWebLogo = RépertoireWeb() + "/PaiementSecurise/FR/ATOS/"
4. Autres personnalisations Il est ici possible d'également personnaliser différentes informations, suivez ce qui est indiqué dans le commentaire du lien "Payer". En fonction des solutions de paiement, il est possible de : - spécifier les coordonnées de facturation.
- spécifier les coordonnées de livraison.
- préciser le contenu du panier.
- spécifier certains types de cartes bancaires.
- faire des abonnements.
- ...
La méthode "FormulaireParamètreAjoute" permet de modifier ou d'ajouter facilement des informations dans le formulaire envoyé à la banque. Reportez-vous à la documentation du paiement choisi pour plus d'informations. Les autres liens : où mettre le code qui enregistre le paiement ? Deux autres liens sont présents dans la page : - Le lien "Retour à la boutique" :
Le code de ce lien est exécuté lorsque l'internaute a terminé son paiement, que ce soit avec succès ou non, lorsqu'il revient sur le site. Attention : Certains internautes ne reviennent jamais au site marchand, suite à une erreur de manipulation ou une coupure de leur accès à Internet par exemple. Toutefois, en mode test, sur une machine non accessible par le serveur de la banque, c'est le seul code qui est exécuté. - Le lien "Retour Serveur à Serveur" (aussi appelé "IPN" : Notification Instantanée de Paiement)
Le code de ce lien exécuté lorsque l'internaute a validé son paiement sur le site de la banque avant même qu'il ne décide de revenir au site marchand ou non. Attention : Ce code est exécuté via un appel direct du serveur de la banque, donc en dehors de tout contexte, cookies, session, ... de l'internaute. En développement, en mode test, sur une machine non accessible par le serveur de la banque, ce code n'est pas exécuté.
Où mettre le code qui enregistre le paiement ? Une des meilleures solutions est de mettre le code qui enregistre le paiement dans le code associé aux deux liens "Retour à la boutique" et "Retour Serveur à Serveur" mais avec des petites variantes. - Dans le code du lien "Retour Serveur à Serveur" : dans ce code, il faut normalement enregistrer le paiement, mettre à jour la base de données et par exemple envoyer un email avec la facture. Mais en mode test, ce code ne s'exécute pas : la mise au point est complexe.
- Dans le code du lien "Retour à la boutique" : il convient de vérifier que le retour de serveur à serveur a déjà bien été enregistré, sauf en mode test. Si ce n'est pas le cas, il faut enregistrer le paiement comme étant en anomalie et noter qu'il doit être vérifié.
Si vous avez besoin d'afficher des informations à l'internaute suite au paiement, continuer, ou si vous devez lui demander de nouvelles informations, c'est dans ce code que vous pourrez le faire.
Pour tester le paiement, vous pouvez : - Lancer directement la page importée,
- Ajouter un code qui va lancer la page importée et passer en paramètre à la page les éléments nécessaires : montant à payer, email du payeur, paiement de test ou réel, ...
Qu'est-ce qui change une fois le site déployé ? Une fois le site déployé sur un serveur, le retour de serveur à serveur (IPN) doit s'exécuter en plus du retour à la boutique comme expliqué précédemment. Lorsque les tests seront validés, il faudra changer l'option indiquant l'utilisation d'un paiement de test pour spécifier que les paiements sont désormais réels. Les éléments à déployer pour le paiement Lors du déploiement, il faut exclure du déploiement les fichiers HFSQL "Transaction" qui contiennent les transactions de tests effectuées en local : Problèmes les plus fréquents Erreur : La page de retour n'a pas renvoyé le résultat attendu Cette erreur peut apparaître essentiellement une fois le site déployé. Cela signifie que le composant a tenté d'accéder à la page de retour à la boutique ou à la page de retour de serveur à serveur et qu'il n'a pas réussi. Les deux principales causes sont : - Cas 1 : Dans le code d'initialisation du projet, il y a un code qui force l'affichage d'une page spécifique d'une autre page si certains paramètres ne sont pas reçus.
- Cas 2 : Les paramètres réseau du serveur ne lui permettent pas de se joindre lui-même.
Pour savoir quoi faire : - Testez cette URL dans votre navigateur :
http://www.mondomaine.fr/MONSITE_WEB/FR/retourboutique.awp?TEST=O en remplaçant : - "www.mondomaine.fr" par le nom ou l'adresse IP du site,
- "MONSITE" par le nom du projet du site,
- "retourboutique" par le nom de la page de retour à la boutique puis par le nom de la page de retour de serveur à serveur.
- Le test de cette URL doit afficher OK
- Si le test affiche bien OK : le problème est vraisemblablement lié à la configuration réseau du serveur (cas 2). Vous pouvez faire en sorte que le composant ne fasse pas ce test en activant la ligne de code suivante (qui doit déjà être présente mais en commentaire) :
MonPaiement.IgnoreTestPageRetour = Vrai
- Si le test affiche une autre page, vous êtres vraisemblablement dans le cas 1 : il faut contrôler le code du projet et vérifier qu'aucun affichage d'une page n'est forcé (fonction PageAffiche). Et par exemple, ne pas effectuer cette action en mode AWP (fonction EnModeAWP).
- Si le test affiche une erreur, il faut rechercher l'origine de cette erreur.
- Si vous n'êtes pas dans les cas précédents, il faut activer des log (wlog) pour comprendre ce qu'il se passe.
Après déploiement, un message indique : "Commande à mettre en attente avec intervention humaine nécessaire" Ce message peut apparaître au moment du retour au site suite au paiement lorsque les informations reçues indiquent que le paiement a été validé mais que le retour de serveur à serveur n'a pas été enregistré. Le retour de serveur à serveur ne s'effectuant qu'en déploiement, ce message ne peut pas arriver en mode test. Pour savoir quoi faire : - Testez cette URL dans votre navigateur :
http://www.mondomaine.fr/MONSITE_WEB/FR/pagederetourseserveuraserveurpersonnalmise.awp?TEST=O en remplaçant : - "www.mondomaine.fr" par le nom ou l'adresse IP du site,
- "MONSITE" par le nom du projet du site,
- "pagederetourseserveuraserveurpersonnalmise" par le nom de la page de retour puis par le nom de la page de serveur à serveur.
- Si le test affiche :
- une autre page, il faut contrôler le code du projet et voir s'il n'y a pas l'affichage d'une page qui est forcée dans certains cas (fonction PageAffiche). Et par exemple, ne pas effectuer cette action en mode AWP (fonction EnModeAWP).
- une erreur, il faut rechercher l'origine de cette erreur.
- OK ou si vous n'êtes pas dans les cas précédents, il faut consulter le log de la transaction dans la table "Transactions", rubrique "LogInfo". Ce log est aussi récupérable avec les fonctions TransactionLog, TransactionLogSelonID par programmation.
Comment activer les log (WLOG) et les lire ? La création de log (WLog) est une fonctionnalité du WLangage qui permet d'enregistrer dans un fichier toutes les lignes de code qui s'exécutent dans un fichier WLOG avec plus ou moins de détails. Pour cela, il faut utiliser la fonction dbgActiveLog. Si vous avez suivi les différentes étapes de ce document, dans le code du projet, il y a une ligne sur laquelle il suffit d'enlever les commentaires :
dbgActiveLog(fRepDonnées()+["\"]+"paiementlog_[%Date%]_[%Heure%].wlog", LogTout)
En cas de difficulté, il faut : - Activer les logs.
- Déployer le site (si le problème ne se produit qu'en déploiement).
- Refaire la manipulation qui provoque le problème.
- Récupérer les fichiers WLOG pour les ouvrir avec WEBDEV.
Attention : WEBDEV ne montrera pas toutes informations présentent dans les fichiers WLOG : il ne montre que les informations de la configuration active du projet qui est ouvert sous l'éditeur. - Si aucun projet n'est ouvert, vous ne verrez rien.
- Si votre projet est ouvert, vous verrez les lignes de code exécutées par votre projet.
- Si le projet du composant de paiement sécurisé est ouvert avec la configuration du composant activé, vous verrez les lignes de code exécutées par le composant.
Attention : Ne laissez pas en permanence les logs activés : cela risque de ralentir le site et d'encombrer rapidement l'espace disque. Pour ne pas avoir à recompiler le site pour activer les logs, vous pouvez conditionner l'activation à une information dans un fichier de paramétrage. Par exemple :
SI Val(INILit("PARAMETRE", "WLOG", "0", fRepDonnées() + ["\"] + "param.ini")) = 1 ALORS
dbgActiveLog(fRepDonnées() + ["\"] + "paiementlog_[%Date%]_[%Heure%].wlog", LogTout)
FIN
|
|
|