Opencart One Page Checkout – User Manual

1.0 Présentation

La plupart des visiteurs quittent la caisse pour le produit souhaité simplement parce qu’ils trouvent le processus complexe et long à terminer. Cela conduit finalement à un nombre de plus en plus important de chariots abandonnés. Pour contrôler les taux de sortie et d’abandon de panier, Knowband a proposé�OpenCart One Page Checkout Pro plugin pour les magasins OpenCart. De plus, en mettant en œuvre One Page Checkout pour votre site de commerce électronique, vous pouvez améliorer les taux de conversion car il 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é grâce à laquelle les utilisateurs peuvent facilement et rapidement terminer leurs commandes en tant que clients invités sans créer de nouveau compte sur la boutique en ligne.
2. L’extension OpenCart Fast Checkout permet aux clients de se connecter rapidement au site Web à l’aide de leurs comptes Google, Facebook et Paypal.
3. Les champs de la page de paiement peuvent être facilement personnalisés par l’administrateur à partir du back-end de l’extension OpenCart One Page Checkout Pro. L’administrateur du magasin peut afficher ou masquer n’importe lequel des champs de la page de paiement ou peut les rendre facultatifs ou obligatoires pour que les utilisateurs les remplissent. L’administrateur peut également réorganiser les champs de position avec la fonctionnalité 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 du bouton d’arrière-plan, la couleur du texte, etc.
5. Le Supercheckout OpenCart One Page offre une compatibilité multi-magasins et multilingue.
6. L’extension OpenCart One Step Checkout prend en charge presque toutes les principales méthodes d’expédition et de paiement qui renforcent la confiance des clients dans le choix de la méthode souhaitée à partir de la page de paiement.
7. L’e-commerçant peut appliquer l’une des mises en page de conception à partir de 3 mises en page de paiement différentes, c’est-à-dire 1 colonne, 2 colonnes ou 3 colonnes. Les champs peuvent être facilement réorganisés par glisser-déposer.
8. Le module OpenCart Quick Checkout offre une intégration avec MailChimp, Klaviyo et SendinBlue qui vous permet de synchroniser automatiquement la base de données de vos utilisateurs avec vos comptes sans aucun effort manuel.
9. L’e-commerçant peut également personnaliser l’apparence de l’extension grâce à des CSS et JS personnalisés.
10. Le module OpenCart Responsive One Step Checkout offre la fonctionnalité de mode de test grâce à laquelle le propriétaire du magasin peut vérifier et afficher les personnalisations effectuées avant de les mettre en ligne sur le site Web.
11. Le module OpenCart Simplified Checkout offre la fonctionnalité Ship2Pay grâce à laquelle le propriétaire du magasin peut mapper des modes de paiement particuliers avec des modes de livraison sélectionnés. Il masque tous les autres modes de paiement lors de la sélection d’un mode de livraison particulier et affiche uniquement les modes de paiement associés au mode de livraison sélectionné pour l’utilisateur.

2.0�Guide d’installation de�Extension OpenCart One Page Checkout

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

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

Maintenant, pour installer ce OpenCart Single Page 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.

• Après avoir décompressé le dossier, vous trouverez un fichier� supercheckout_pro.ocmod.xml comme indiqué ci-dessous :

• Maintenant, dans le panneau d’administration, cliquez sur Extensions dans le menu de gauche. Cliquez ensuite sur Extension Installer (�Accueil->extension).

• Maintenant, téléchargez le supercheckout_pro.ocmod.xml. Un message de réussite s’affiche une fois le fichier téléchargé.

• Une fois le fichier téléchargé, accédez à��Accueil->Modification

• Vous trouverez un fichier nommé Supercheckout Pro v2.8 (cela signifie que votre ocmod a été installé avec succès). Cliquez sur l’icône “+” correspondante pour l’activer. L’icône verte devient rouge comme indiqué ci-dessous.

• Enfin, cliquez sur le bouton d’actualisation (Ceci est obligatoire).

