Tag: Superpaiement d’une page OpenCart

OpenCart One Page Advanced Checkout Extension – Manuel de l’utilisateur

 

1.0 Présentation

1 utilisateur en ligne sur 10 est obligé d’abandonner son panier juste à cause de la procédure de paiement longue et compliquée. De plus, vous pouvez optimiser le paiement de votre site en un site intéressant en incorporant l’extension de paiement avancé OpenCart One Page de Knowband. En fait, le module contextuel de paiement réactif OpenCart transforme l’ensemble du processus de paiement en un seul popup basé sur ajax. De plus, ce qui se déclenche sur l’écran lorsque le client choisit d’acheter un produit dans le magasin. Ainsi, ce One Page Checkout pour OpenCart réduit l’abandon de panier en proposant l’intégralité du processus d’achat sur une seule fenêtre contextuelle, sans charger la page suivante.

1.1 Caractéristiques de One Page Checkout pour OpenCart

L’intégration de One Page Checkout pour la boutique OpenCart n’est pas un gros problème car elle offre une personnalisation simple sans impliquer de compétences techniques ni de modifications de code existantes. Ainsi, permettez rapidement à vos clients d’acheter le produit via une seule fenêtre contextuelle, ce qui leur permet de payer plus rapidement. De plus, une expérience moins d’interruption. Ainsi, vous trouverez ci-dessous les points forts de cette extension OpenCart One Page Checkout. 1. Le module OpenCart One Page Checkout affiche le total des champs de paiement sous la forme d’une fenêtre contextuelle de paiement réactive basée sur ajax sur le frontend. En outre, du site Web sans rediriger vers une autre URL. 2. Ce paiement en une page pour OpenCart offre un moyen transparent d’augmenter les abonnements à la newsletter pour les activités en ligne. 3. La fenêtre contextuelle de paiement réactif incorporée à l’aide du module de paiement simplifié OpenCart peut être facilement activée ou désactivée à l’aide du bouton bascule fourni au niveau du backend. 4. La fonction d’enregistrement des invités de la fenêtre contextuelle de paiement réactif OpenCart enregistre automatiquement le client sur le site. De plus, envoyez-leur le mot de passe de connexion sur leur e-mail. 5. Vous avez la possibilité d’activer ou de désactiver la fonctionnalité de paiement invité du module OpenCart One Page Checkout. 6. À l’aide de cette extension de paiement OpenCart Single Page, vous pouvez ajouter du code CSS à la page de paiement avancée. 7. Le module de paiement OpenCart Single Page offre une fonctionnalité de mode de test qui vous permet de tester la fonctionnalité avancée de la page de paiement sur une adresse IP spécifique. 8. Avec le module de paiement simplifié OpenCart, offrez aux clients les avantages des options de connexion sociale. Par exemple, Google et Facebook sur la page de paiement. 9. L’extension de paiement rapide OpenCart vous permet d’afficher/masquer différemment les champs d’adresse de paiement et d’expédition pour les clients connectés et invités du magasin. 10. Les marques de champ d’adresse personnalisées sont nécessaires ou facultatives à l’aide de ce module OpenCart One Page Supercheckout. 11. En utilisant One Page Checkout pour le site OpenCart, vous pouvez fournir plusieurs méthodes d’expédition et de paiement aux clients qui sont configurables à partir du backend. 12. Le module contextuel de paiement réactif OpenCart vous permet de définir une image de logo et un titre souhaités pour chacune des méthodes de paiement et d’expédition affichées sur la page de superpaiement. 13. La fonctionnalité ship2pay de l’extension de paiement rapide OpenCart sélectionne automatiquement le mode de paiement correspondant à chaque mode d’expédition sélectionné par le client. 14. L’extension contextuelle de paiement réactif OpenCart offre un panier configurable dont les champs peuvent être fixés selon les besoins de l’entreprise. 15. Le module OpenCart One Page Checkout est compatible avec plusieurs magasins et plusieurs langues. 16. L’extension de paiement rapide OpenCart offre une mise en page réactive mobile aux clients. 17. La fonctionnalité MailChimp Integrator d’OpenCart Single Page Checkout synchronise automatiquement les données du client avec le compte MailChimp connecté du vendeur.

1.2 Interface avant du module contextuel OpenCart Responsive Checkout

Lorsque l’utilisateur clique sur le bouton “Ajouter au panier” correspondant à un produit, il verra le curseur de paiement réactif suivant sur son écran.

Section récapitulative du panier d’OpenCart One Page Advanced Checkout

opencart-one-page-checkout-extension-cart-summary

De plus, lorsqu’ils cliquent sur le bouton “Commander”, ils peuvent visualiser et remplir le formulaire de paiement avancé complet en une seule fois, comme indiqué dans les images ci-dessous :

Section de connexion au compte

Si le client décoche la case “Expédier à la même adresse”, il verra la section de l’adresse de livraison comme indiqué ci-dessous :


Section Mode d’expédition et de paiement

Guide d’installation 2.0 de l’extension de paiement avancé OpenCart One Page

Avant de commencer le processus d’installation, vous devez acheter le module OpenCart One Page Checkout dans la boutique Knowband. De plus, une fois acheté, vous recevrez les fichiers suivants dans votre e-mail enregistré.

  • Code source de l’extension OpenCart One Page Advanced Checkout au format de fichier compressé.
  • Manuel d’utilisation de l’extension OpenCart One Page Checkout.

