Prestashop et Paypal : Inciter les paiements par carte bancaire sans compte Paypal

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 :

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 :

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

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).

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.

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.

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

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.

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...