PrestaShop Smart One Page Checkout Addon -Manuel de l'utilisateur

1.0 Présentation

Rendez maintenant le processus global de paiement plus facile et plus rapide en implémentant le paiement sur une page. Offres Knowband Module complémentaire de vérification de page intelligente Prestashop qui remplace le processus de paiement par défaut par un paiement anticipé d'une page. Le marchand en ligne peut rendre le processus global facile et pratique pour les utilisateurs en ligne

Les acheteurs en ligne peuvent afficher une fenêtre contextuelle de paiement d'une page en même temps lorsqu'ils cliquent sur le bouton "Ajouter au panier". L'addon de paiement simplifié Prestashop rend le processus de paiement très simple et efficace pour les utilisateurs en ligne. Il n'est pas nécessaire de suivre le long processus de paiement lors de vos achats en ligne. L'administrateur du magasin peut activer le mode de test avant de l'implémenter. L'administrateur peut définir l'apparence des boutons de paiement. En simplifiant le processus de paiement, le marchand en ligne peut augmenter ses ventes et ses bénéfices.

1.1 Fonctionnalités offertes par l'addon PrestaShop Smart One Page Checkout

  • Les utilisateurs en ligne peuvent afficher la fenêtre de paiement en même temps lorsqu'ils cliquent sur le bouton "Ajouter au panier" sur la page du produit. Ce module propose un popup basé sur AJAX.
  • Le marchand en ligne peut permettre aux clients et aux clients enregistrés de commander facilement.
  • L'administrateur peut activer le mode test et le vérifier avant de l'implémenter.
  • L'administrateur peut ajouter des adresses IP spécifiques s'il ne souhaite pas proposer le paiement intelligent d'une page à tous les clients.
  • L'addon Prestashop Smart One Page Checkout permet au marchand en ligne de définir l'apparence du bouton de paiement. L'administrateur peut facilement prévisualiser la couleur du bouton à partir de l'interface d'administration. Le marchand en ligne peut également saisir des codes CSS et JS personnalisés.
  • L'administrateur peut proposer une connexion Facebook et une option de connexion Google sur la page de paiement. Depuis l'interface d'administration, l'administrateur peut obtenir les étapes de configuration de l'application Google et de l'application Facebook.
  • L'administrateur peut configurer les sites d'intégrateur de messagerie Klaviyo, MailChimp et Sendinblue et enregistrer les détails de l'identifiant de messagerie des abonnés.
  • Cet addon de paiement rapide Prestashop offre une fonctionnalité de remplissage automatique des adresses.
  • L'administrateur peut facilement sélectionner parmi les méthodes de paiement et les modes de livraison disponibles à partir de l'interface d'administration de ce paiement avancé Prestashop One Page.
  • L'administrateur peut également masquer les méthodes de paiement des méthodes d'expédition.
  • L'administrateur peut également vérifier le consentement du client en saisissant l'identifiant e-mail / le numéro de référence de la commande.
  • L'addon Prestashop Smart One Page Checkout offre la conformité au RGPD.
  • L'addon Prestashop Smart One Page Checkout est compatible multilingue, compatible avec plusieurs magasins et offre un fonctionnement fluide.

Installation de 2.0

Tout d'abord, achetez l'addon Prestashop Smart One Page Checkout et téléchargez le fichier zip à partir de la section Téléchargements de votre compte Knowband.

Vous obtiendrez smartonepagecheckout.zip (code source du module) et le manuel d'utilisation après avoir téléchargé le fichier zip. Pour installer le module dans le magasin, suivez les étapes ci-dessous: 1) Décompressez le fichier smartonepagecheckout.zip. 2) Copiez l'intégralité du contenu, c'est-à-dire les fichiers et dossiers du dossier décompressé. Collez-le dans le dossier "Modules" du répertoire de votre boutique. Suivez le chemin d'adresse mentionné ci-dessous

Paramètres administrateur 3.0