Maintenant, pour installer cette OpenCart Advanced Checkout sur votre boutique en ligne, suivez les étapes indiquées : 1. Décompressez le fichier zip. Vous obtiendrez les dossiers comme indiqué dans l’image ci-dessous


2. Copiez tous les dossiers du fichier zip dans le répertoire racine de la configuration d’OpenCart via le gestionnaire FTP. Ainsi, OpenCart One Page Advanced Checkout est maintenant installé avec succès. De plus, il est prêt à être utilisé dans votre magasin. De plus, allez dans le menu d’administration. De plus, cliquez sur les extensions et cliquez ainsi sur le bouton de configuration à côté de One Page Advanced Checkout.

Interface d’administration 3.0 d’OpenCart Responsive Checkout Popup

Juste après l’installation réussie de One Page Checkout pour OpenCart sur le site Web, vous pouvez configurer les champs du formulaire de paiement selon vos besoins. De plus, vous devez naviguer dans les paramètres dans l’ordre indiqué : Panneau d’administration > Extensions > Modules > Paiement avancé en une page.

L’interface d’administration simple à comprendre de l’extension de paiement rapide OpenCart est divisée en neuf sections, à savoir :

  1. Paramètres généraux
  2. Paramètres de connexion
  3. Adresse de facturation
  4. Adresse de livraison
  5. Méthodes d’expedition
  6. Ship2Pay
  7. Mode de paiement
  8. Panier
  9. Newsletter

Paramètres généraux 3.1

  • Activer désactiver: Cette option vous permet d’activer ou de désactiver la fonctionnalité complète de One Page Checkout pour Opencart le site Web. Si elle est désactivée, la caisse Opencart standard est présentée aux clients.
  • Activer l’option Newsletter : En utilisant cette option, vous pouvez afficher ou masquer la boîte d’inscription à la newsletter de votre site. Si le client coche l’option newsletter, il s’abonnera aux mises à jour du site (newsletter).
  • Enregistrez l’invité automatiquement : Vous pouvez activer l’enregistrement automatique pour vos clients invités (utilisateurs qui effectuent le paiement en tant qu’invité). Cette option enverra automatiquement un mot de passe au client pour une utilisation ultérieure du compte.
  • Créer un compte: En activant cette option, vous pouvez donner des champs de mot de passe lors du paiement d’une seule page où l’utilisateur peut entrer son mot de passe pour s’inscrire.
  • Afficher l’invité : Cette option affichera ou masquera l’option invité dans la section de connexion du paiement. À l’aide de cette option, les utilisateurs peuvent effectuer un paiement en tant qu’invité pour leurs articles.
  • Ajouter un style personnalisé : Cette option vous permet d’inclure un style personnalisé supplémentaire (code CSS), affiché sur le devant de leur site Web.
  • Mode de test: Vous pouvez activer cette option pour tester la fonctionnalité du module de paiement en une page avant de la mettre en ligne pour les clients.
  • Ajouter une adresse IP: Cette option vous permet d’entrer l’adresse IP spécifique où vous souhaitez tester les fonctionnalités avancées de supercheckout.

3.2 Paramètres de connexion

  • Activer la connexion Facebook : Cette option activera ou désactivera l’option de connexion Facebook affichée sur le devant du formulaire de paiement d’une page.
  • ID d’application Facebook: Cette option vous permet de définir l’ID d’application Facebook requis pour vous connecter à votre compte Facebook.
  • Secret de l’application Facebook : Cette option définira la clé secrète de l’application Facebook. Remarque : Vous pouvez obtenir l’ID de l’application Facebook et la clé secrète à partir de https://developers.facebook.com/ qui a été discuté dans la section 3.2.1
  • Activer la connexion Google : Cette option activera ou désactivera l’option de connexion Google affichée sur le devant du formulaire de paiement d’une page.
  • ID d’application Google : Cette option vous permet de définir l’ID d’application Google requis pour vous connecter à votre compte Google.
  • Identifiant client Google: Cette option vous permet de définir l’ID client Google.
  • Enfin, Google�App�Secret :�Cette option définira la clé secrète de l’application Google.

Remarque : Vous pouvez obtenir l’ID d’application Google, l’ID client et la clé secrète à partir de https://code.google.com/apis/console, dont il a été question à la section 3.2.2.

3.2.1 Comment configurer la connexion Facebook

L’application Facebook peut être créée en suivant les étapes ci-dessous : – 1 : Accédez à l’URL indiquée : https://developers.facebook.com/apps/ 2 : Cliquez sur le bouton “Ajouter une nouvelle application”. 3&4 : Entrez le nom de votre application et votre identifiant de messagerie, puis cliquez sur le bouton “Créer un identifiant d’application”.


5&6 : Après avoir cliqué sur Créer un ID d’application, vous devrez passer un contrôle de sécurité comme indiqué :

7 : Cliquez sur l’onglet “Paramètres”.

8-13 : Deux options seront disponibles dans le menu déroulant, Basique et Avancé, cliquez sur « Basique ». Et puis entrez votre “Domaine d’application”, “E-mail de contact”, “URL de confidentialité”, “URL des conditions générales”, “Ajouter un logo”, “Sélectionner une catégorie” et cliquez sur le bouton “Enregistrer les modifications”. App Domains : votredomaine.com est correct votredomaine.com/store est incorrect www.domaine.com est incorrect

14 : Cliquez maintenant sur « + Ajouter une plate-forme ».


15 : Et sélectionnez Site Web comme plate-forme


16 : Entrez maintenant l’URL de votre site.


17&18 : Cliquez sur “Produits+” et sélectionnez Connexion Facebook.


