- I - Comment installer Oney sur PrestaShop 1.6 ?
- II - Comment configurer Oney ?
- III - Présentation d'Oney sur votre boutique
- IV - Guide d’intégration technique
- V - Configuration avancée Oney
- VI - Présentation des statuts de commande
I - Comment installer Oney sur PrestaShop 1.6 ?
Oney est intégré nativement dans le module PayPlug. Il n’est donc pas nécessaire d’utiliser un module supplémentaire.
Afin de bénéficier de cette fonctionnalité, vous devez utiliser la version 2.26 du module PayPlug au minimum.
Le module permettra d’encaisser des paiements simples et des paiements Oney. Ces 2 options ne sont pas dissociables.
Un guide d’installation du module PayPlug pour PrestaShop 1.6 est disponible dans l’article suivant.
Pour plus d’informations sur les possibilités offertes par Oney chez PayPlug, vous pouvez consulter l’article suivant.
Vous pouvez également consulter le support de formation disponible en pièce jointe à cet article.
II - Comment configurer Oney ?
1) Présentation
Afin de configurer Oney, vous devez suivre les étapes suivantes :
- Rendez vous sur la page de configuration du module PayPlug depuis le menu "Modules & Services" de votre back-office PrestaShop.
- Le module doit être connecté à votre compte PayPlug.
- Rendez vous dans la section "Paramètres avancés".
- Passez le champ "Activer les Paiements Oney" sur "Oui".
2) Les étapes clés de la configuration
a) Les CGV
Pour pouvoir proposer Oney avec PayPlug, vous devez remplir les 2 conditions suivantes :
- avoir accepté les CGVs "Oney x PayPlug".
- avoir intégré les CGVs Oney à votre site.
Vous trouverez en pièce jointe à cet article les documents relatifs à ces CGVs.
b) Les transporteurs
Les transporteurs que vous avez créés depuis le menu "Livraison" puis "Livraison à domicile" s’affichent par défaut dans la section Oney.
Pour chacun d’eux, vous devez sélectionner le type de livraison proposé :
- Retrait en magasin.
- Retrait en point relais.
- Livraison à domicile.
- Livraison électronique
A savoir : Seuls les modes “Livraison à domicile”’ et “Livraison électronique” sont compatibles avec l’utilisation d’Oney. Vous ne pourrez donc pas livrer en magasin ou en point relais lorsque vos clients vous règlent via Oney.
III - Présentation d’Oney sur votre boutique
1) Page produit
- Le logo Oney est présent sur chaque produit proposé sur votre boutique.
- Afin de pouvoir bénéficier d’Oney, le montant total des produits sélectionnés doit être au minimum de 100€.
- Lorsque ce montant n’est pas respecté, le logo Oney est grisé.
Lorsque ce montant est atteint, le logo Oney s’affiche en vert.
Lorsque le logo est grisé, un clic sur le logo Oney affiche le message suivant : “Le montant total de votre commande doit être compris entre 100,00 € et 3 000,00 € pour payer avec Oney.”
Lorsque le logo est au vert, une fenêtre récapitulative s’affiche selon le choix du paiement en 3 ou 4 fois. Sont notamment disponibles :
- Le premier apport.
- Un récapitulatif des mensualités.
- Le montant total.
- Le coût du financement.
- Un résumé des conditions de financement.
Cette popup s’affiche à titre informatif et ne permet pas d’accéder au paiement.
2) Page panier
Une fois le produit mis en panier, la fenêtre récapitulative est également disponible.
3) Page Checkout
Une fois rendu en bout de panier, les options de paiement Oney sont disponibles.
Lorsque les prérequis ne sont pas remplis par le payeur, le bouton est grisé.
Après avoir cliqué sur “Payer en 3x ou 4x par carte bancaire”, votre client se voit proposer 2 choix de paiement : “Paiement en 3x” et “Paiement en 4x”.
Chaque champ affiche les informations suivantes :
- Montant de la commande.
- Premier apport.
- Mensualités suivantes.
- Montant total de la commande incluant le coût du financement.
4) La page de paiement Oney
Après avoir choisi l’option en 3 ou 4 fois, votre client est dirigé vers une page de paiement gérée par Oney. L’url est du type https://www.e-payments.oney.com/payments/v1/facilypay/
Votre client a la possibilité de se connecter à son compte Oney s’il en possède un.
Dans le cas contraire, il doit renseigner ses informations de civilité, résidence, date et lieu de naissance.
Ensuite, votre client doit renseigner des informations de cartes, puis valider les CGVs Oney.
IV - Guide d’intégration technique
Ce guide d'intégration est uniquement destiné aux agences et aux développeurs.
1) Page produit
a) Le logo Oney n’est pas visible
Contexte
Si vous ne voyez pas le logo Oney à côté du prix de l’article, il peut s’agir d’un problème de configuration spécifique à PrestaShop qu’on appelle les Hooks.
Pour toutes informations concernant les Hooks de PrestaShop, veuillez accéder à la documentation officielle de PrestaShop :
https://devdocs.prestashop.com/1.7/modules/concepts/hooks/
Solution
Dans un premier temps, il faut vérifier si votre thème actuel n’a pas supprimé le hook utilisé par le module PayPlug, pour cela il faut inspecter le template représentant la page produit (la plupart du temps dans le fichier /themes/nom_de_mon_thème/product.tpl) et chercher la ligne ci-dessous ou dans le cas contraire l’ajouter dans votre fichier à l’endroit ou vous voulez placer le logo Oney.
{hook h="displayProductPriceBlock" product=$product type="price"}
Si la ligne est déjà présente, il faut alors vérifier dans la configuration du back office PrestaShop que le module PayPlug est bien greffé au hook “displayProductPriceBlock” en suivant ce tutoriel :
Si vous ne visualisez pas le Module “PayPlug” comme indiqué sur le tutoriel précédent, il faut le greffer manuellement en suivant ce second tutoriel :
b) Le logo Oney reste désactivé
Contexte
Lorsque votre boutique est maintenue par un thème spécifique, il est possible que certaines méthodes javascript ne soient pas prises en compte. Cela peut impacter notre workflow, notamment lors de l’activation du logo Oney lorsque le prix d’un produit dépasse les 100 euros.
Solution
Vérifier dans votre fichier produit (/themes/nom_du_theme/js/product.js) que l'événement javascript change est bien effectué sur les composants suivants product_quantity_up et product_quantity_down.
Si l'événement n’est pas lancé, il faut alors ajouter les lignes suivantes :
$(document).on(‘click’, ‘.product_quantitiy_up’, function(e) {
…
// A la fin de la fonction
$(‘#quantity_wanted’).trigger(‘change’);
})
$(document).on(‘click’, ‘.product_quantitiy_down’, function(e) {
…
// A la fin de la fonction
$(‘#quantity_wanted’).trigger(‘change’);
})
c) La pop-up de l’échéancier est coupée
Contexte
Dans certains cas, il est possible que certains éléments se retrouvent “au dessus” de la pop-up et coupent les informations de celle-ci.
Solution
Veuillez modifier votre css afin de diminuer le z-index des composants qui cachent la pop up ou alors utiliser la propriété d’overflow afin que l’échéancier puisse apparaître en entier.
Afin de rendre compatible cette pop-up avec votre thème, vous pouvez surcharger le css en le dupliquant ici themes > default-bootstrap > payplug > front_1_6.css et en modifiant les propriétés css de la classe OneyPopin.
d) L’échéancier ne s’affiche pas correctement
Contexte
Si votre échéancier est affiché en brut directement sur la page et non dans une pop-up, cela indique que le script javascript de notre module ne s’est pas chargé correctement.
Exemple d’affichage:
Il est possible que d’autres problèmes d’affichage apparaissent notamment du fait que votre boutique surcharge les fichiers PayPlug.
Solution
Si, par exemple, les fichiers front.css, front.js ont été surchargés il faudra désactiver cette surcharge afin de visualiser correctement l’affichage Oney. Vous pouvez par la suite reprendre la surcharge avec la nouvelle version de ces fichiers que vous pouvez récupérer dans notre module.
Conseil : Utilisez la commande diff pour voir la différence entre le fichier et votre fichier surchargé.
Il est également possible qu'un simple vidage du cache du navigateur résolve le problème.
2) Page panier
a) Le logo Oney est mal placé
Contexte
Par défaut, le logo Oney devrait être placé juste en dessous du prix, si une surcharge css est présente dans votre thème, il est possible que le logo ne soit pas placé là ou vous le souhaitez.
Solution
Il faudra alors surcharger le fichier venant de notre module PayPlug afin que vous puissiez personnaliser la disposition du logo Oney.
Pour surcharger le fichier, veuillez dupliquer le fichier /modules/payplug/views/js/front.js dans les dossiers suivants themes > default-boostrap > modules > payplug > view > js
Vous pouvez dorénavant modifier le code dans ce nouveau fichier dupliqué en accédant à la méthode payplugModule.oney.setCheckout()
b) Le logo Oney n’est pas visible
Contexte
Exemple :
Afin d’afficher correctement ce visuel , le module PayPlug à besoin d’avoir une place déterminée pour se positionner correctement.
Dans le cas natif de PrestaShop sans thèmes et/ou sans module de one page checkout, votre panier ressemble à ceci :
Dans certains cas, votre panier peut avoir une structuration complètement différente.
Voici un exemple:
Comme le panier est divisé en deux, il est possible que le composant HTML sur lequel se reposait le Module PayPlug ait disparu.
Solution
Il faut alors vérifier dans votre HTML que l’id “total_price” existe toujours. Sinon veuillez l’insérer au niveau de la ligne qui contient le prix total de votre panier.
3) Page checkout
a) Le mode de paiement Oney ne s’affiche pas
Solution
Plusieurs solutions peuvent être apportées concernant cette problématique, veuillez essayer les différentes étapes dans l’ordre:
1/ Le cache a besoin d’être vidé : veuillez désactiver votre cache PrestaShop en suivant ce tutoriel :
2/ payment_1_6.tpl a été surchargé, vous devez désactiver votre surcharge afin que le nouveau template soit pris en compte. Vous pouvez utiliser la commande “diff” afin de visualiser la différence entre votre surcharge et le nouveau template.
3/ Vous êtes en multiboutique, vérifiez que la boutique sur laquelle vous avez ce problème applique bien la configuration PayPlug avec le mode de paiement Oney activé.
4/ Un module tiers empêche l’affichage de tous les modes de paiement PayPlug : veuillez vérifier que vous n’avez pas un module permettant de gérer l’affichage de vos moyens de paiement. Si vous en avez un, vérifiez que PayPlug est bien activé.
b) Le mode de paiement Oney ne s’affiche pas correctement
Contexte
Il est possible que les boutons PayPlug ne soient plus en adéquation avec votre thème.
Exemple :
Solution
payment_1_6.tpl a été surchargé précédemment, il faudra alors appliquer votre charte graphique au nouveau template.
V - Configuration avancée Oney
La configuration avancée est une option destinée aux agences et aux développeurs.
1) Présentation
Nous garantissons une intégration très simple pour ce mode avancé. Il vous suffira simplement d’activer le switch de la configuration avancée dans votre BO Prestashop et de valider vos modifications en bas de page.
Selon le design que vous avez souhaité apporter à votre site, l’intégration du mode avancé pourra être endommagée.
Les sites qui utilisent des modules externes de checkout, des thèmes ou des customisations particulières pourront se référer à la documentation suivante.
2) Guide d’intégration technique du mode avancé
a) Le mode de Paiement Oney ou l’échéancier ne s’affiche pas
Contexte
Lorsque vous utilisez un module de One Page Checkout, ou un thème qui modifie la structure de la page de checkout, il est possible que le mode optimisé ne soit pas compatible.
Exemple de thème qui est très différenciant du thème PrestaShop par défaut :
Solution
Nous vous conseillons de désactiver le mode optimisé et d’intégrer l’échéancier Oney directement sur votre template HTML afin qu’il s’adapte à votre charte graphique.
Voici l’HTML à ajouter :
<div class="oneyCta"></div>
Notre module PayPlug prendra la main afin de récupérer ce composant et de le remplir avec l’échéancier.
b) Le mode de Paiement Oney ou L’échéancier ne s’affiche pas correctement
Contexte
Il est important pour nous de pouvoir vous accompagner pour adapter notre solution de paiement à la structure de votre boutique. Dans un souci de simplicité, notre template par défaut vient du thème de base de PrestaShop:
Si votre page de checkout ne ressemble pas au layout de base, le mode optimisé risque de ne pas s’adapter correctement:
Exemple:
Solution
Nous vous conseillons de désactiver le mode optimisé et d’intégrer l’échéancier Oney directement sur votre template HTML afin qu’il s’adapte à votre charte graphique.
Voici l’HTML à ajouter:
<div class="oneyCta"></div>
Notre module PayPlug prendra la main afin de récupérer ce composant et de le remplir avec l’échéancier.
VI - Présentation des statuts de commande
Voici les différents statuts spécifiques au module PayPlug avec la version 2.26.1 du module pour PrestaShop.
1) Quels sont les différents statuts de commande utilisés par le module PayPlug
Paiement accepté
Oney a accepté le financement du payeur.
L’argent est disponible sur votre compte PayPlug et vous pouvez donc envoyer la commande sans crainte.
Annulé
Oney a refusé le paiement après une étude du dossier. PayPlug ne peut pas en connaître la raison.
Votre client est invité à repasser sa commande avec un autre moyen de paiement ou dans le cadre d’un paiement classique.
Oney - En attente [PayPlug]
Ce statut peut signifier deux choses :
a) Abandon de page
Le payeur a ouvert la page de paiement Oney et l’a quitté sans la valider.
Une commande est alors créée dans le BO PrestaShop avec le statut “Oney - en attente [PayPlug]” et passera automatiquement au statut “Annulé” au bout d’une heure.
b) Refus de dossier
Le payeur a correctement validé ses informations de carte sur la page de paiement Oney mais n’a pas reçu de réponse immédiate (Oui ou Non). C’est un agent Oney qui est en charge d’étudier cette demande. Le délai de réponse est de 48 heures maximum. Le statut reste sur “Oney - en attente [PayPlug]” le temps de l'étude.
Selon le retour de Oney cette commande passera à “paiement accepté” ou à “Annulé“.
Remboursé
Ce statut signifie que le commande a été entièrement remboursée.
Annulé
Ce statut signifie que vous avez manuellement annulé la commande.
2) Fonctionnement des différents statuts - Explication simplifiée
- En cas de paiement accepté immédiatement par Oney, le statut passe directement sur "Paiement accepté".
- En cas de paiement refusé immédiatement par Oney, la commande n'est pas créée dans le BO PrestaShop.
- En cas de paiement refusé suite à étude du dossier par Oney, le statut est sur "Oney - En attente" le temps de l'étude puis passe sur "Annulé".
- En cas d'abandon de page, le statut est sur "Oney - En attente" puis passe sur "Annulé".
Ce mode de fonctionnement est valide pour la version 2.26.1 du module. Il est amené à évoluer lors de prochaines versions du module.