L'administrateur de la boutique en ligne peut facilement appliquer les paramètres de l'interface d'administration et implémenter la fonctionnalité de paiement intelligent d'une page. Ce sont les options de configuration comme indiqué ci-dessous:

  • Paramètres généraux
  • Customizer
  • Mon compte
  • Email Marketing
  • Adresses
  • Mode de paiement
  • Moyen de livraison
  • Ship2pay
  • Les champs personnalisés
  • panier
  • consentement du client
  • Paramètres GDPR

Paramètres généraux 3.1

Dans les paramètres généraux, le marchand en ligne peut appliquer ces paramètres comme décrit ci-dessous:

Module complémentaire de vérification de page intelligente Prestashop

  • Activer désactiver:?Activate or deactivate the module functionality.
  • Activer le paiement des invités:Activez l'option de paiement en tant qu'invité en basculant le bouton.
  • Enregistrer un invité: Autoriser l'option d'enregistrement des invités.
  • Adresse de livraison du panier virtuel:Activez cette option pour afficher l'adresse de livraison. Tout en désactivant cette option, il affichera l'adresse de facturation et masquera l'adresse de livraison des produits virtuels.
  • Option de livraison à la caisse:?Admin can select guests or register as a default option at the checkout page.
  • Mode de test:Activez l'option si vous souhaitez tester le module avant sa mise en œuvre.
  • Ajouter une adresse IP:?Enter the IP addresses if you want to show smart one-page checkout on specific IP addresses. Separate every IP address with a comma.

NE PAS personnaliser

Dans les paramètres du personnalisateur, l'administrateur peut définir l'apparence du bouton de paiement intelligent d'une page et également appliquer des paramètres d'apparence avancés comme indiqué ci-dessous:

Module complémentaire de vérification de page intelligente Prestashop

  • Couleur d'arrière-plan du bouton:Définissez la couleur d'arrière-plan du bouton.
  • Couleur de la bordure du bouton:Définissez la couleur de la bordure du bouton à partir de l'interface d'administration.
  • Couleur du texte du bouton:?Set the button text color from here.
  • Couleur inférieure de la bordure du bouton:Définissez la couleur du bord inférieur du bouton à partir d'ici.
  • Nom du produit Couleur:Ici, définissez la couleur du nom du produit.
  • CSS personnalisé:Entrez un code CSS personnalisé pour les paramètres avancés d’aspect et de convivialité.
  • JS personnalisé:?Enter JS codes for more appearance settings.

Connexion 3.3

Dans les paramètres de connexion, l'administrateur peut offrir des options de connexion aux utilisateurs en ligne comme Facebook et Google:

Module complémentaire de vérification de page intelligente Prestashop

  • Afficher le popup: Si ce paramètre est activé, Facebook ou la page de connexion Google sera ouverte dans une fenêtre contextuelle après avoir cliqué sur les options de connexion.
  • Activer la connexion Facebook:?Enable this option for showing the Facebook login button.
  • Identifiant de l'application Facebook:?Admin can check the configure steps for Facebook app ID generation and enter the Facebook app id here. Visit 3.3.1 Section pour obtenir les étapes pour générer l'identifiant de l'application Facebook et le secret de l'application.
  • Facebook App Secret:?Here, Enter Facebook App Secret.
  • Activer la connexion à Google:?Activate if you want to show Google login option on the checkout page.
  • Identifiant client Google:?Admin can check the steps to configure Google App and enter Google client Id here.
  • Google App Secret:Saisissez le secret de l'application Google ici. Visite 3.3.2 Section pour obtenir les étapes de génération de l'ID d'application Google et de l'ID client.

3.3.1 Comment configurer la connexion à Facebook

Pour générer l'identifiant de l'application Facebook et le secret de l'application, procédez comme suit: –

Étape 1 : Cliquez sur cette URL: https://developers.facebook.com/apps/

Étape 2 : Clique sur le "Ajouter une nouvelle application" bouton.

Étape 3 & 4: Saisissez le nom et l'identifiant de votre application, puis cliquez sur le bouton "Créer un identifiant d'application" bouton.

Identifiant et secret de l'application Facebook

Après avoir terminé le contrôle de sécurité, vous pouvez créer avec succès l'ID d'application.