19 : Sélectionnez Web comme plate-forme pour l’application.


20 : Maintenant, cliquez sur enregistrer.


21&22 : Cliquez sur Paramètres et ajoutez un URI de redirection OAuth valide. URI de redirection OAuth valide : https://your_store_url/index.php?route=kbstepcheckout/kbstepcheckout&fblogin=1


23&24 : Cliquez sur “App review”. Et marquez “Rendre ‘votre nom d’application’ public” sur Oui.


Dernière étape : copiez l’ID d’application et le secret d’application et collez-les dans les champs fournis dans le module.

3.2.2 Comment configurer la connexion Google

Suivez les étapes ci-dessous pour obtenir l’ID client et le secret client. 1. Allez sur le lien ” https://console.developers.google.com/project “. 2. Cliquez sur l’option déroulante mise en évidence dans le bouton ” 2 ” puis cliquez sur “Créer un projet”.

3. Entrez le nom de projet souhaité et cliquez sur “Créer”.


4. Accédez au gestionnaire d’API, cliquez sur Créer des informations d’identification et sélectionnez l’option ID client OAuth.

5. Cliquez sur le bouton “Configurer l’écran de consentement”.

6. Entrez “Email Id”, “Product Name” puis cliquez sur le bouton “Save”.


7. Sélectionnez “Application Web”, Entrez “Nom”, “URI redirigés autorisés” comme mentionné ci-dessous et cliquez sur le bouton “Créer”,


Utilisez l’URL de redirection suivante

https://your_store_url/index.php?route=kbstepcheckout/kbstepcheckout

8. Copiez l’ID client et le secret client.

9. Collez l’ID client et le secret client dans le champ de texte indiqué ci-dessous dans le panneau d’administration du module de paiement en une page de Prestashop.

Comment générer la clé API Google :

1) Allez dans API Manager, cliquez sur le menu de gauche, cliquez sur API & Services, puis cliquez sur Credentials.

2) Cliquez sur Créer des informations d’identification, puis sélectionnez la clé API.

3) Copiez la clé API et entrez-la dans le champ Google App Id de la page de connexion du module de fin d’administration

3.3 Adresse de paiement

OpenCart One Page Checkout vous permet d’afficher ou de masquer n’importe quel champ pour l’adresse de paiement. Les champs peuvent être activés ou désactivés séparément pour les clients connectés et déconnectés. Vous pouvez marquer n’importe quel champ comme requis, différemment pour les clients connectés et déconnectés du magasin. De plus, vous pouvez réorganiser les champs d’adresse à l’aide d’une simple action de glisser-déposer.

3.4 Adresse de livraison

 

Le module contextuel de paiement réactif OpenCart vous permet d’afficher ou de masquer n’importe quel champ pour l’adresse de livraison. Les champs peuvent être activés ou désactivés séparément pour les clients connectés et déconnectés. En utilisant OpenCart One Page Advanced Checkout, vous pouvez marquer n’importe quel champ comme requis, différemment pour les clients connectés et déconnectés du magasin. De plus, vous pouvez réorganiser les champs d’adresse à l’aide d’une simple action de glisser-déposer. Remarque : Pour inclure et afficher plus de champs personnalisés dans la section Adresse de paiement, Adresse de livraison, panier ou compte de la caisse, vous pouvez vous référer à la section 3.10

Méthode d’expédition 3.5

  • Afficher les méthodes d’expédition : Cette option affichera/masquera la liste complète des méthodes d’expédition fournies sur la page de paiement avancé.
  • Style d’affichage : Avec cette option, vous pouvez sélectionner le style d’affichage des méthodes d’expédition. Il peut s’agir uniquement d’une image de logo, uniquement de texte ou des deux.
  • Afficher le titre de la méthode d’expédition : Cette option activera ou désactivera le titre pour la méthode d’expédition particulière.
  • Sélectionnez la méthode d’expédition par défaut : Avec cette option, vous pouvez sélectionner n’importe quelle méthode d’expédition comme méthode par défaut.
  • Titre: Cette option définit le titre souhaité pour la méthode d’expédition.
  • Logo: Cette option définit l’image du logo pour la méthode d’expédition.

De même, vous pouvez modifier le titre et l’image du logo pour toutes les méthodes d’expédition à l’aide de ce module de paiement avancé OpenCart One Page.

3.6 Expédier à Payer

Méthode de paiement 3.7

  • Afficher les modes de paiement : Cette option affichera/masquera la liste complète des méthodes de paiement fournies sur la page de paiement avancé.
  • Style d’affichage : Avec cette option, vous pouvez sélectionner le style d’affichage des modes de paiement. Il peut s’agir uniquement d’une image de logo, uniquement de texte ou des deux.
  • Sélectionnez le mode de paiement par défaut : Avec cette option, vous pouvez sélectionner n’importe quel mode de paiement comme méthode par défaut.
  • Titre: Cette option définit le titre souhaité pour le mode de paiement.
  • Logo: Cette option définit l’image du logo pour le mode de paiement.

De même, vous pouvez modifier le titre et l’image du logo pour tous les modes de paiement à l’aide d’une page supercheckout.

3.8 Chariot

Dans cette section d’OpenCart One Page Supercheckout, vous pouvez personnaliser le panier et l’afficher comme vous le souhaitez dans votre magasin. La taille de l’image des articles du panier peut être facilement modifiée en définissant la hauteur et la largeur de l’image.

  • Taille de l’image du produit: Cette option vous permet de définir la taille de l’image pour les produits affichés dans la section panier de la page de paiement. De plus, vous pouvez afficher ou masquer les différents champs du panier pour vous connecter et vous déconnecter des clients du magasin. Des champs comme “Accepter les conditions”. De plus, commandez les commentaires marqués comme facultatifs ou facultatifs selon les exigences de votre site.

