Lorsqu’on démarre sa boutique en ligne Prestashop ou lorsqu’on est une petite boutique, il est souvent peu ou pas intéressant de souscrire un contrat VAD auprès de sa banque, pour proposer le paiement par carte bancaire. La solution de simplicité est donc de mettre en place seulement le règlement par Paypal (vous payez ainsi une commission seulement si vous vendez), qui est proposé par défaut par Prestashop.

Le problème est que certaines personnes, en particulier les entreprises,  ne souhaitent pas ouvrir un compte Paypal pour faire leurs achats sur Internet. Nous allons donc vous montrer comment permettre à vos clients de payer par carte bancaire (CB) sans ouvrir un compte Paypal, sur votre boutique Prestashop.

Le module Paypal fournit avec Prestashop permet deux types de paiement :

  • Le premier, le paiement par compte Paypal.
  • Le second, moins connu, est de payer avec sa carte bleue directement sans créer un compte Paypal.

Le problème étant qu’avec le module Paypal fournit avec Prestashop, vous n’avez qu’un seul choix : “Payer avec Paypal”.
Un client n’ayant pas de compte Paypal (et n’en voulant pas), qui n’aurait pas connaissance du fait que l’on peut payer directement avec sa carte bancaire sur Paypal, abandonnera sûrement son panier. Et vous aurez perdu ce client.

Nous allons donc voir, comment modifier le module afin d’obtenir un second choix “Payer avec carte bleue, Visa, MasterCarde, Aurore…”, et lorsque l’on cliquera sur cette option, afficher une explication (sans popup) pour indiquer au client comment procéder au paiement, directement par carte bancaire, sans compte Paypal.

En effet, lorsqu’un client souhaite payer directement par carte bancaire sur Paypal, il ne tombe pas forcément sur la page permettant cela. Il peut ainsi tomber sur une page de connexion. Seul un petit lien en bas à gauche permet d’accéder à la page de paiement direct. Cela se fait en fonction de la présence d’un cookie Paypal présent ou non sur la machine.
Il est donc nécessaire d’afficher une petite aide, pour guider le client.
Vous pouvez voir le résultat sur notre boutique en ligne avec les captures suivantes :

Paypal Prestashop accepter paiement par carte bancaire direct


Paypal Prestashop aide au paiement par carte bancaire

Conscient que les démarches que nous allons décrire ne sont pas toujours simples, le module modifié et traduit est disponible sur notre boutique au prix de 10€ tout compris.

En aucun cas, notre équipe ne pourra être tenu pour responsable si le module que vous allez modifier ne fonctionne plus. Pensez à faire des sauvegardes !

Ajout de l’option “paiement par carte bancaire” au module Paypal

Nous allons modifier l’apparence du module Paypal. Rendez vous donc dans le dossier “modules” de votre installation Prestashop, et ouvrez le fichier Paypal.tpl.
Au début du fichier, vous trouverez une première balise <p></p>. Celle-ci correspond à l’option “Payer avec Paypal”.

Pour en ajouter une seconde, nous allons imiter cette balise.

Ajouter :

<p class=”payment_module”>

</p>

A l’intérieur de cette balise, créez un lien avec une image de votre choix.

<a title=”{l s=’Pay by credit card (Visa, MasterCard, Aurore…)’ mod=’paypal’}”>
<img src=”{$module_template_dir}paypal-cb.jpg” alt=”{l s=’Pay by credit card (Visa, MasterCard, Aurore…)’}” />
{l s=’Pay by credit card (Visa, MasterCard, Aurore…)’ mod=’paypal’}
</a>

Puis à l’intérieur du lien, nous allons créer un appel Javascript, permettant d’afficher l’aide (que nous allons créer par la suite).