Étape 5 : Cliquez maintenant sur le "
Disposition
"et sélectionnez l'option de configuration de la connexion Facebook.

Identifiant et secret de l'application Facebook

Après cela, cliquez sur les paramètres sous l'option de connexion Facebook.

Identifiant et secret de l'application Facebook

Dans le menu du tableau de bord “URL de redirection OAuth valide", saisissez l'URL ci-dessous:

Identifiant et secret de l'application Facebook
https://psm.knowband.com/smartonepagecheckout/17/index.php?fc=module&module=kbstepcheckout&controller=kbstepcheckout&login_type=fb

Save these changes.

Étape 6 : Maintenant, dans la section des paramètres, il y aura deux options disponibles dans la liste déroulante, de base et avancée. Vous devez cliquer sur "Base"paramètres et cliquez sur"+ Ajouter une plateforme" bouton.

Identifiant et secret de l'application Facebook

Étape 7 : Sélectionnez maintenant le site Web comme plate-forme.

Identifiant et secret de l'application Facebook

Étape 8,9,10 : Dans les paramètres de base, entrez les détails suivants: À l'étape 8, entrez App Domain: psm.knowband.com

Identifiant et secret de l'application Facebook

Pour l'étape 9, utilisez l'URL du site: https://psm.knowband.com/smartonepagecheckout/17/ Après cela, enregistrez les modifications.

Étape 11 et 12: Accédez au tableau de bord et activez l'option pour rendre l'application publique:

Identifiant et secret de l'application Facebook

Étape 13,14 : Sélectionnez la catégorie et cliquez sur le bouton Confirmer.

Identifiant et secret de l'application Facebook

Étape 15,16 : Copiez l'ID d'application et le secret d'application à partir d'ici:

Identifiant et secret de l'application Facebook

Étape 17, 18: Saisissez l'identifiant de l'application et le secret de l'application dans les champs fournis dans le module.

Identifiant et secret de l'application Facebook

3.3.2 Comment configurer Google Login

Suivez les étapes ci-dessous pour obtenir un identifiant client et un secret client.

Étape 1 : Allez sur le lien " https://console.developers.google.com/project “.

Étape 2 : Clique sur le "Créer un projet"option.

picture13

Étape 3 : Sélectionnez le pays et vérifiez que vous acceptez les termes et conditions. Après cela, cliquez sur le bouton Continuer.

picture14

Étape 4, 5: Saisissez le nom de votre projet et cliquez sur le "Créer"option.

picture15

Étape 6,7 et 8: Accédez à API Manager, cliquez sur Créer des informations d'identification et sélectionnez l'option ID client OAuth.

picture16

Étape 9 : Clique sur le "Configurer l'écran de consentement" bouton.

picture17

Étape 10, 11: Entrer "Id. De courrier électronique","Nom du produit"puis cliquez sur"Confirmer" bouton.

picture18

Étape 12,13 et 14,15: Sélectionnez "application Web", Entrer "VOTRE NOM “”URI redirigés autorisés"comme mentionné ci-dessous et cliquez sur"Créer" Bouton.

picture19

Utilisez les origines javascript autorisées: https://psm.knowband.com/smartonepagecheckout/17/ Utilisez l'URL de redirection autorisée: https://psm.knowband.com/smartonepagecheckout/17/index.php?fc=module&module=kbstepcheckout&controller=kbstepcheckout&log Google

Étape 16, 17, 18: Copiez l'ID client et le secret client.

picture20

Étape 18, 19: Collez l'ID client et le secret client dans le champ de texte ci-dessous:

picture21

Marketing par courriel 3.4

Le marchand en ligne peut configurer les sites d'intégrateur de messagerie Klaviyo, MailChimp et Sendinblue et enregistrer les détails de l'identifiant de messagerie des abonnés. L'administrateur du magasin peut enregistrer facilement les détails de l'identifiant de messagerie de l'utilisateur.