Bulletin d’information 3.9

  • Activer MailChimp : Cette option d’Opencart one page supercheckout, vous permet d’activer ou de désactiver la fonctionnalité d’intégration MailChimp pour votre boutique.
  • Clé API MailChimp : Avec cette option, vous pouvez définir la clé API MailChimp qui connectera votre site au compte MailChimp du vendeur.
  • Liste MailChimp : En utilisant cette option, vous pouvez récupérer et sélectionner la liste particulière connectée au compte MailChimp.

3.9.1 Comment configurer MailChimp

  1. Connectez-vous à votre compte Mail Chimp.
  2. Cliquez sur l’onglet du coin droit > Choisissez Profil > Extras > Clés API.
  3. Ici, l’administrateur peut créer une clé API en cliquant sur le bouton “Créer une clé”.
  4. Copiez la clé API.
  5. L’administrateur peut également créer une liste différente pour chaque client de connexion sociale en cliquant sur “Liste” dans la barre de menu supérieure.
  6. Collez maintenant la clé API dans la section Clé API de chimpanzé fournie par Mail et cliquez sur le bouton “Get List”.
  7. Sélectionnez la liste dans le menu déroulant.

3.10 Comment ajouter modifier ou supprimer des champs personnalisés à la page Supercheckout

Afin d’ajouter des champs personnalisés à n’importe quelle section de One Page Checkout, vous pouvez accéder à l’option “Champs personnalisés” sous l’onglet “Clients” dans la section de gauche de l’interface d’administration.

 

Opencart One Page Checkout – User Manual

1.0 Présentation

La plupart des visiteurs abandonnent la page de paiement du produit souhaité car ils trouvent le processus complexe et long. Cela entraîne une augmentation constante du nombre de paniers abandonnés. Pour contrôler ces taux d’abandon, Knowband propose les solutions suivantes : OpenCart One Page Checkout Pro Extension pour les boutiques OpenCart. De plus, en implémentant le paiement en une seule page pour votre site e-commerce, vous pouvez améliorer vos taux de conversion car elle remplace la page de paiement en plusieurs étapes par une page de paiement unique.

Vue mobile:

Principales caractéristiques de l’extension OpenCart One Page Checkout :

  1. L’extension offre une fonctionnalité de paiement invité permettant aux utilisateurs de finaliser facilement et rapidement leurs commandes en tant que clients invités, sans créer de nouveau compte sur la boutique en ligne.
  2. L’extension Fast Checkout d’OpenCart permet aux clients de se connecter rapidement au site web en utilisant leurs comptes Google, Facebook et PayPal.
  3. L’administrateur de l’extension OpenCart One Page Checkout Pro peut facilement personnaliser les champs de la page de paiement depuis l’interface d’administration. Il peut ainsi afficher ou masquer n’importe quel champ, ou le rendre obligatoire ou facultatif. Il peut également réorganiser leur position par simple glisser-déposer.
  4. Le propriétaire du magasin peut facilement personnaliser l’apparence de la page de paiement, notamment en modifiant la couleur des boutons, la couleur de fond des boutons, la couleur du texte, etc.
  5. Le module de paiement unique OpenCart Supercheckout offre une compatibilité multi-boutiques et multilingue.
  6. L’extension OpenCart One Step Checkout prend en charge la quasi-totalité des principaux modes de livraison et de paiement, ce qui renforce la confiance des clients et leur permet de choisir le mode de paiement qui leur convient le mieux sur la page de paiement.
  7. Le commerçant en ligne peut choisir parmi trois mises en page différentes pour la page de paiement : à une, deux ou trois colonnes. Les champs peuvent être facilement réorganisés par glisser-déposer.
  8. Le module Quick Checkout d’OpenCart offre une intégration avec MailChimp, Klaviyo et SendinBlue qui vous permet de synchroniser automatiquement la base de données de vos utilisateurs avec ces comptes, sans aucun effort manuel.
  9. Le commerçant en ligne peut également personnaliser l’apparence de l’extension grâce à du CSS et du JS personnalisés.
  10. Le module OpenCart Responsive One Step Checkout offre la fonctionnalité de mode test grâce à laquelle le propriétaire de la boutique peut vérifier et visualiser les personnalisations effectuées avant de les mettre en ligne sur le site web.
  11. Le module « Paiement simplifié » d’OpenCart propose la fonctionnalité Ship2Pay, qui permet au commerçant d’associer des modes de paiement spécifiques à des modes de livraison. Lors de la sélection d’un mode de livraison, seuls les modes de paiement associés à ce mode de livraison sont affichés.

Guide d’installation 2.0 Extension OpenCart One Page Checkout

Avant de commencer le processus d’installation, vous devez acheter le Extension OpenCart One Page Checkout Vous pouvez l’acheter sur la boutique Knowband. Une fois votre achat effectué, vous recevrez les fichiers suivants à l’adresse électronique que vous avez enregistrée.

  • Code source de l’extension OpenCart One Page Checkout au format de fichier zip.
  • Manuel d’utilisation de l’extension OpenCart One Page Checkout.

Pour installer ce module de paiement monopage OpenCart sur votre boutique en ligne, suivez les étapes suivantes : 1. Décompressez le fichier zip. Vous obtiendrez les dossiers comme indiqué dans l’image ci-dessous.


