[eCommerce] Détecter le clique sur l'une des cartes de paiements

**manbar** · 09/03/2015, 15h55

Bonjour,
j'ai un site web de vente en ligne et je souhaiterai savoir si l'utilisateur accède à la page de paiement en ligne.
J'ai installé la solution Atos pour le paiement en ligne et j'ai donc les trois images représentant les différents type de carte : CB / Visa / Mastercard
je souhaiterais enregistrer le fait que l'utilisateur clique sur une des trois images afin de savoir si il accède au paiement en ligne ou si il quitte le site avant ....
je vois pas trop comment faire si quelqu'un à une idée merci d'avance

**lilalex** · 09/03/2015, 17h01

Salut,

Deux solutions :

Javascript : tu rajoutes un évènement onclick qui va intercepter le clic sur l'image, tu fais un appel ajax puis tu submit le formulaire au succès de l'appel (car oui il s'agit bien d'un formulaire en fait ^^).
Faut tester mais tu devras peut-être rajouter return false à la fin de ta fonction.

PHP : Tu parse le formulaire renvoyé par ATOS pour en extraire les données (attribut action, token et cartes disponibles), au lieu d'afficher ce formulaire tu affiches ton propre formulaire qui passe par une page intermédiaire (qui reçoit les infos extraites) qui elle même renvoit au bon endroit.

Cdt,

**manbar** · 10/03/2015, 14h39

Merci pour la réponse.
je viens d'essayer la solution javascript : je n'arrive pas à le faire fonctionner. a priori l’événement ''click'' ajouté sur l'image n'est pas pris en compte, c'est la 'couche' atos qui prime.
j'ai pourtant bien tester en simulant le fonctionnement mais rien à faire....

pour simuler j'ai affiché le code source de la page et récupérer l'input type image ajouté par atos:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<INPUT TYPE=IMAGE NAME=VISA BORDER=0 SRC="/www/logo/VISA.gif">

puis j'ai ajouté mon code javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
function accesPaiement(commande_cpt)
{var xhr = null;
if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } 
else if (window.ActiveXObject) { xhr = new ActiveXObject('Microsoft.XMLHTTP');}
xhr.open('POST', 'maj_etat_paie?transaction_id=' + commande_cpt, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
xhr.send('');}
if (document.getElementsByName('VISA ').item(0) != null){document.getElementsByName('CB').item(0).addEventListener("click", accesPaiement(3753));}

en faisant ce test ça marche nickel mais par contre rien lorsque le module atos est en place....

**lilalex** · 10/03/2015, 14h53

Parce que je t'ai induit en erreur, c'est surement l'évènement submit que tu dois catcher.
Je ferais un test dans la soirée si tu n'as pas trouvé d'ici là.

**manbar** · 10/03/2015, 16h39

je viens d'avoir les techs d'etransaction en ligne ils me disent que ce n'est pas possible....

**lilalex** · 10/03/2015, 17h12

Sur mes propres applis je fais un parsage php et ça fonctionne très bien ^^.

**manbar** · 11/03/2015, 11h06

bonjour, je suis toujours preneur de ta solution si t'as pu jeter un coup d’œil... merci

**lilalex** · 11/03/2015, 14h50

Salut,

Ok je pensais que tu avais abandonné.

Pour ce qui est du Javascript, j'ai codé un petit bout de code que tu pourras tester en local :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<head>
 
	<meta charset="utf-8">
	<title>Paiement SIPS ATOS</title>
 
</head>
<body>
 
	<div id="form-paiement-sips">
		<FORM METHOD=POST ACTION="https://rcet-payment.sips-atos.com:443/cgis-payment/prod/callpayment"><INPUT TYPE=HIDDEN NAME=DATA VALUE="65434...6654"><DIV ALIGN=center>Choisissez un moyen de paiement ci-dessous :<br><br></DIV><DIV ALIGN=center><INPUT TYPE=IMAGE NAME=CB BORDER=0 SRC="custom/images/sips/logo/CB.gif"><IMG SRC="custom/images/sips/logo/INTERVAL.gif"><INPUT TYPE=IMAGE NAME=VISA BORDER=0 SRC="custom/images/sips/logo/VISA.gif"><IMG SRC="custom/images/sips/logo/INTERVAL.gif"><INPUT TYPE=IMAGE NAME=MASTERCARD BORDER=0 SRC="custom/images/sips/logo/MASTERCARD.gif"><br><br></DIV></FORM>
	</div>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 
	<script>
 
		(function($) {
 
			var form = $("#form-paiement-sips form");
			var imageCB = $("#form-paiement-sips input[name='CB']");
			var imageVISA = $("#form-paiement-sips input[name='VISA']");
			var imageMASTERCARD = $("#form-paiement-sips input[name='MASTERCARD']");
			var submitIsAllowed = false;
 
			form.submit(function(event) {
				if (!submitIsAllowed) {
					event.preventDefault();
					return false;
				}
			});
 
			imageCB.click(function(event) { sendPaymentForm('CB'); });
			imageVISA.click(function(event) { sendPaymentForm('VISA'); });
			imageMASTERCARD.click(function(event) { sendPaymentForm('MASTERCARD'); });
 
			function sendPaymentForm(card) {
 
				var sipsData = $("#form-paiement-sips input[name='DATA']").val();
 
				$.ajax({
					url : 'see.html',
					type : 'GET',
					data : 'data=' + sipsData + '&card=' + card,
					complete : function(response, status) {
						form.append('<input type="hidden" name="'+card+'_x" value="12" />');
						form.append('<input type="hidden" name="'+card+'_y" value="12" />');
						submitIsAllowed = true;
						form.submit();
					}
				});
			}
 
		})(jQuery);
 
	</script>
 
</body>
</html>

Sinon pour la soluton PHP il faut utiliser un parseur genre simple html dom : http://simplehtmldom.sourceforge.net/ directement sur le formulaire renvoyé par SIPS.
Tu te sers des informations de ce formulaire pour construire ton propre formulaire qui appellera ta page intermédiaire plutôt que la page de paiement SIPS.

**manbar** · 12/03/2015, 11h32

merci pour ta réponse.
par contre je ne l'ai pas précisé clairement :-( mais j'utilise l'API ... il me semble pas que ton code puisse fonctionner avec
Merci

**lilalex** · 12/03/2015, 11h53

Salut,

par contre je ne l'ai pas précisé clairement :-( mais j'utilise l'API ... il me semble pas que ton code puisse fonctionner avec

Je me base sur le résultat renvoyé par l'API Payment Web (il te renvoie un formulaire).
Mets ici le formulaire que te renvoie SIPS si tu as un doute.

Il existe un autre moyen d'accéder au paiement SIPS sans l'API Payment Web ?

[eCommerce] Détecter le clique sur l'une des cartes de paiements

EDI, CMS, Outils, Scripts et API PHP

Discussions similaires

Partager

Partager