Alors,OpenCart One Page Checkout Pro est maintenant installé avec succès et est prêt à être utilisé dans votre magasin. Allez dans le menu admin et cliquez sur les extensions puis sur les modules. Cliquez sur le bouton de configuration à côté de�Supercontrôle Knowband.

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

Juste après l’installation réussie du site Web One Page Checkout pour OpenCart, vous pouvez configurer les champs du formulaire de paiement selon vos besoins. Vous devez naviguer dans les paramètres dans l’ordre indiqué : panneau d’administration > Extensions > Modules >�Knowband Supercheckout

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

Paramètres généraux 3.1

• Activer désactiver: En utilisant cette option, vous pouvez activer ou désactiver la fonctionnalité complète du�OpenCart One Page Checkout Pro�plugin de OFF à ON.
• Activer l’option Newsletter : Vous pouvez activer ou désactiver l’option�Newsletter sur la page Supercheckout. Une fois que vous avez activé ce bouton, les cas suivants seront les suivants : a.) L’option Newsletter sera visible pour les clients de paiement en tant qu’invité, uniquement si vous avez activé l’option Enregistrer l’invité automatiquement. b.) L’option Newsletter sera toujours visible pour les clients s’ils créent un nouveau compte. c.) L’option Newsletter ne sera jamais visible pour les clients connectés.
• Enregistrez l’invité automatiquement : Vous pouvez activer cette option pour enregistrer automatiquement les clients invités dans votre magasin. En activant cette option, vous pouvez enregistrer vos clients dans la boutique et leur envoyer un mot de passe généré sur leur e-mail.
• Créer un compte: En activant ce champ, vous pouvez afficher un champ de mot de passe sur la page de super paiement afin que les nouveaux utilisateurs puissent facilement définir le mot de passe souhaité pour leur compte.
• Sélectionnez l’option par défaut à la caisse : Avec cette option, vous pouvez définir une option par défaut dans la section de connexion de votre OpenCart« Superpaiement d’une page »page des options en tant qu’invité, connexion et enregistrement.
• Désactiver l’invité : Vous pouvez activer ou désactiver la fonctionnalité d’invité pour les utilisateurs dans la section de connexion de One Page Checkout.
• Ajouter un style personnalisé :�Avec cette option, vous pouvez ajouter ou inclure un style personnalisé à la page Supercheckout. Pour appliquer un CSS personnalisé sur la page Supercheckout, vous pouvez écrire ce CSS dans la zone de texte qui se trouve juste à droite de l’étiquette Ajouter un style personnalisé. Par exemple : Vous pouvez changer la couleur des boutons sur 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 requis, après quoi les clients pourront bénéficier de la livraison gratuite de leur commande.
  
• Activer la détection automatique du pays : Après avoir activé cette fonctionnalité, l’extension détectera et remplira automatiquement le pays de l’utilisateur dans la section pays.
  
• Validation en ligne : Avec cette fonctionnalité, l’extension affiche une erreur chaque fois que l’utilisateur manque de remplir un champ obligatoire sur la page de paiement.
  
• Activez l’adresse automatique Google pour remplir : Dès que l’utilisateur commence à taper son adresse, l’extension propose son adresse si cette fonctionnalité est activée.
  
• Activer ou désactiver le nouveau modèle : Avec l’extension OpenCart One Page Checkout, le propriétaire du magasin peut appliquer le nouveau ou l’ancien modèle de paiement selon son souhait à partir des paramètres généraux.
• Mode de test:�Cette option vous permet d’activer ou de désactiver la fonctionnalité du mode test�Extension OpenCart One Page Checkout.
• URL de test:Une fois que vous avez activé le mode de test, vous pouvez définir une URL de supercontrôle où vous pouvez tester la fonctionnalité de paiement d’une page.

Customizer