2. Copiez tous les dossiers du fichier zip dans le répertoire racine de l’installation d’OpenCart via un gestionnaire FTP.

Étapes pour installer le fichier OCMOD
  • Après avoir décompressé le dossier, vous trouverez un fichier supercheckout_pro.ocmod.xml comme indiqué ci-dessous :
  • Dans le panneau d’administration, cliquez sur Extensions dans le menu de gauche. Cliquez ensuite sur Installateur d’extensions ( Accueil -> extension).

  • Téléversez maintenant le fichier supercheckout_pro.ocmod.xml. Un message de confirmation s’affichera une fois le fichier téléversé.
  • Une fois le fichier téléchargé, rendez-vous sur  Accueil -> Modification
  • Vous trouverez un fichier nommé Supercheckout Pro v2.8 (cela signifie que votre module ocmod a été installé avec succès). Cliquez sur l’icône « + » correspondante pour l’activer. L’icône verte deviendra rouge, comme indiqué ci-dessous.
  • Enfin, cliquez sur le bouton d’actualisation (cette étape est obligatoire).

Alors, OpenCart One Page Checkout Pro L’extension est maintenant installée et prête à être utilisée dans votre boutique. Accédez au menu d’administration, cliquez sur Extensions, puis sur Modules. Cliquez ensuite sur le bouton Configurer à côté de Supercaisse Knowband.

Interface d’administration 3.0 de Module de paiement en une étape réactif pour OpenCart

Une fois l’extension One Page Checkout pour votre site OpenCart installée, vous pouvez configurer les champs du formulaire de paiement selon vos besoins. Vous devez accéder aux paramètres dans l’ordre indiqué : Admin Panel > Extensions > Modules > Supercaisse Knowband

L’interface d’administration facile à comprendre de OpenCart One Page Checkout Pro est divisé en dix sections : 1. Paramètres généraux 2. Personnalisation 3. Paramètres de connexion 4. Adresse de paiement 5. Adresse de livraison 6. Mode de livraison 7. Ship2Pay 8. Mode de paiement 9. Panier 10. Design 11. Newsletter. Chacune de ces sections est décrite ci-dessous :

Paramètres généraux 3.1

  • Activer désactiver: Cette option vous permet d’activer ou de désactiver l’intégralité des fonctionnalités de OpenCart One Page Checkout Pro Brancher de OFF à ON.
  • Activer l’option Newsletter : Vous pouvez activer ou désactiver l’option Newsletter sur la page de paiement. Une fois ce bouton activé, voici les cas de figure : a) L’option Newsletter sera visible pour les clients effectuant un paiement invité, uniquement si l’option « Inscription automatique des invités » est activée. b) L’option Newsletter sera toujours visible pour les clients créant un nouveau compte. c) L’option Newsletter ne sera jamais visible pour les clients connectés.
  • Enregistrement automatique des invités : Vous pouvez activer cette option pour enregistrer automatiquement les clients invités dans votre magasin. En activant cette option, vous pouvez enregistrer vos clients et leur envoyer un mot de passe généré par e-mail.
  • Créer un compte: En activant ce champ, vous pouvez afficher un champ de mot de passe sur la page de paiement prioritaire afin que les nouveaux utilisateurs puissent facilement définir le mot de passe souhaité pour leur compte.
  • Sélectionnez l’option par défaut lors du paiement : Cette option vous permet de définir une option par défaut dans la section de connexion de votre OpenCart. Supercaisse en une seule page sortir de la page à partir des options Invité, Connexion et Inscription.
  • Désactiver le mode invité : Vous pouvez activer ou désactiver la fonctionnalité invité pour les utilisateurs dans la section de connexion de la page de paiement unique.
  • Ajouter un style personnalisé : Cette option vous permet d’ajouter un style personnalisé à la page Supercheckout. Pour appliquer du code CSS personnalisé, saisissez-le dans le champ texte situé à droite de l’option « Ajouter un style personnalisé ». Par exemple : vous pouvez modifier la couleur des boutons de la page Supercheckout.
  • Ajouter un montant minimum pour afficher la bannière de livraison gratuite: À partir de cet onglet, l’administrateur peut ajouter un montant minimum à partir duquel les clients pourront bénéficier de la livraison gratuite de leur commande.
  • Activer la détection automatique du pays : Une fois cette fonctionnalité activée, l’extension détectera et renseignera automatiquement le pays de l’utilisateur dans la section correspondante.
  • Validation en ligne : Grâce à cette fonctionnalité, l’extension affiche une erreur chaque fois que l’utilisateur omet de remplir un champ obligatoire sur la page de paiement.
  • Activer la fonction de remplissage automatique des adresses de Google : Dès que l’utilisateur commence à saisir son adresse, l’extension lui suggère des adresses si cette fonctionnalité est activée.
  • Activer ou désactiver le nouveau modèle : Avec l’extension OpenCart One Page Checkout, le propriétaire de la boutique peut appliquer le nouveau ou l’ancien modèle de page de paiement selon son choix à partir des paramètres généraux.
  • Mode test : Cette option vous permet d’activer ou de désactiver la fonctionnalité du mode test de cet appareil. Extension OpenCart One Page Checkout.
  • URL de test : Une fois le mode test activé, vous pouvez définir une URL de super-paiement où vous pourrez tester la fonctionnalité de paiement en une seule page.

Customizer