Module complémentaire de vérification de page intelligente Prestashop

  • Activer MailChimp:Activez cette option pour enregistrer les détails de l'identifiant de messagerie dans MailChimp.
  • Clé API MailChimp: Saisissez la clé API ici.
  • Liste MailChimp:?Choose the list in which you want to save the email id details.
  • Activez SendinBlue:Le marchand en ligne peut également configurer Sendinblue.
  • Clé API SendinBlue:Saisissez la clé API SendinBlue ici.
  • Liste SendinBlue:?Select the list from available options.
  • Activer Klaviyo:Activez l'option Klaviyo pour enregistrer l'identifiant de l'e-mail.
  • Clé API Klaviyo:Le marchand en ligne peut saisir la clé API Klaviyo ici.
  • Liste de Klaviyo:?Select the list from here.

3.5 Adresses

Dans les paramètres d'adresse, l'administrateur peut configurer les options de remplissage d'adresse automatique comme indiqué ci-dessous:

Module complémentaire de vérification de page intelligente Prestashop

  • Validations en ligne:?Admin can activate or deactivate inline validators.
  • Activer la détection automatique du pays:?Activate country auto-detect functionality.
  • Activer le remplissage d'adresse automatique de Google:Activez cette fonction pour adresser automatiquement la fonctionnalité de remplissage.
  • Clé API Google:L'administrateur peut vérifier les étapes pour configurer la clé API Google et l'entrer ici.

L'administrateur peut également afficher les détails des champs des clients invités et enregistrés:

Les points importants:

  • Pour faire afficher / masquer un champ dans la page de paiement d'une page de Prestashop Smart, cochez la case juste à gauche de Afficher l'étiquette.
  • Pour rendre obligatoire un champ de ce module complémentaire de paiement intelligent Prestashop Prestashop (champ obligatoire), cochez la case située juste à gauche de l'étiquette requise.
  • Les champs de l'extension Prestashop Smart One Page Checkout peuvent également être réorganisés en fonction des besoins. Pour réorganiser, maintenez simplement Glisser pour trier et faites glisser et déposez le champ verticalement, partout où cela est nécessaire.
  • Lors de la sauvegarde, les champs seront réorganisés en fonction des modifications.

Extension Prestashop Quick Checkout

3.6 Méthode de paiement

Dans la section mode de paiement, l'administrateur peut définir les conditions liées au mode de paiement comme indiqué ci-dessous:

Extension Prestashop Quick Checkout

  • Méthodes d'affichage: Pour activer / désactiver les méthodes de paiement sur la page de paiement intelligent, basculez le bouton de ON à OFF ou vice-versa. Cela désactivera le blocage du mode de paiement sur la page de paiement. Par défaut, cette option du
  • Le module complémentaire de paiement intelligent Prestashop sera activé.
  • Style d'affichage: Il y a 3 options dans ce champ de l'addon Prestashop Smart One Step Checkout pour afficher comment vos méthodes de paiement seront affichées sur la page de paiement.
  • Méthode par défaut sélectionnée: Choisissez le mode de paiement par défaut dans la liste qui sera affichée telle que sélectionnée à l'époque, lorsque le client viendra sur la page de paiement.

L'administrateur peut modifier le logo et le titre des méthodes de paiement disponibles.

Méthode de livraison 3.7

Dans cette section du module complémentaire de paiement rapide Prestashop, l'administrateur peut appliquer les paramètres liés aux méthodes de livraison:

Extension Prestashop Quick Checkout

  • Méthodes d'affichage: Pour activer / désactiver les méthodes de livraison sur la page de paiement, basculez le bouton de ON à OFF ou vice-versa. Cela désactivera le bloc de méthode de livraison de la page de paiement. Par défaut, cela sera activé.
  • Style d'affichage:Il y a 3 options dans ce champ de l'addon de paiement rapide Prestashop pour afficher comment vos méthodes de livraison seront affichées sur la page de paiement.
  • Méthode par défaut sélectionnée: Choisissez la méthode de livraison par défaut dans la liste disponible qui sera affichée telle que sélectionnée à l'époque, lorsque le client viendra sur la page de paiement.

L'administrateur peut modifier le logo et le titre des méthodes de paiement disponibles.

3.8 Ship2pay