onClick=”javascript:$(’#helpPaypal’).slideToggle(’slow’);”

Cet appel, utilise le framework Jquery (chargé par défaut dans Prestashop). Lorsque nous cliquerons sur l’option, il affichera avec un effet de transparence, l’aide.
Le #helpPaypal est un identifiant pour la partie aide, vous pouvez le modifier, mais pensez à le noter.

Les parties contenant le code type : “{l s=’texte’}” sont les textes qui seront affichés par le module. Vous pourrez par la suite les traduire dans l’interface d’administration de Prestashop.

Création de l’aide

Nous allons maintenant créer la partie permettant d’afficher l’aide à l’utilisateur.
Juste avant la balise “form” et juste après la seconde option, créez un div, dans lequel vous mettrez l’identifiant précédemment rentré dans l’appel Javascript.

<div id=”helpPaypal” >
</div>

Pour rendre le div, plus attrayant, nous lui appliquons un style, avec une bordure en “petits points”.

Important : Il faut penser à lui appliquer un style pour que l’aide ne s’affiche pas en permanence.

<div id=”helpPaypal” style=”display:none;border:1px dotted”>
</div>

A l’intérieur du div nous allons ajouter deux boutons, un en haut et un en bas, permettant de passer au paiement (important!).

<input type=”submit” onClick=”javascript:$(’#paypal_form’).submit();” class=”button” style=”margin:10px 400px;” value=”{l s=’Checkout’ mod=’paypal’}” />

C’est l’attribut onClick qui permet de faire cela avec la valeur “javascript:$(’#paypal_form’).submit();”

Enfin à l’intérieur du div il ne manque plus qu’à ajouter les images expliquant la procédure ainsi que le texte. Il est important d’expliquer au client, qu’il peut tomber sur une page ne permettant pas de payer par carte bleue et qu’il faut cliquer sur le lien “continuer” en bas à gauche de la page.

Pour cela vous pouvez utiliser les balises <img src=”" alt=”" /> et pour le texte <p>{l s=” mod=’paypal’}</p>.

Traduction des textes du modules

Vous avez ajouté les différentes phrases nécessaires à l’aide et à la nouvelle option. Il ne vous reste plus qu’à les traduire pour que votre module soit disponible en français et dans toutes les autres langues.
Pour cela rendez-vous dans l’administration de Prestashop, puis dans “Outils>Traductions”.
Dans le premier champ, choisissez “modules” puis cliquez sur le drapeau français.


Prestashop traduction module

Il ne vous reste plus qu’à trouver le module Paypal et à effectuer les traductions.

Conclusion

Désormais, lorsque vous procédez à un achat, vous devriez obtenir une nouvelle option. Lorsque vous cliquerez une première fois sur celle-ci, une aide devrait s’afficher avec deux boutons permettant de passer au paiement.
Cette modification vous permettra de ne pas perdre les clients n’ayant pas de comptes Paypal, et vous permettra de vous passer d’un module de carte bancaire, au moins dans un premier temps.

Conscient que les démarches que nous avons décris ne sont pas toujours simples, le module modifié et traduit est disponible sur notre boutique au prix de 10€ tout compris.

    Articles sur le même sujet :

  1. Prestashop : Configurer et installer le module PayPal N'hésitez pas à vous inscrire au flux RSS pour ne rater aucun article.Même si aujourd’hui, la majorité des consommateurs sur le net utilisent la carte bleue, une partie des clients sont craintifs quand à  la saisie des données bancaires, surtout...
  2. Podcast équipe Magento, Installer un e-commerce sans difficultés, Google Verify : améliorer le référencement de Prestashop N'hésitez pas à vous inscrire au flux RSS pour ne rater aucun article.Interview de l’équipe de Magento Un podcast intéressant nous provient de l’équipe du blog de Metycea. Ils ont pu rencontrer Yoram Elalouf et Yoav Kutner de Magento. Vous...

26 commentaires pourquoi ne pas laisser le vôtre ?

Paypal ne permet pas de “sauter” ces étapes. C’est aussi une façon pour eux de conserver leur modèle économique.

Tous les internautes ne comprennent pas “déjà rien”. Il faut arrêter les stéréotypes. Si l’internaute se trouve sur votre site, et se trouve à la page de paiement, c’est qu’il comprend déjà pas mal de chose.

Enfin, rassurer un acheteur, n’est pas forcément une perte de temps, surtout quand le procédé de paiement par carte bancaire diffère de celui commun. Car même si vous tombez sur la page de paiement CB de paypal directement, l’interface n’est pas la même que la plupart des interfaces de paiements (paybox, atos, autre).

Magavenue le 7 janvier 2010 à 18 h 56 min

Bonjour,
Je pensais que le module proposait SYSTEMATIQUEMET la bonne page PAYPAL avec la possibilité de mettre son numéro de carte bancaire etc… lorsque le client demandait à payer par carte bancaire. C’est ça qui aurait été utile.
Le problème en particulier est pour les familles qui n’ont qu’un seul ordinateur. Les enfant connaissent PAYPAL et ont un compte dont les cookies sont présents sur le disque. Les parents eux ne connaissent pas et en ont la trouille. Il faut leur ZAPPER les pages PAYPAL et arriver directement sur la page présentée en jpg…
J’imagine que l’explication doit dissuader ceux qui n’y comprennent déjà rien et ont donc peur de payer sur internet. Je pense effectivement que le taux de transformation doit baisser comme l’ont constaté certains…
Je souhaite trouver un module qui me permette de n’utiliser que PAYPAL mais qui le rende transparent pour les personnes qui veulent payer par carte bancaire. Ce n’est malheureusement pas le cas de ce module.
Si certains connaissent un tel module, je suis prenneuse. Merci.

Valoo83 le 7 janvier 2010 à 18 h 49 min

@Florent, oui cela fonctionne avec la dernière version.
@Thomas, pour tirer de telles conclusions, il faudrait je pense, plus de détails. Sur quelle période avez vous constaté la baisse du taux de transformation etc etc. Une telle baisse peut avoir de très nombreux facteurs.

Surtout que normalement, sans le module, vous ne proposez que Paypal. Avec le module, vous proposez un modèle de paiement en plus. Je doute donc que les gens souhaitant payer par Paypal, soient déroutés par ce module.

@caso : vous pouvez toujours le faire vous-même, en assemblant les différentes images.

Magavenue le 27 décembre 2009 à 17 h 14 min

Bonjour,

je cherche à recuperer le logo paypal CB (CB, carte aurore,etc,etc).
Quelqu’un peut il m’aider ?

Precisions: je cherche à changer le logo paypal bleu qui mene à la page de paiement paypal.

Merci

caso le 21 décembre 2009 à 15 h 03 min

cela fonctionne techniquement.
par contre, personnellement et paradoxalement, mon taux de transformation a baissé.

l’idée d’expliquer le fonctionnement est bonne, maintenant, je pense qu’ilvaut mieux mettre une petite phrasse juste au dessus du logo paypal et un lien “en savoir plus”, plutot que ce modèle qui est un peu déceptif pour l’internaute.

thomas le 17 décembre 2009 à 10 h 36 min

Ecrire un commentaire