Dans l’onglet Personnaliser, vous pouvez personnaliser la couleur d’arrière-plan du bouton, la couleur de la bordure du bouton, l’aperçu du bouton, la couleur du texte du bouton, la couleur de la bordure inférieure du bouton, la couleur d’arrière-plan du bouton Mon compte, la couleur d’arrière-plan du bouton Connexion, la couleur d’arrière-plan du bouton Déconnexion, la couleur d’arrière-plan du bouton Code promo, la couleur d’arrière-plan du bouton Code de réduction, etc.

  • Couleur de fond de la barre de livraison gratuite : Cette section vous permet de modifier la couleur de fond de la barre « Livraison gratuite » sur la page de paiement.
  • CSS et JS personnalisés : Cette section vous permet de personnaliser l’apparence de la page de paiement grâce à du CSS et du JS personnalisés.

3.2 Connexion

Sous cet onglet, vous trouverez les options permettant de configurer les options de connexion Facebook, Google et PayPal, comme indiqué ci-dessous.

  • Activer la connexion Facebook : Cette option vous permet d’activer/désactiver la connexion Facebook sur la page de paiement unique.
  • Identifiant de l’application Facebook : Cette option vous permet de définir l’identifiant de l’application Facebook, qui peut être généré à l’aide du compte développeur Facebook.
  • Secret de l’application Facebook : Utilisez cette option pour définir la clé secrète générée à l’aide du compte développeur Facebook.
  • Activer la connexion Google : Cette option vous permet d’activer/désactiver l’option de connexion Google sur la page de paiement unique.
  • Identifiant de l’application Google : Cette option vous permet de définir l’identifiant GoogleApp.
  • L’identifiant client Google : Ce champ vous permet de définir l’ID client Google créé à partir de la console Google.
  • Secret de l’application Google : Cette option vous permet de définir la clé secrète de l’application générée à l’aide de la console Google.
  • Activer la connexion PayPal : Grâce à cette option, vous pouvez permettre à vos clients de se connecter via leurs comptes PayPal.
  • Identifiant client PayPal : Cette option vous permet d’ajouter votre identifiant client PayPal.
  • Secret du client PayPal : Cette option vous permet d’ajouter votre identifiant secret client PayPal.

Pour obtenir des instructions détaillées sur la génération de l’ID d’application, de la clé secrète d’application et de l’ID client, passez à la section suivante.

3.2.1 Comment configurer la connexion Facebook ?

L’application Facebook peut être créée en suivant les étapes mentionnées ci-dessous :

1: Rendez-vous à l’adresse URL suivante : https://developers.facebook.com/apps/

2: Cliquez sur le bouton « Créer une application ».

3 et 4: Sélectionnez le « Créer des expériences connectées » sélectionnez cette option et cliquez sur le bouton « Continuer ».

5 et 6: Ajoutez le « Nom d’affichage de l’application », l’« Adresse e-mail de contact de l’application » et choisissez parmi les options « Avez-vous un compte Business Manager ? », puis cliquez sur le bouton « Créer une application ».

7 et 8: Après avoir cliqué sur Créer un ID d’application, vous devrez passer un contrôle de sécurité comme indiqué :

9: Cliquez sur l’onglet « Paramètres ».

Gentiment ajouter une URL de rappel de suppression. Vous pouvez consulter la description de l’URL de rappel de suppression ici – https://developers.facebook.com/docs/development/create-an-app/app-dashboard/data-deletion-callback/

10-15: Deux options seront disponibles dans le menu déroulant : Basique et Avancé. Cliquez sur « Basique ». Saisissez ensuite votre « Domaine de l’application », votre « URL de confidentialité », votre « URL des conditions d’utilisation », ajoutez une icône, sélectionnez une catégorie et cliquez sur le bouton « Enregistrer les modifications ».

Domaines d’application:

votredomaine.com est correct

votredomaine.com/store est incorrect

www.domaine.com est incorrect

16 : Cliquez maintenant sur « +Ajouter une plateforme ».

17: Sélectionnez ensuite Site Web comme plateforme.

18 et 19: Saisissez maintenant l’URL de votre site.

20 et 21: Cliquez sur “Produits+” Cliquez ensuite sur le bouton « Configurer » depuis l’onglet de connexion Facebook.

22: Sélectionnez le web comme plateforme pour l’application.

23: Ajoutez l’URL du site et cliquez sur Enregistrer.

24-26: Cliquez sur Paramètres et ajoutez des URI de redirection OAuth valides.

URI de redirection OAuth valides :

https://your_store_url/index.php?route=kbstepcheckout/kbstepcheckout&fblogin=1

27: Sélectionnez le « En développement » option.

28 et 29: Choisissez une catégorie dans le menu déroulant et cliquez sur le bouton « Changer de mode ».

30: Copiez l’ID de l’application et le secret de l’application, puis collez-les dans les champs prévus à cet effet dans le module.

Dernière étape:

1. Connectez-vous avec le SDK JavaScript.

Définissez cette valeur sur Oui.

2. Domaines autorisés pour le SDK JavaScript

Définissez le domaine de la boutique.

Remarque : le domaine doit être saisi ici au format ci-dessous.

https://octest.knowband.com

3.2.2 Comment configurer la connexion Google ?

Suivez les étapes ci-dessous pour obtenir l’identifiant client et le secret client. 1. Accédez au lien « https://console.developers.google.com/project 2. Cliquez sur « Créer un projet ».

3. Saisissez le nom de projet et le nom de l’organisation souhaités, puis cliquez sur « Créer ».


4. Accédez à API Manager, cliquez sur le menu de gauche, cliquez sur API et services, puis cliquez sur Créer des identifiants.


5. Sélectionnez l’option ID client OAuth.