À partir de là, l'administrateur peut masquer les méthodes de paiement pour toutes les méthodes d'expédition disponibles. L'administrateur n'a qu'à cliquer sur le mode de paiement pour l'afficher ou le masquer.

Extension Prestashop Quick Checkout

Champs personnalisés 3.9

L'administrateur peut également créer des champs personnalisés selon les exigences. Dans la section Champs personnalisés, l'administrateur peut afficher la liste de tous les champs personnalisés créés. L'administrateur peut facilement modifier, supprimer et créer de nouveaux champs personnalisés.

Module de paiement rapide PrestashopComment créer de nouveaux champs personnalisés:

Pour ajouter un nouveau champ personnalisé, l'administrateur doit cliquer sur le bouton "+" et entrer ces détails comme indiqué ci-dessous:

Module de paiement rapide Prestashop

  • Étiquette de champ:Saisissez le libellé du nouveau champ personnalisé.
  • Texte d'aide:Saisissez le texte d'aide pour ce nouveau champ personnalisé.
  • Type:Sélectionnez le type de champ de saisie personnalisé comme la zone de texte, la zone de sélection, la zone de texte, le bouton radio, les cases à cocher et la date.
  • Position:Sélectionnez la position où vous souhaitez afficher ce champ personnalisé.
  • Valeur par défaut:?For select box, radio or checkboxes admin needs to set value. By default, this value will be n.
  • Type de validation:Définissez le type de validation parmi les options disponibles telles que int, URL, nom, e-mail et date.
  • Obligatoire:?Make this field as a required field.
  • Actif:Activez le champ en activant cette option.

L'administrateur peut cliquer sur le bouton bin pour supprimer les champs personnalisés et cliquer sur le bouton modifier pour modifier les paramètres des champs personnalisés.

3.10 Cart

L'administrateur peut activer l'option "Afficher le panier" pour afficher le panier. L'administrateur peut sélectionner les champs qu'il souhaite afficher à l'invité et aux clients connectés.

Module de paiement rapide Prestashop

3.11 Consentement du client

Saisissez le numéro de référence de la commande ou l'identifiant de messagerie du client dans la section de filtrage du consentement du client.

Module de paiement rapide Prestashop

Paramètres 3.12 GDPR

Activation de la suppression des services de marketing par e-mail sur demande: activez ou désactivez les paramètres conformément aux exigences. En activant cette option, l'administrateur peut supprimer les détails du client des services de marketing par e-mail à sa demande.

Module de paiement rapide PrestashopL'administrateur peut afficher une liste de politiques et également ajouter de nouvelles politiques GDPR, supprimer et modifier toute politique.

GDPR

  • Label de politique de confidentialité:?Admin can set the label for privacy policy in different languages.
  • URL de la page pour lier l'étiquette:?Admin can select the page to link the label.
  • Obligatoire:Rendre cette politique obligatoire.
  • Actif:?Enable the option for activating this privacy policy.

Interface frontale 4.0

Après une configuration réussie, l'administrateur peut offrir une option de paiement simple et sans tracas. Les utilisateurs en ligne obtiendront une fenêtre de paiement intelligente d'une page dès qu'ils cliquent sur "Ajouter au panier". Veuillez vérifier la capture d'écran ci-dessous pour plus de détails:

Module de paiement rapide Prestashop

Après cela, les utilisateurs en ligne doivent cliquer sur "procéder au paiement" pour poursuivre le processus.

Module de paiement rapide Prestashop

Ici, les utilisateurs en ligne doivent sélectionner une adresse de livraison ou ajouter une nouvelle adresse.

Module de paiement rapide Prestashop

Après cela, les utilisateurs en ligne peuvent sélectionner le mode d'expédition et le mode de paiement. Après cela, ils peuvent confirmer facilement la commande.

Prestashop One Page Advanced Checkout

Les utilisateurs en ligne peuvent facilement consulter le résumé de la commande à partir de cette page.



Joe Parker

We boast of the best in the industry plugins for eCommerce systems and has years of experience working with eCommerce websites. We provide best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify . We also provide custom module development and customization services for the website and modules..

Leave a Reply

Your email address will not be published. Required fields are marked *