Dans l’onglet Personnalisation, vous pouvez personnaliser la couleur d’arrière-plan du bouton, la couleur de la bordure du bouton Aperçu du bouton, la couleur du texte du bouton, la couleur du bas de la bordure du bouton, la couleur d’arrière-plan du bouton Mon compte, la couleur d’arrière-plan du bouton de connexion, la couleur d’arrière-plan du bouton de connexion, la couleur d’arrière-plan du bouton de déconnexion, le coupon Couleur d’arrière-plan du bouton de code, couleur d’arrière-plan du bouton de code de coupon, etc.

• Couleur d’arrière-plan de la barre d’expédition gratuite : Cette section vous permet de modifier la couleur d’arrière-plan de la barre de 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 avec des CSS et JS personnalisés.

3.2 Connexion

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

• Activer la connexion Facebook : Avec cette option, vous pouvez activer/désactiver l’option de connexion Facebook sur One Page Checkout.
• ID d’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 du développeur Facebook.
• Secret de l’application Facebook : À l’aide de cette option, définissez la clé secrète générée à l’aide du compte du développeur Facebook.
• Activer la connexion Google :�Avec cette option, vous pouvez activer/désactiver l’option de connexion Google sur One Page Checkout.
• ID d’application Google :�Cette option vous permet de définir l’ID 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 :À l’aide de cette option, vous pouvez définir la clé secrète de l’application générée à l’aide de la console Google.
• Activer la connexion Paypal : Avec cette option, vous pouvez laisser vos clients se connecter via leurs comptes Paypal.
• Identifiant Paypal : Cette option vous permet d’ajouter votre identifiant client Paypal.
• Code secret du client Paypal : Cette option vous permet d’ajouter votre ID secret client Paypal.

Pour obtenir des instructions détaillées sur la génération d’un ID d’application, d’une clé secrète d’application et d’un 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 ci-dessous : –

1:� Allez à l’URL donnée : 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 » option et cliquez sur le bouton ‘Continuer’.

5 et 6: Ajoutez “Nom d’affichage de l’application”, “E-mail de contact de l’application”, et choisissez parmi “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 identifiant d’application, vous devrez effectuer un contrôle de sécurité comme indiqué:

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

Gentiment ajouter supprimer l’URL de rappel. Vous pouvez vérifier la description de l’URL de rappel de suppression à partir d’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, Basic et Advanced, cliquez sur “Basic”. Et puis entrez votre “Domaine d’application”, “URL de confidentialité”, “URL des conditions d’utilisation”, “Ajouter une icône”, “Sélectionner une catégorie” et cliquez sur le bouton “Enregistrer les modifications”.

Domaines d’application:

votredomaine.com est correct

yourdomain.com/store est incorrect

www.domain.com est incorrect

16 : Maintenant, cliquez sur “+ Ajouter une plate-forme”.

17:Et sélectionnez Site Web comme plate-forme.

18 et 19:Maintenant, entrez l’URL de votre site.

20&21 :�Cliquez sur “Produits+” et cliquez sur le bouton Configuration dans l’onglet de connexion Facebook.

22:�Sélectionnez le Web comme plate-forme pour l’application.

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

24-26 :�Cliquez sur Paramètres et ajoutez un URI de redirection OAuth valide.

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 d’application et le secret d’application et collez-les dans les champs fournis dans le module.

Dernière étape:

1. Connectez-vous avec le SDK JavaScript.

Définissez ce champ sur Oui.

2. Domaines autorisés pour le SDK JavaScript

Définissez le domaine du magasin.

Remarque : – ici, le domaine doit être saisi dans le type ci-dessous.

https://octest.knowband.com

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 “Créer un projet”.

3. Entrez le nom du projet et le nom de l’organisation souhaités et cliquez sur “Créer”.

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

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

6. Cliquez sur le bouton “Configurer l’écran de consentement”. Entrez “Email Id”, “Product Name” puis cliquez sur le bouton “Save”.

7. Sélectionnez l’option Externe 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 de l’assistance utilisateur.