6. Cliquez sur le bouton « Configurer l’écran de consentement ». Saisissez l’« Adresse e-mail », le « Nom du produit », puis cliquez sur le bouton « Enregistrer ».


7. Sélectionnez l’option Externe, puis cliquez sur le bouton « Créer ».


Utilisez l’URL de redirection suivante : https://your_store_url/index.php?route=supercheckout/supercheckout 8. Ajoutez le nom de l’application et l’adresse e-mail du support utilisateur.

9. Cliquez sur Ajouter un domaine, ajoutez le domaine autorisé, puis cliquez sur Enregistrer et continuer.

10. Cliquez sur le bouton Enregistrer et continuer.

Cliquez sur +Ajouter des utilisateurs.

11. Ajoutez un nom d’utilisateur et cliquez sur le bouton Ajouter.

12. L’utilisateur ajouté sera visible, puis cliquez sur le bouton Enregistrer et continuer.

13. Cliquez sur l’écran de contenu du serment, puis cliquez sur le bouton Publier/Ajouter.

14. Cliquez sur Identifiants, puis sur le bouton +Créer des identifiants, puis sélectionnez ID client Oath.

15. Ajoutez le type et le nom de l’application, puis cliquez sur le bouton Ajouter.

16. Ajoutez les URL, puis cliquez sur le bouton Créer.

17. Copiez et collez l’ID client et le secret client dans le champ texte indiqué ci-dessous dans le module de paiement en une page de Prestashop.

Comment générer la clé API Google :

1) Accédez à API Manager, cliquez sur le menu de gauche, cliquez sur API et services, puis cliquez sur Identifiants.

2) Cliquez sur Créer des identifiants, puis sélectionnez la clé API.

3) Copiez la clé API et saisissez-la dans le champ ID de l’application Google de la page de connexion du module d’administration.

3.3 Adresse de paiement

Cet onglet contient les paramètres des champs qui doivent être affichés dans la section Adresse de paiement ou de facturation de la page de paiement, comme indiqué ci-dessous.

  1. Il se compose de deux sections. Celle de gauche est réservée aux clients invités et celle de droite aux clients connectés.
  2. Pour afficher/masquer un champ sur la page de paiement, cochez la case située juste à gauche de l’étiquette « Afficher ».
  3. Pour rendre un champ obligatoire, cochez la case située juste à gauche de « Libellé obligatoire ».
  4. Les champs peuvent également être réorganisés selon vos besoins. Pour ce faire, déplacez le curseur sur l’icône de déplacement et faites glisser le champ à l’endroit souhaité, comme illustré ci-dessous.
  5. Lors de l’enregistrement, les champs seront réorganisés en fonction des modifications.

3.4 Adresse de livraison

Cet onglet contient les paramètres des champs qui doivent apparaître dans la section Adresse de livraison sur la page de paiement, comme indiqué ci-dessous.

  1. Il se compose de deux sections. Celle de gauche est réservée aux clients invités et celle de droite aux clients enregistrés.
  2. Pour afficher/masquer un champ sur la page de paiement, cochez la case située juste à gauche de l’étiquette « Afficher ».
  3. Pour rendre un champ obligatoire, cochez la case située juste à gauche de « Libellé obligatoire ».
  4. Les champs peuvent également être réorganisés selon vos besoins. Pour ce faire, déplacez le curseur sur l’icône de déplacement et faites glisser le champ à l’endroit souhaité, comme illustré ci-dessous.
  5. Lors de l’enregistrement, les champs seront réorganisés en fonction des modifications.

3.5 Méthode d’expédition

Cet onglet contient les paramètres relatifs au mode de livraison affiché sur la page de paiement. Il permet d’activer/désactiver et de définir le mode de livraison par défaut, comme indiqué ci-dessous :

  • Afficher les modes de livraison : Cette option vous permet d’afficher ou de masquer les modes de livraison sur la page de paiement. Pour cela, il vous suffit de basculer le bouton de ON à OFF et inversement.
  • Style d’affichage : Cette option vous permet de choisir le style d’affichage des modes de livraison ajoutés à votre site web. Vous pouvez choisir parmi trois styles : Texte uniquement, Image uniquement ou Texte avec images.
  • Afficher le titre de la méthode d’expédition : Cette option vous permet d’activer ou de désactiver l’affichage du titre des modes de livraison sur la page de paiement.
  • Sélectionnez un mode de livraison par défaut : Cette option vous permet de sélectionner n’importe quelle méthode comme méthode d’expédition par défaut pour votre boutique.
  • Titre: Cette option vous permet de définir des titres correspondant à chaque mode de livraison ajouté et configuré pour votre boutique. Vous pouvez choisir la langue (anglais ou français).
  • Logo: Cette option vous permet de définir le logo souhaité pour chaque mode de livraison configuré pour votre boutique.

3.6 Ship2Pay

La fonctionnalité « ship2pay » du module Supercheckout d’OpenCart désactive automatiquement les modes de paiement en fonction du mode de livraison choisi par le client. L’administrateur peut ainsi associer certains modes de paiement à certains modes de livraison de la boutique.

3.7 Mode de paiement

