- 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 dans le back-office PrestaShop
I - Comment installer Oney sur PrestaShop 1.6 ?
- Le paiement fractionné garanti est intégré nativement dans le module PayPlug. Il n’est donc pas nécessaire d’utiliser un module supplémentaire.
- Nous vous recommandons d'utiliser le module 3.2 minimum. Cette version permet d’encaisser des paiements simples et des paiements fractionnés garantis avec Oney.
- Vous avez la possibilité d'activer uniquement paiements fractionnés garantis si vous le souhaitez.
- 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 fractionné garantis avec Oney" sur "Oui".
- Choisissez si vous souhaitez Oney avec frais ou sans frais. (Plus d'informations)
2) Les étapes clés de la configuration
Afin de 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. Il s'agit de "CONDITIONS GENERALES DE VENTE ONEY x PAYPLUG".
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.
a) Oney sans frais
b) Oney avec frais
Comme vous pouvez le voir ci-dessus, 2 choix sont proposés :
- Payer en 3x par carte bancaire avec Oney
- Payer en 4x par carte bancaire avec Oney
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.
Présentation du mode avancé en bout de panier
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 dans le back-office PrestaShop
Fonctionnement des statuts depuis la version 3
- En cas de paiement accepté immédiatement par Oney, le statut passe directement sur "Paiement accepté".
- En cas de paiement accepté suite à une étude du dossier par Oney, le statut est 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 à une étude du dossier par Oney, le statut est sur "Oney - En attente [PayPlug]" le temps de l'étude puis passe sur "Annulé".
- En cas d'abandon de page ou de clic sur "annuler", la commande n'est pas créée et n’apparaît donc pas dans le BO.
- En cas de timeout (le payeur reste plus d'une heure sur la page sans rien faire), la commande n'est pas créée et n’apparaît donc pas dans le BO.
Schéma simplifié du fonctionnement des statuts à partir de la version 3.x (également disponible en pièce jointe à cet article)