9. Cliquez sur Ajouter un domaine et ajoutez un 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 de serment, puis cliquez sur le bouton Publier Ajouter.

14. Cliquez sur Credentials, puis sur le bouton +Create Credentials, puis sélectionnez Oath Client ID.

15. Ajoutez le type d’application et le nom, 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 de texte indiqué ci-dessous dans le 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 saisissez-la dans le champ Google App Id de la page de connexion du module de fin 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 sur la page de paiement, comme indiqué ci-dessous.

1. Il se compose de deux sections. Celui de gauche est destiné aux clients invités et celui de droite aux clients connectés.
2. Pour afficher/masquer un champ dans la page de paiement, cochez la case juste à gauche de l’étiquette Afficher.
3. Pour rendre un champ obligatoire (champ obligatoire), cochez la case juste à gauche de Exiger une étiquette.
4. Les champs peuvent également être réorganisés en fonction des besoins. Pour réorganiser, déplacez simplement le curseur sur l’icône de glissement et faites glisser et déposez le champ là où il est nécessaire, comme indiqué 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 être affichés dans la section Adresse de livraison sur la page de paiement, comme indiqué ci-dessous.

1. Il se compose de deux sections. Celui de gauche est destiné aux clients invités et celui de droite aux clients enregistrés.
2. Pour afficher/masquer un champ dans la page de paiement, cochez la case juste à gauche de l’étiquette Afficher.
3. Pour rendre un champ obligatoire (champ obligatoire), cochez la case juste à gauche de Exiger une étiquette.
4. Les champs peuvent également être réorganisés en fonction des besoins. Pour réorganiser, déplacez simplement le curseur sur l’icône de glissement et faites glisser et déposez le champ là où il est nécessaire, comme indiqué ci-dessous.
5. Lors de l’enregistrement, les champs seront réorganisés en fonction des modifications.

Méthode d’expédition 3.5

Cet onglet contient les paramètres de la méthode d’expédition qui s’affiche sur la page de paiement. Il contient des paramètres pour activer/désactiver et définir la méthode d’expédition par défaut, comme indiqué ci-dessous :

• Afficher les méthodes d’expédition : Avec cette option, vous pouvez afficher/masquer les méthodes d’expédition sur la page de paiement. Pour cela, vous devez basculer le bouton de ON à OFF ou vice-versa.
• Style d’affichage : Cette option vous permet de sélectionner le style d’affichage des méthodes d’expédition que vous avez ajoutées à votre site Web. Vous pouvez choisir n’importe quel style parmi trois options : Texte uniquement, Image uniquement ou Texte avec images.
• Afficher le titre de la méthode d’expédition : Avec cette option, vous pouvez activer ou désactiver le titre des méthodes d’expédition affichées sur la page de paiement.
• Sélectionnez une méthode d’expédition par défaut : Cette option vous aide à sélectionner n’importe quelle méthode comme méthode d’expédition par défaut pour votre boutique.
• Titre: Avec cette option, vous pouvez définir des titres correspondant à chacune des méthodes d’expédition ajoutées et configurées pour votre boutique. Vous pouvez définir le titre en anglais ou en français.
• Logo: Cette option vous permet de définir le logo souhaité correspondant à chacune des méthodes d’expédition configurées pour votre boutique.

3.6 Expédier à Payer

La fonctionnalité ship2pay offerte par le module OpenCart Supercheckout désactive automatiquement les méthodes de paiement en fonction de la méthode d’expédition sélectionnée par le client. Autrement dit, l’administrateur peut mapper certaines options de paiement particulières avec certaines options d’expédition particulières sur le magasin.

Méthode de paiement 3.7

Cet onglet contient des paramètres pour les méthodes de paiement affichées sur la page de paiement, comme l’activation/la désactivation ou la sélection d’une méthode par défaut.