Cet onglet contient les paramètres des modes de paiement affichés sur la page de paiement, comme l’activation/la désactivation ou la sélection d’un mode de paiement par défaut.

  • Afficher les modes de paiement : Cette option vous permet d’afficher ou de masquer les modes de paiement sur la page de validation de la commande. Pour cela, il vous suffit de basculer le bouton de ON à OFF et inversement.
  • Style d’affichage : Cette option vous permet de choisir le style d’affichage des moyens de paiement ajoutés à votre site web. Vous pouvez choisir parmi trois styles : Texte uniquement, Image uniquement ou Texte avec images.
  • Sélectionnez un mode de paiement par défaut : Cette option vous permet de sélectionner n’importe quel mode de paiement comme mode de paiement par défaut pour votre boutique.
  • Titre: Cette option vous permet de définir des titres correspondant à chaque mode de paiement ajouté et configuré pour votre boutique. Vous pouvez choisir la langue (anglais ou français).
  • Logo: Cette option vous permet de définir le logo souhaité pour chaque mode de paiement configuré pour votre boutique.

3.8 Chariot

Dans cette section, vous trouverez les champs du panier divisés en deux parties : celle de gauche est réservée aux clients invités, et celle de droite aux clients enregistrés ou connectés.

  1. Pour afficher/masquer le panier sur la page de paiement, cochez ou décochez la case située en face de l’étiquette « Afficher le panier ».
  2. Pour activer/désactiver une colonne du panier, cochez/décochez la case correspondant à cette colonne.
  3. Pour activer/désactiver l’affichage des images contextuelles du produit, cochez/décochez la case située en face de la colonne correspondante.
  4. Pour modifier la taille de la fenêtre contextuelle d’image, saisissez la largeur et la hauteur de la fenêtre dans la zone de texte située devant l’étiquette « Taille de l’image du produit ».
  5. Les options de coupons, de points de fidélité et de bons d’achat peuvent être activées ou désactivées en cochant/décochant la case correspondante. Veuillez noter que le champ de texte relatif aux points de fidélité ne sera visible sur la page de paiement que si les trois conditions suivantes sont remplies : a) Le client doit être connecté. b) Il doit avoir au moins 1 point de fidélité sur son compte. c) Il doit avoir un produit dans son panier pouvant être réglé avec des points de fidélité.

Confirmer:

  1. Cet onglet est à nouveau divisé en deux sections : celle de gauche est réservée aux clients invités et celle de droite aux clients enregistrés ou connectés.
  2. Pour activer la zone de commentaires pour la commande du client, cochez la case en face de l’intitulé « Laisser un commentaire pour la commande » et pour la désactiver, décochez cette même case.
  3. Pour accepter les conditions générales ou toute autre information enregistrée dans l’interface d’administration de la boutique, cochez/décochez la case en face de l’étiquette « J’accepte les conditions ».

3.9 Onglet Conception

Cet onglet contient les paramètres de conception de OpenCart One Page Checkout Pro, comme illustré ci-dessous :

1 colonne

2 colonne

3 colonne

Vous pouvez facilement modifier la largeur de n’importe quelle colonne en ajustant le curseur situé en haut, comme indiqué ci-dessous.

 

Vous pouvez également repositionner différents blocs de la page de paiement par simple glisser-déposer. Une fois les modifications enregistrées, les blocs seront réorganisés sur la page de paiement en fonction de votre choix.

Bulletin d’information 3.10

En cliquant sur l’onglet Newsletter de Module de paiement en une étape réactif pour OpenCartVous pouvez configurer les paramètres de MailChimp, SendinBlue et Klaviyo Integrator comme indiqué ci-dessous :

  • Activer MailChimp : Vous pouvez activer ou désactiver l’intégration MailChimp pour votre boutique. Activez cette option si vous souhaitez augmenter le nombre d’abonnements à votre newsletter.
  • Clé API MailChimp : Cette option vous permet de configurer la clé API Mailchimp pour la collecte des adresses e-mail de vos clients.
  • Liste MailChimp : Une fois la clé configurée avec ceci Extension de paiement rapide pour OpenCart, vous pouvez récupérer et sélectionner la liste MailChimp.

On peut faire la même chose pour SendinBlue et Klaviyo.

4.0 Interface avant de Extension de paiement en une étape pour OpenCart

Lorsque l’utilisateur clique sur le bouton « Ajouter au panier » correspondant à un produit et effectue sa commande, il verra la page de paiement simplifiée suivante sur son écran.

Tutoriel 5.0 d’Opencart One Page Checkout Pro par Knowband

Pour simplifier au maximum l’installation, la configuration et le paramétrage de l’extension OpenCart One Page Checkout Pro de Knowband, nous avons créé un tutoriel détaillé et facile à comprendre. Ce guide pas à pas vous accompagne à chaque étape, du téléchargement et de l’installation du module à la configuration de toutes ses fonctionnalités avancées pour une expérience de paiement plus rapide, plus fluide et plus conviviale. Que vous soyez novice ou utilisateur expérimenté d’OpenCart, ce tutoriel vous permettra de personnaliser facilement les champs, de gérer les options de connexion via les réseaux sociaux, d’activer le paiement invité, de configurer les modes de paiement et de livraison, et d’optimiser le design global en toute simplicité. Visionnez le tutoriel complet ici pour une installation et un fonctionnement optimaux de l’extension One Page Checkout Pro.

Extension OpenCart One Page Checkout : https://www.knowband.com/opencart-one-supercheckout-pro

Démo d’administration de la page de paiement unique d’OpenCart : https://opencartdemo.knowband.com/demo/index.php?module=oc_onepagecheckout_knowband&demo=admin&lang=en

Démo de la page de paiement unique d’OpenCart : https://opencartdemo.knowband.com/demo/index.php?module=oc_onepagecheckout_knowband&demo=front&lang=en

Page de paiement unique OpenCart depuis la place de marché officielle OpenCart : https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=15353