• Afficher les modes de paiement :�Par cette option, vous pouvez afficher/masquer les méthodes de paiement sur la page de paiement. Pour cela, vous devez basculer le bouton de ON à OFF ou vice-versa.
• Style d’affichage :Cette option vous permet de sélectionner le style d’affichage des moyens de paiement que vous avez ajoutés à votre site Web. Vous pouvez choisir n’importe quel style parmi trois options : Texte uniquement, Image uniquement ou Texte avec images.
• Sélectionnez un mode de paiement par défaut :Cette option vous aide à sélectionner n’importe quelle méthode comme méthode de paiement par défaut pour votre boutique.
• Titre:�Avec cette option, vous pouvez définir des titres correspondant à chacun des moyens de paiement ajoutés et configurés pour votre boutique. Vous pouvez définir le titre en anglais ou en français.
• Logo:Cette option vous permet de définir le logo souhaité correspondant à chacun des moyens de paiement configurés pour votre boutique.

3.8�Chariot

Sous cette section, vous trouverez les champs du panier divisés en deux sections, celle de gauche pour les clients invités et celle de droite pour les clients enregistrés ou connectés.

1. Pour afficher/masquer le panier depuis la page de paiement, décochez la case présente devant l’étiquette Afficher le panier.
2. Afin d’activer/désactiver n’importe quelle colonne du panier, cochez/décochez la case devant cette colonne respective.
3. Pour activer/désactiver les images contextuelles pour le produit, cochez/décochez la case devant la colonne correspondante.
4. Pour modifier la taille de la fenêtre contextuelle de l’image, entrez la largeur et la hauteur de la fenêtre contextuelle dans la zone de texte devant l’étiquette Taille de l’image du produit.
5. Les options Coupon, Points de récompense et Coupon peuvent également être désactivées ou activées en cochant/décochant la case devant ce champ respectif. Veuillez noter que la zone de texte des points de récompense ne sera visible sur la page Supercheckout qu’une fois les trois conditions suivantes 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 le panier qui peut être acheté avec des points de récompense.

Confirmer:

1. Cet onglet est à nouveau divisé en deux sections, celle de gauche pour les clients invités et celle de droite pour les clients enregistrés ou connectés.
2. Pour activer la case de commentaire pour la commande par client, cochez la case devant Laissez un commentaire pour l’étiquette de la commande et pour désactiver décochez la même case.
3. Pour activer l’acceptation du terme ou de toute autre information enregistrée dans l’administrateur du magasin, cochez/décochez la case devant J’accepte l’étiquette des conditions.

3.9 Onglet Conception

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

1 colonne

2 colonne

3 colonne

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

 

En outre, vous pouvez repositionner différents blocs de la page de paiement à l’aide d’une simple action de glisser-déposer. Lors de l’enregistrement, le bloc sera réorganisé dans la page de paiement en fonction des modifications.

Bulletin d’information 3.10

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

• Activer MailChimp : Vous pouvez activer ou désactiver la fonctionnalité MailChimp Integrator pour votre boutique. Vous pouvez activer cette option si vous souhaitez augmenter les abonnements à la newsletter pour votre boutique.
• Clé API MailChimp : Cette option vous aide à définir la clé API Mailchimp pour capturer les e-mails des clients.
• Liste MailChimp : Une fois la clé configurée avec ceci�Extension de paiement rapide OpenCart, vous pouvez récupérer et sélectionner la liste MailChimp.

La même chose peut être faite pour SendinBlue et Klaviyo.

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

Lorsque l’utilisateur clique sur le bouton “Ajouter au panier” correspondant à un produit et effectue son paiement, il verra le super paiement suivant sur son écran.

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

Démo d’administration OpenCart One Page Checkout : https://opencartdemo.knowband.com/demo/index.php?module=oc_onepagecheckout_knowband&demo=admin&lang=en

Démo d’OpenCart One Page Checkout Front: https://opencartdemo.knowband.com/demo/index.php?module=oc_onepagecheckout_knowband&demo=front&lang=en

Paiement d’une page OpenCart sur le marché officiel d’OpenCart : https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=15353