Maintenant que vous maîtrisez WordPress, votre but est à portée de main.

Le Cahier-08 du cours NethServer-101 décrit:

1. L'installation et la configuration de WooCommerce, l'extension mondialement la plus utilisée pour le commerce électronique.
2. La création d'un compte gratuit PayPal pour percevoir vos paiements et la vérification du fonctionnement de l'achat de vos articles en utilisant les modes “Sandbox” puis, “Live”.
3. La création d'un compte gratuit Stripe, le principal compétiteur de PayPal, l'installation de sa passerelle de paiements et la vérification du fonctionnement de l'achat de vos articles en utilisant les modes “Test” puis, “Live”.

Référence: https://fr.wikipedia.org/wiki/WooCommerce.
WooCommerce est une extension LIBRE pour WordPress permettant de créer une boutique en ligne. Cette extension est conçue pour les petites et grandes entreprises faisant du commerce en ligne en utilisant WordPress. Lancée le 27 septembre 2011, l'extension est rapidement devenue célèbre pour sa simplicité d'installation et de personnalisation.

Le Cours NethServer-101, se voulant une base solide pour la création d'un site de Commerce en ligne, comprend plusieurs cahiers:

1. Cahier-01: → Les bases de Linux.
2. Cahier-02: → Installation et configuration des logiciels prérequis sur le poste de travail.
3. Cahier-03: → Création d'un Serveur NethServer virtuel.
4. Cahier-04: → Serveur NethServer LOCAL & Let's Encrypt.
5. Cahier-05: → FAI, modem VDSL, domaine FQDN¹⁾ et Serveur NethServer physique.
6. Cahier-06: → Installation de WordPress.
7. Cahier-07: → Installation de l'extension de sécurité Wordfence.
8. Cahier-08: → WooCommerce, comptes chez Stripe et PayPal pour les paiements en ligne.
9. Cahier-09: → Sauvegarde/restauration ou migration d'un site avec l'extension Duplicator.
10. Cahier-10: → Serveur mandataire inversé.
11. Cahier-11: → Sauvegarde/restauration avec BackupPC.

Tous les logiciels nécessaires sont du domaine public ou LIBRE sous licence GPL; ils ne coûtent pas un sou. Le seul achat nécessaire est l'obtention d'un nom de domaine au prix initial de $15 CAD et son renouvellement annuel d'environ $30 CAD.

Après avoir suivi le Cours NethServer-101, vous posséderez un site de Commerce en ligne fiable et hautement sécuritaire. De plus, vous pourrez utiliser un clone de votre site, sur un Serveur NethServer virtuel roulant sur votre poste de travail, pour tester de nouvelles extensions et applications sans compromettre la sécurité ou l'intégrité de votre site en ligne.

* Les captures d'écrans ne sont que des références.
** Les informations écrites ont préséance sur celles retrouvées dans les captures d'écrans. Veillez vous référer aux différents tableaux lorsque ceux-ci sont présents.
*** Une capture d'écran avec une accentuation en magenta indique qu'il faut remplacer cette distinction par vos propres paramètres ou implique un choix laissé à votre appréciation.

Manipulation, truc ou ruse pour se tirer d'embarras.
Une recommandation ou astuce.
Une note.
Une étape, note ou procédure à surveiller.
Paragraphe non complété ou non vérifié.
Danger pour la sécurité du système.

Toutes les commandes à la console ou à travers PuTTY sont précédées d'une invite qui est toujours présente.

[root@dorgee ~]# ping 10.10.10.75 -c1

PING 10.10.10.75 (10.10.10.75) 56(84) bytes of data.
64 bytes from 10.10.10.75: icmp_seq=1 ttl=64 time=1.63 ms

--- 10.10.10.75 ping statistics ---
1 packets transmitted, 1 received, 0% packet loss, time 0ms
rtt min/avg/max/mdev = 1.639/1.639/1.639/0.000 ms
[root@dorgee ~]#

Commande à exécuter si ce n'est déjà fait.

Commande indiquée à titre d'information seulement.

1. Serveur NethServer actuel
   Nous utilisons le même système que celui du cours Cahier-07: NethServer, WordPress & Wordfence.

1. WordPress
   Référence: https://wordpress.org/about/requirements/.
   WordPress requière la version 7 pour PHP et recommande la version 7.3.

1. Wordfence
   Référence: https://www.wordfence.com/help/advanced/system-requirements/.
   Wordfence requière la version 5.3 minimum pour PHP et recommande la version 7.2.

1. Let's Encrypt
   On installe un certificat Let's Encrypt selon le Cahier-04: NethServer LOCAL & Certificat Let's Encrypt.

[root@tchana ~]# scl -l

php56
php70
php71
php72
php73
rh-mariadb102
[root@tchana ~]#

Chemin.

[root@tchana ~]# which php

/opt/remi/php72/root/usr/bin/php
[root@tchana ~]#

Version (on utilise la version 7.2, car 7.3 semble occasionner des problèmes avec certains logiciels).

[root@tchana ~]# php --version

PHP 7.2.15 (cli) (built: Feb  5 2019 18:05:51) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies
[root@tchana ~]#

[root@tchana ~]# config show php72

php72=configuration
    AllowUrlFopen=On
    ExposePhp=0
    MaxExecutionTime=30
    MaxFileUpload=20
    MaxInputTime=60
    MemoryLimit=250
    PostMaxSize=100
    UploadMaxFilesize=75
[root@tchana ~]#

Comme on le voit ci-dessus, les grandeurs maximales sont de 250M, 100M et 75M. Leurs relations ont été respectées: MemoryLimit (250M) > PostMaxSize (100M) > UploadMaxFilesize (75M).

Il faut toujours utiliser mysql102 ou mysqladmin102 pour toute les manipulations de MariaDB.

Chemin et version.

[root@tchana ~]# mysql102 --version

/opt/rh/rh-mariadb102/root/usr/bin/mysql  Ver 15.1 Distrib 10.2.8-MariaDB, for Linux (x86_64) using  EditLine wrapper
[root@tchana ~]#

Pour le bon fonctionnement de WooCommerce, il nous faut quatre utilisateurs: paiement-stripe, paiement-paypal, acheteur-test et acheteur.

Les deux principaux utilisateurs: paiement-stripe et paiement-paypal sont les gestionnaires des comptes chez les fournisseurs de paiements par internet Stripe et PayPal. Ils ont besoin d'une adresse de messagerie pour recevoir les courriels de ces fournisseurs de paiements.

Les deux autres utilisateurs: acheteur-test et acheteur sont nécessaires pour faire des tests d'achats. Ils doivent avoir accès à une adresse de messagerie pour recevoir la confirmation du paiement par leur institution bancaire ou tout autre fournisseur de paiement en plus des courriels du statut de leur achat sur notre site de Commerce en ligne.

Nous commençons par tester l'installation de notre premier site de Commerce en ligne sur notre serveur virtuel LOCAL qui peut envoyer des courriels vers l'Internet mais qui, malheureusement, ne peut en recevoir depuis ce dernier.

Même si nous utiliserions notre serveur principal comme mandataire inversé, ça ne résoudrait pas le problème. En effet, un mandataire inversé établit une communication vers un serveur Web LOCAL et non pas vers un serveur de messagerie.

Pour contourner le problème, nous créerons les quatre utilisateurs obligatoires sur notre serveur passerelle dorgee.micronator-101.org qui lui, est branché directement à l'Internet et donc, n'a aucune difficulté à recevoir tous types de courriels depuis n'importe où.

On donne toujours des mots de passe robuste.

L'usager paiement-stripe servira à la création et à la gestion d'un compte Stripe.

On se connecte à l'interface Web de notre serveur passerelle dorgee.micronator-101.org et on crée l'utilisateur paiement-stripe.

Gestion → Utilisateurs et groupes → onglets Utilisateur → CRÉER NOUVEAU.

On entres les informations demandées → SOUMETTRE.

Au retour, on vérifie l'orthographe de l'adresse courriel.

L'usager paiement-paypal servira à la création et à la gestion d'un compte PayPal. On répète les opérations précédentes pour la création de cet usager.

L'usager acheteur-test fera les achats en Mode TEST. On répète les opérations précédentes pour la création de cet usager.

L'usager acheteur effectuera des achats réels sur notre site de Commerce en ligne. On répète les opérations précédentes pour la création de cet usager.

On vérifie l'orthographe de toutes les adresses courriel.

On se connecte à WordPress sur notre domaine LOCAL:

On peut vérifier s'il existe des mises à jour de WordPress ou de ses thèmes/extensions et si oui, on les installe.

Le thème Storefront est gratuit et est recommandé par WooCommerce.

Les autres thèmes fonctionnent très bien, mais certains n'affichent pas correctement les produits.

Avant d'installer WooCommerce, s'assurer que le thème Storefront Enfant soit installé et activé; sinon, voir le paragraphe CSS et Thème enfant dans le Cahier-06: NethServer, & WordPress.

Pour une protection juridique minimale, il est préférable d'avoir une page énonçant les conditions de vente sur notre site WooCommerce.

Tableau de bord → Pages → Ajouter → on écrit notre page.

On vérifie notre page en cliquant le bouton:

Il est préférable d'avoir une page énonçant notre Politique sur la vie privée aux clients qui achètent des articles sur notre site WooCommerce.

Tableau de bord → Pages → Ajouter → on écrit notre page.

On vérifie notre page en cliquant le bouton:

- Tableau de bord → Pages → Ajouter → on écrit notre page.

- On ne coche pas Exclude this page from menu.

On vérifie notre page en cliquant le bouton:

Page permettant aux visiteurs de nous contacter.

- Dans le Cahier-06: NethServer & WordPress, nous avons créé un Formulaire de contact.

- On vérifie notre page en se rendant à: https://www.micronator-dev.org/nous-contacter/.

Toutes nos pages indispensables sont prêtes.

Avant d'installer WooCommerce, il nous faut créer un Compte business chez PayPal pour pouvoir effectuer des tests d'achats.

Les pages chez PayPal peuvent varier avec le temps, mais les principes demeurent les mêmes.

Se rendre à l'adresse: https://www.paypal.com/ca/webapps/mpp/home?locale.x=fr_CA.

Ouvrir un compte.

Ouvrir un compte business.

Premiers pas.

Entrer l'adresse courriel de celui qui s'occupera du compte PayPal → Suivant.

Entrez les informations demandées.

Lisez les Conditions d'utilisation et tous les Règlement(s) → si vous les acceptez, cochez En cochant la case… → Valider et continuer.

- Dérouler le premier menu et choisir Particulier.
- Entrer les informations demandées → Continuer.

Entrer les informations demandées → Soumettre.

Récapitulatif.

Vu que notre serveur WooCommerce est LOCAL (sur le réseau LOCAL du serveur principal et que ce dernier lui sert de passerelle), l'utilisateur paiement-paypal doit utiliser https://www.serveur-principal/webmail c.-à-d. https://www.micronator-101.org/webmail, car c'est la passerelle qui recevra les courriels pour le serveur LOCAL.

- L'utilisateur paiement-paypal se connecte à Webmail et ouvre le courriel de PayPal.
- Compléter les informations maintenant.

- L'utilisateur paiement-paypal est dirigé vers le site PayPal pour se connecter et en­tre son mot de passe.
- Connexion.

Il choisit son pays → Continuer.

La page principale apparaît.

- Cliquer l'icône de messages.
- Confirmer l'adresse courriel.

- L'adresse courriel n'est pas encore confirmée.
- Cliquer l'icône Mes préférences.

Prendre en note l'Identifiant de compte marchand, il est obligatoire pour communiquer avec PayPal pour discuter d'une question quelconque.

Confirmer cette adresse de courriel.

Le message de l'Adresse de courriel change pour nous avertir de consulter nos courriels.

- paiement-paypal@micronator-101.org vérifie ses courriels.
- Cliquez ici pour activer votre compte.

- paiement-paypal entre son mot de passe.
- Confirmer mon adresse courriel.

- Entrer les informations demandées.
- Soumettre.

Cliquer l'icône Mes préférences.

Le compte est activé et l'adresse courriel confirmée.

Enregistrer votre compte bancaire peut lier un compte bancaire au compte PayPal pour faire des virements depuis PayPal vers ce compte bancaire. (Nous laissons ce choix à votre discrétion.)

On s'assure que tout fonctionne correctement.

Déconnexion/reconnexion.

Tout est fonctionnel.

Référence: https://developer.paypal.com/webapps/developer/docs/classic/api/apiCredentials/#creating-classic-api-credentials.
Une API permet aux logiciels PayPal de communiquer avec votre boutique en ligne ou Panier.

Vous devez fournir un ensemble d'informations d'identification valides API lors des appels à des opérations de l'API PayPal. Ceci permet à PayPal de vérifier le compte qui effectue les appels.

Les informations d'identification se composent d'un Identifiant API, d'un Mot de passe API et d'une une Signature PayPal qui génèrent un ensemble unique d'informations d'identification pour chaque compte admissible PayPal.

Vos comptes Sandbox et vos comptes PayPal Business ou Premier ont différentes informations d'Identification API, assurez-vous d'utiliser le bon jeu lors de tests!

- On retourne à notre compte chez: https://www.paypal.com.

- Cliquer l'Icône Mes Préférences → Mes outils de vente.

- Vis-à-vis Accès à L'API → Mise à jour.

Parce que WooCommerce fonctionne sur notre propre serveur et qu'il s'occupe lui-même du Panier alors, vers le bas de la page, sous: Intégration d'API NVP/SOAP (classique),
cliquez Gérer les informations d'authentification API.

- Choisissez Demander une signature API…

- Si vous acceptez les Conditions d'utilisation de l'API, cliquez Accepter et envoyer.

Sur la page des informations d'authentification, cliquez Afficher pour faire apparaître le Nom, le Mot de passe et la Signature de l'API.

Pour les conserver, on peut sélectionner ces données, les copier et les entrer dans un fichier texte.

On peut aussi pendre une capture d'écran pour pouvoir con­server une copie de ces informations très sensibles.

Conserver les informations d'authentification en lieu sûr ayant un accès restreint.

Terminé pour fermer la fenêtre.

Nous utiliserons ces informations (Nom d'utilisateur API, Mot de passe API et Signature) lors de la configuration de PayPal sous l'onglet Commandes de WooCommerce, voir le paragraphe PayPal.

Plus tard, si on veut revoir ces informations,

On se logue avec notre compte chez: https://www.paypal.com.

Cliquer l'icône Mes Préférences.

Mes outils de vente.

Mettre à jour.

Gérer les informations d'authentification API.

À la fenêtre des informations d'authentification, cliquer Afficher pour voir le paramètre désiré.

Pour refermer la fenêtre, cliquer Terminé.

On se déconnecte de notre compte PayPal.

Référence: https://www.paypal.com/fr/cgi-bin/webscr?cmd=_ipn-test-about-outside.

Il est important de tester l'intégration IPN (Instant Payment Notification) avant de vous lancer en “Mode RÉEL/LIVE”.

L'Environnement de test PayPal offre un environnement permettant d'effectuer des tests sans utiliser de transactions réelles de paiement. Il est également judicieux de tester le système PayPal en ligne avant de l'exploiter sur votre site.

L'Environnement de test PayPal permet de tester la plupart des aspects du système PayPal incluant la Notification Instantanée de Paiement.

Marche à suivre (voir plus bas) pour effectuer un test d'achat sur l'Environnement de test:

1. Créez un compte développeur dans l'Espace Intégration http://developer.paypal.com.

2. Créez un compte Personal dans l'Environnement de test et ajoutez une carte bancaire.

3. Créez un compte Business dans l'Environnement de test puis, ajoutez et confirmez un compte bancaire.

4. Dans les contenus de votre bouton PayPal et du script de gestion NPI, utilisez l'URL https://www.sandbox.paypal.com/cgi-bin/webscr là où vous utiliseriez normalement https://www.paypal.com/cgi-bin/webscr.

5. Procédez à un paiement en utilisant le courriel et le mot de passe du compte Personnel pour la connexion.

Dans l'Environnement de test de l'API PayPal, tous les participants à des transactions (utilisateurs test) sont fictifs et ne possèdent pas de comptes réels. Pour en tenir compte, l'Environnement de test comporte un système spécial de courriel intégré. Chaque développeur de l'API PayPal possède une boîte aux lettres dans laquelle tous les messages par courriel adressés à des utilisateurs de tests sont envoyés. Un développeur (administrateur PayPal) ne voit que les courriels adressés aux utilisateurs de tests qui lui sont associés. Les courriels adressés à tous les utilisateurs de tests associés à un développeur apparaissent dans la même boîte aux lettres.

Pour voir vos courriels dans l'Environnement de test, connectez-vous à l'Espace Intégration à l'adresse https://developer.paypal.com et cliquez sur l'onglet “Email”. Les courriels générés par votre Environnement de test se trouvent sur cette page. Pour en savoir plus, consultez le PDF Guide d'intégration de PayPal Intégral Évolution (en français), chapitre 6, Tester votre intégration dans l'Environnement de test.

Les pages du Bac à sable chez PayPal peuvent varier avec le temps, mais les principes demeurent les mêmes.
Nous avons déjà créé un compte Professionnel PayPal. Il n'est pas nécessaire de créer un nouveau compte pour le site des développeurs. Nous pouvons utiliser notre justificatif d'identité de notre compte créé au paragraphe Compte PayPal.

- On se rend au site: https://developer.paypal.com/.
- Cliquer Log into Dashboard.

Entrer l'adresse courriel et le mot de passe donnés lors de la création du compte ci-dessus → Log In.

Dashboard.

- On vérifie qu'on est bien chez https://developer.paypal.com/.

- On clique Accounts.

PayPal créé deux comptes usagers lors de la première connexion à un compte Sandbox.

Nous allons en créer un nouveau “Personal” qui sera un utilisateur de notre site WooCommerce et qui est aussi déjà un usager sur notre Serveur NethServer.

- On clique Create Account.

Attention aux erreurs de frappe.

On entre les informations demandées… (sans accents).

999 → Yes → Visa → Create account.

Le nouveau compte acheteur-test@micronator-101.org a été créé avec succès.

On clique l'adresse pour développer et faire apparaître les onglets → Profile.

Sous l'onglet Profile, si on veut changer le mot de passe, le nouveau doit être différent du précédent.

- Funding (détails de la carte de crédit).
- On utilisera ces données pour les achats.

Pour la marche à suivre pour fermer un compte PayPal, voir la section: Fermeture d'un compte PayPal.

Référence: https://fr.wikipedia.org/wiki/WooCommerce

Si nous ne sommes pas connectés à notre Serveur NethServer LOCAL, on se logue à: https://www.micronator-dev.org.

Tableau de bord → Extensions → Ajouter.

Mot-clé → WooCommerce.

Installer.

Activer.

- Extension non-nécessaire.
BEAUCOUP TROP INTRUSIF, lisez la licence et vous serez de notre avis…
- Passer cette étape.

- On peut changer le contact pour la réception de conseils et sources d'inspiration.
- On peut consulter le guide vidéo ou pour bien commencer.
- Se rendre sur le Tableau de bord.

- Le premier message peut être supprimé, car c'est une première installation.

- Pour WooCommerce Products Block, votre choix. Nous sommes vieux jeu et préférons l'éditeur classique: (Ignorer).

- Plus loin, nous nous occuperons de la configuration de Stripe.
- Fermer cette fenêtre.

Sur l'Accueil du Tableau de bord, en bas de la page à gauche, deux panneaux ont été ajoutés par WooCommerce.

1) WooCommerce Avis Récents.

2) État de WooCommerce.

L'extension WooCommerce est installée et activée.

Nous allons configurer WooCommerce pour la vente de produits standards, de produits téléchargeables et de livres qui eux, ne sont pas taxables s'ils possèdent un numéro ISBN.

Avant toute chose, il nous faut configurer les images.

Tableau de bord → Réglages → Médias → ajuster les tailles telles que ci-contre.

On s'assure que Recadrer les images… est coché.

On s'assure des valeurs ci-contre sinon, modifier et Enregistrer les modifications.

Tableau de bord → Apparence → Personnaliser → WooCommerce.

Images de produit.

Non recadrée → Publier → X.

- WooCommerce → Réglages → onglet Général.

- Cliquer Ignorer pour sup­pri­mer le message.

- On vérifie/corrige l'adresse de notre Boutique.

On ajuste:

● Emplacement(s) de vente

● Emplacement(s) de livraison

● Adresse client par défaut
Plus loin, après l'enregistrement des réglages, nous vérifierons la Géolocalisation.

☑ Activer le calcul et le coût des taxes

☑ Activer l'utilisation de codes promo

● Devise

● Position devise

Si nous avons changé un paramètre, Enregistrer les changements.

On s'assure du succès de l'opération.

On vérifie si la base de données GeoLite2-Country.mmdb²⁾ pour la Géolocalisation a bien été téléchargée.

[root@dev ~]# ls -als /var/www/html/wp-content/uploads/*Lite2*

3612 -rw-r--r-- 1 apache apache 3696547  3 mars  16:16 /var/www/html/wp-content/uploads/GeoLite2-Country.mmdb
[root@dev ~]#

La base de donnée (.mmdb - MaxMind database) a bien été téléversée.

WooCommerce utilise cette BD pour connaître l'emplacement des clients.

Référence: https://fr.wikipedia.org/wiki/GeoIP.
GeoIP est une technique de Géolocalisation visant à localiser un utilisateur en se basant sur son adresse IP.

Une adresse IP n'intègre pas d'information géographique de manière intrinsèque. Il est donc nécessaire de passer par une table de conversion, sorte d'annuaire, recensant l'ensemble des plages d'adresses IP existantes et les faisant correspondre à une région géographique. Ces tables sont compilées par des sociétés commerciales.

Les tables les plus précises descendent au niveau de la ville. Il est à noter qu'il s'agit généralement de la ville où le fournisseur d'accès Internet a placé ses points d'accès.

Pour les sites de commerce électronique, la localisation des visiteurs de votre site est particulièrement importante pour le calcul du taux des taxes. En outre, elle est également importante si vous vendez un article qui pourrait être illégal dans certaines régions.

Dans ce but, la sensibilisation à la géolocalisation, c'est-à-dire la possibilité de prendre connaissance par programmation de l'emplacement d'un visiteur, par pays, région ou même longitude et latitude, peut jouer un rôle important.

Il est très important, lors de tests d'achats, de fournir une adresse réelle et vérifiable, car WooCommerce s'en remet à l'adresse fournie pour le calcul des taxes applicables. S'il ne peut vérifier votre ville ou état (province), il prendra le code du pays et il se pourrait que dans votre ville ou dans votre état, une taxe particulière s'applique ou non et ainsi, il en tiendra compte ou non - très difficile à déverminer.

Cliquer Ignorer pour supprimer le message.

● Page boutique
Prendre les défauts.

● Image indicative
ID de pièce jointe ou URL d'image utilisé pour les paramètres fictifs des images dans le catalogue de produits. Les produits sans image l'utiliseront.

● Dimensions
Unité de poids kg
Unité de dimensions cm

● Notations produit
Si on le désire, on peut Activer les notes sur les avis.

Enregistrer les changements si on a changé au moins un paramètre.

On s'assure du succès de l'o­pé­ration.

Si on vend plusieurs articles, on peut savoir la quantité de stock disponible en cochant Activer la gestion du stock.

Pour débuter avec les tests dans Sandbox, il est préférable d'avoir le moins d'options possibles pour éviter les erreurs en cas de mauvaise configuration. C'est pour cette raison qu'il est recommandé de ne pas activer la Gestion du stock tout de suite.

● Destinataire(s) de(s) notifi­ca­tion(s)
Il n'est pas nécessaire que l'adresse courriel soit la même que celle de l'administrateur de la Sandbox.
On peut ajouter paiement-paypal@micronator-101.org en le précédent d'une virgule (,).

Enregistrer les changements si on a changé un paramètre.

On s'assure du succès de l'o­pé­ration.

Prendre les défauts.

Enregistrer les changements si on a changé un paramètre.

On s'assure du succès de l'o­pé­ration.

● Classes additionnelles des TVA
On ajoute une nouvelle classe Taxe sur livre pour la vente de livres, car il n'y a pas de taxe de vente provinciale (TVQ) sur ceux-ci s'ils possèdent un numéro ISBN.

● Affichage des tarifs dans la boutique
→ HT.

● Affichage des tarifs sur le panier et la page commande
→ HT
pour pouvoir visualiser les taxes avant le paiement.

● Affichage des totaux de TVA
→ Détaillé.

Enregistrer les changements.

On s'assure du succès de l'o­pé­ration.

Après avoir enregistrer les changements, un nouveau menu est créé pour la Taxe sur livre.

On peut vérifier les taux actuels en allant sur le site: http://www.retailcouncil.org/quickfacts/taxrates.

Le Cahier-08 vient avec les deux fichiers suivants:

● TVH_TPS_TVQ_2018-03-30.csv contient les taxes pour tout le Canada. On importera ce fichier au prochain paragraphe.

● TVH_TPS_TVQ_2018-03-30_SHA-1.txt est la somme de contrôle SHA-1 du fichier csv.

Télécharger ces fichiers sur le poste de travail. Au prochain paragraphe, vous les téléverserez dans le répertoire approprié sur le Serveur NethServer.

En date du 24 juin 2019, les tarifs des taxes sont demeurés les mêmes.

S'assurer que JavaScript est activé pour le téléversement.

Onglet TVA → Taux standards → Import CSV.

Parcourir…

Sélectionner le fichier → Ouvrir.

Tableau de bord WordPress → WooCommerce → Réglages → onglet TVA → Taux standards.

TVH: Taxe de Vente Harmonisée, TPS: Taxe sur les Produits et Services et TVQ: Taxe de Vente du Québec.

La Priorité de la TVQ est de 2 et signifie que la TPS sera calculée en premier et ensuite la TVQ.

Au Québec, les taux de la TPS et de la TVQ ne sont pas cumulables; elles s'appliquent uniquement sur le total des achats c.-à-d. que la TVQ ne s'applique pas sur le cumulatif de: (Achat + TPS), mais sur Achat seulement.

Voilà, le taux des taxes est terminé et il n'y aura pas d'intrusion sur notre site et personne ne pourra venir y fouiner. Ce qui ne serait pas le cas si, lors de l'installation, nous avions choisi Taxes automatisées au paragraphe Expédition et Recommandé.

Nous rappelons encore une fois: il est très important, lors de tests d'achats, de fournir une adresse réelle et vérifiable, car WooCommerce s'en remet à l'adresse fournie pour le calcul des taxes applicables. S'il ne peut vérifier votre ville ou état (province), il prendra le code du pays et il se pourrait que dans votre ville ou dans votre état, une taxe particulière s'applique et ainsi, il n'en tiendra pas compte - très difficile à déverminer.

N'est pas utilisé.

N'est pas utilisé.

Livre imprimé

Référence: https://www.revenuquebec.ca/fr/citoyens/taxes/biens-et-services-taxables-detaxes-ou-exoneres/tps-et-tvq/autres-situations/livres/.
La vente d'un livre imprimé qui comporte un numéro international normalisé du livre (ISBN) est détaxé dans le régime de la TVQ. Cependant, dans le régime de la TPS, cette vente est taxable et peut, dans certaines circonstances, faire l’objet d’un remboursement.

La livraison de tout livre est taxable.

Insérer ligne → entrer les informations telles que ci-dessous pour la TVQ-LIVRE → répéter pour la TPS → Enregistrer les changements.

Seulement la TPS sera appliquée sur les livres et 0% sera indiqué pour la Taxe de Vente du Québec.

Pour nos tests, nous avons des taux fixes de livraison: $15 pour le Canada et $25 pour l'international.

Lors de l'installation de WooCommerce, deux zones ont été créées par nos configurations au paragraphe Expédition et Recommandé.

On examine la Zone d'expédition pour le Canada.

Onglet Expédition → Zone d'expédition → on survole Canada → Modifier.

- Le Mode d'expédition est Activé.
- On survole Forfait → Modifier.

- Les réglages s'affichent et on peut les modifier → Enregistrer les modifications.
- Ou, on peut fermer (X) et retourner à Zone d'expédition.

De la même manière on peut examiner/modifier l'autre Forfait en survolant Emplacements non couverts par vos autres zones → Gérer les méthodes d'expédition.

Calculs

Destination de la livraison

Enregistrer les changements.

Pour plus de détails, voir: https://docs.woocommerce.com/document/table-rate-shipping/.

Nous n'utilisons pas: Virement bancaire, Paiements par chèque et Paiement à la livraison. Vous pouvez les activer. À votre choix.

Vis à vis PayPal, glisser le bouton vers la droite pour l'activation → Configuration.

☑ Il faut aussi toujours cocher Activer PayPal standard.

● On entre un Titre.

● Il faut entrer le bon courriel pour E-mail PayPal, le même que nous utilisons pour administrer notre compte PayPal.

☑ Cocher Activer PayPal sandbox pour effectuer des achats de TEST avant de faire de vraies transactions.

☐ Cocher Activer l'enregistrement de logs seulement pour le déverminage, en cas de problème.

☑ Notification IPN par e-mail, on coche ce paramètre.

● E-mail du destinataire est l'adresse courriel de celui qui recevra les notifications après une vente. Il est impératif que l'adresse courriel pour E-mail du Destinataire soit la même que celle de E-mail PayPal du gestionnaire du compte PayPal sinon, les acheteurs de produits téléchargeables ne recevront pas leurs liens de téléchargement après leur paiement et la commande restera figée à En Cours.

● Préfixe de la facture, au choix.

● Action de paiement, il faut Capturer sinon, les clients attendront qu'on valide la commande pour recevoir leur lien de téléchargement après leur paiement.

● C'est ici qu'on entre les Informations d'identification API voir Création d'une signature API.

Si le paramètre Activer PayPal sandbox est coché, les informations API sont Optionnelles

→ Enregistrer les changements.

Les configurations ci-contre sont celles que nous utilisons pour notre propre boutique.

Pour la configuration de la Page Politique de confidentialité, on choisit notre page Vie privée créée au paragraphe Vie privée.

Les configurations ci-contre sont celles que nous utilisons pour notre propre boutique.

Enregistrer le modifications.

Sous l'onglet E-mails, le destinataire est l'adresse courriel, c.-à-d. celle de l'administrateur du site de Commerce en ligne.

On ajuste les différents paramètres.

- On peut désactiver ce courriel. (Non recommandé.)
- Destinataire: adresse courriel de l'administrateur du site.
- On peut modifier les modèles des courriels.
→ Enregistrer les changements.
- On clique l'icône de retour, à la fin de la ligne Nouvelle commande.

Lors d'une nouvelle commande, l'usager administrateur du site recevra un courriel indiquant qu'un client à généré une nouvelle commande.

On est de retour à la page de l'onglet E-mails.

On est toujours sur la page de l'onglet E-mails.

Comme image d'en-tête, nous allons prendre note logo utilisé pour l'image d'en-tête de notre site du Cahier-06: NethServer & WordPress à la section Logo et slogan.

Pour l'image d'en-tête, il faut obligatoirement spécifier le chemin complet en utilisant: https://www.micronator-101.org/Ut/… car les courriels aux acheteurs doi­vent pouvoir télécharger cette image depuis l'Internet pour l'afficher dans le courriel reçu.

C'est pourquoi, pour notre serveur LOCAL, nous utilisons une image stockée sur notre serveur principal.

→ Enregistrer les modifications.

Chemin complet de notre image d'en-tête: https://www.micronator-101.org/Ut/Images/EN-TETE/Logo_Micronator_Vers-Gauche_222x210_APT.png.

Au retour de l'enregistrement des modifications, on clique Cliquez ici pour prévisualiser votre modèle d’e-mail.

Notre modèle de courriel s'affiche tel que ci-contre.

Pour les Conditions générales de vente, on choisit la page du paragraphe Conditions de vente.

Si vous ne forcez pas WordPress à utiliser des connexions sécurisées, un paramètre supplémentaire va s'insérer dans de cadre.
Il suffit de cocher:
☑ Forcer la validation de commande en mode sécurisé (SSL).

On prend les paramètres par défaut.

On prend les paramètres par défaut.

→ Enregistrer les modifications si on a changé un paramètre.

N'est pas utilisé.

N'est pas utilisé.

N'est pas utilisé.

Tableau de bord WordPress | Réglages → Général.

Pour les nouveaux clients, on doit s'assurer qu'ils peuvent s'inscrire à notre site en tant que client (Customer).

→ Enregistrer les modifications.

On doit créer un usager acheteur-test dans WordPress. Ceci facilitera nos tests; on n'aura pas à toujours spécifier les informations d'acheteur-test à chacun de ses achats.

Partout, on lui donne le même mot de passe pour éviter toutes confusions; il est important qu'il ait exactement le même nom d'usager (Nom du compte) et la même adresse courriel que l'usager créé au paragraphe acheteur-test.

Tableau de bord → Utilisateurs → Ajouter.

On entre les informations demandées → Ajouter un utilisateur.

On s'assure que tout s'est bien déroulé.

L'administrateur du site reçoit un courriel annonçant qu'un nouvel utilisateur s'est inscrit.

On répète les opérations du paragraphe précédent pour l'utilisateur acheteur avec le prénom et nom: Acheteur Réel.

WooCommerce → Codes promo → Créer votre premier code promo.

- Menu Général.
- Entrer les informations demandées.

- Menu Restriction d'usage.
- Entrer les informations demandées.

- Menu Limites d'utilisation.
- Entrer les informations demandées → Publier.

Pour vérifier, on retourne à WooCommerce → Codes promo.

Pour afficher les commandes reçues: Tableau de bord → WooCommerce → Commandes.

Tableau de bord → WooCommerce → Rapports.

Très utile pour savoir l'état des commandes, les clients, les stocks de produits et les montants de TVA.

Pour connaître tous les environnements de notre système.

Tableau de bord → WooCommerce → État.

Extensions disponibles pour WooCommerce. La très grande majorité ne sont pas LIBRE.

Tableau de bord → WooCommerce → Extensions.

Nous n'avons pas vérifié cette extension. Utilisez à vos risques et périls.

https://fr.wordpress.org/plugins/canada-post-shipping-for-woocommerce/

Nous n'avons pas vérifié cette extension. Utilisez à vos risques et périls.

https://fr.wordpress.org/plugins/flexible-shipping-ups/

Nous créons une catégorie de produits multimédia.

Tableau de bord → WooCommerce → Produits → Catégories.

On entre les informations demandées.

- On ajoute une Description.
- On ajoute une image.
- Ajouter une nouvelle catégorie de produits.

On rafraîchit la page.

La nouvelle catégorie apparaît.

La catégorie Non classé est la catégorie par défaut. Elle ne peut être supprimée. Elle sera automatiquement attribuée aux produits sans catégorie.

Les fichiers PDF téléchargeables sont aussi considérés comme des biens-meubles physiques donc, taxables.

Nous allons créer une catégorie de produits Fichiers téléchargeables.

Tableau de bord → WooCommerce → Produits → Catégories.

On entre les informations demandées.

- Téléverser/Ajouter image.
- Ajouter une catégorie.

On rafraîchit la page.

La nouvelle catégorie apparaît.

On ajoute des images des pages du sommaire.

Ajouter des images à la galerie produit.

On choisit les images, on les insère, on entre les informations demandées → Ajouter à la galerie.

Les images apparaissent.

Parfois, on peut changer les dimensions des images. Voir: Dimensions des images. Il nous faut alors redimensionner toutes les images de notre site à l'aide d'une extension WordPress: Regenerate Thumbnails.

Référence: https://docs.woothemes.com/document/using-the-appropriate-product-image-dimensions/.

Avec le navigateur Google Chrome, sur notre site on clique BOUTIQUE → NethServer-101, Cahier-04: Internet et NethServer et enfin on claque sur l'image → Inspecter.

On voit que les dimensions originales, de l'image du produit emmagasinée dans le répertoire de WordPress, sont de 551 x 712 pixels.

Référence: https://fr.wikipedia.org/wiki/Pixel.
Le pixel (souvent abrégé px) est l'unité de base permettant de mesurer la définition d'une image numérique matricielle. Son nom provient de la locution anglaise “picture element” qui signifie “élément d'image”.

En langage CSS, l'unité pixel (px) a été dissociée du pixel matériel afin de pallier à la diversité croissante des résolutions d'écrans. Ainsi, lorsque la taille d'un élément CSS est exprimée en pixels, le rendu sera similaire quelle que soit la densité de pixels de l'appareil d'affichage. Le W3C définit le pixel comme 1/96 de pouce.

Afin de régénérer toutes les images emmagasinées par WordPress, nous allons installer l'extension Regenerate Thumbnails.

Tableau de bord → Extensions → Ajouter → Mot-clé → Regenerate Thumbnails.

Installer.

Activer.

À la section Compte PayPal, nous avons créé un compte PayPal. De plus, à la section Bac à sable PayPal, nous avons créé un environnement de test dans le but de vérifier si notre WooCommerce fonctionnerait correctement en Mode TEST. C'est le moment de vérifier le tout.

Si les communications depuis l'Internet vers votre serveur LOCAL passent par un serveur Mandataire inversé ou si votre serveur est directement branché à l'Internet et qu'il possède un FQDN défini chez un registraire de domaine, vous n'avez aucun problème et vous pouvez passer directement au paragraphe Vérification des paramètres de test.

Nous ne voulions pas mettre en péril notre serveur principal et pour cette raison, nous avons utilisé un Serveur Virtuel, sous Oracle VirtualBox, pour pouvoir effectuer nos achats de tests en toute confiance.

Lorsque tout fonctionnera correctement, nous effectuerons les mêmes opérations sur notre serveur de Production branché directement à l'Internet.

† Non-réception de la Notification Instantanée de Paiement de PayPal

L'image de ce paragraphe provient de la version 1.0.0 de ce document.

À la Boutique, sur la page Mon Compte → Commandes récentes, la facture a été payée lors de l'achat, mais semblera devoir être payée encore une fois. Ceci est dû au fait que le serveur virtuel ou LOCAL ne reçoit jamais la Notification Instantanée de Paiement de PayPal lui indiquant que la commande a été payée.

On peut la payer plusieurs fois et elle affichera toujours le même statut.

†† Explication

Le client a alors été redirigé vers PayPal et il a payé sa commande. Lorsque la facture est payée, PayPal communique avec WooCommerce pour lui signifier que la commande a bel et bien été payée.

Si nous sommes sur un serveur LOCAL, celui-ci a une adresse IP privée telle que 192.168.1.75. L'adresse n'est pas publique et PayPal ne peut pas communiquer avec le serveur.

Le serveur LOCAL peut communiquer avec PayPal mais PayPal ne peut pas communiquer avec le serveur LOCAL à cause de son adresse IP privée. C'est pour cette raison que WooCommerce ne reçoit jamais la Notification Instantanée de Paiement.

††† Subterfuge

Les images de ce paragraphe proviennent de la version 1.0.0 de ce document.

Une solution à ce problème est de configurer le Serveur NethServer principal en mandataire inversé. Voir Cahier-10: Mandataire inversé.
Ne pas oublier que le Mandataire inversé ne redirige pas les courriels, mais seulement les requêtes html[s].
Lorsque le Serveur NethServer roulant WooCommerce possède un FQDN défini chez un régistraire, ce problème n'existe pas.

Tableau de bord → WooCommerce → Réglages → onglet Paiement → PayPal → Gérer.

On s'assure que nous avons activé PayPal Standard et PayPal Sandbox.

Il faut vérifier que l'adresse E-mail PayPal soit bien celle utilisée pour administrer notre compte PayPal.

Il est impératif que l'adresse courriel pour l'E-mail PayPal soit la même que celle de L'E-mail du Destinataire sinon, les acheteurs de produits téléchargeables ne recevront pas leurs liens de téléchargement après leur paiement et la commande restera figée à En Cours.

On peut demander à l'administrateur de nos boîtes de courriels de faire une redirection (alias de messagerie) de l'adresse courriel de l'administrateur du compte PayPal vers un autre destinataire.

Tableau de bord NethServer → Gestion → Adresses mail → onglet Alias de messagerie → CRÉER NOUVEAU.

Dans Sandbox, nous avons créé un usager de test: acheteur-test@micronator-101.org (voir: Création d'un usager de test) de type PERSONNAL. C'est cet usager qu'on pourra utiliser pour nos tests d'achat.

On se déconnecte de notre site WooCommerce.

Sur notre site on clique Boutique.

Sous Chromecast, on clique Ajouter au panier.

Voir Panier.

Valider la commande.

- Nous avons créé l'usager Acheteur Test à la section Création d'un utilisateur "acheteur-test" dans WordPress.
- Cliquez ici pour vous connecter.

Identifiant ou e-mail → Mot de passe → Connexion.

Les infos sont insérées automatiquement par WooCommerce.

On décoche Expédier à une adresse différente ?

Si on a lu et accepté les conditions générales, on coche J'ai lu et j'accepte les conditions générales.

Payer avec PayPal.

Si vous ne cochez pas J'ai lu et j'accepte les conditions générales, vous recevrez le message d'erreur ci-dessous.

Le client est redirigé vers un site sécurisé.

- Dans le cas de ce client particulier, nous lui avons déjà créé un usager dans le Sandbox de PayPal.
- On entre le mot de passe qu'on a donné à cet usager dans Sandbox → Log In.

- On coche Visa qui est la carte choisie au paragraphe Informations du compte et balance de la carte Visa.
- On coche Make this card my preferred way to pay.
→ Pay Now.

L'administrateur de notre site se connecte et se rend à Tableau de bord WordPress → WooCommerce → Commandes.

Il clique sur la commande.

Mettre à jour pour envoyer le courriel.

État de la commande avant l'expédition.

État de la commande après l'expédition.

Parce que notre site WooCommerce est sur un réseau LOCAL et non relié directement à l'Internet, l'utilisateur acheteur-test doit se loguer au site https://www.micronator-101.org/webmail (le serveur principal/passerelle) pour accéder à ses courriels envoyés par WooCommerce.

Courriel Nouvelle commande client à l'administrateur du site WooCommerce avant l'expédition.

Courriel de remerciement à l'a­che­teur avant l'expédition.

Courriel des détails de la facture à l'acheteur après l'expédition.

Si l'administrateur du site ou l'utilisateur acheteur-test est logué, il se délogue.

- Sur le site, on clique Boutique.
- Sous l'image du PDF, on clique Ajouter au panier.

Voir Panier.

Valider la commande.

- Vu que l'usager acheteur-test a déjà un compte sur notre site WooCommerce, il peut se connecter et ses coordonnées seront entrées automatiquement.
- Cliquez ici pour vous connecter.

Identifiant ou e-mail → Mot de passe → Connexion.

Les coordonnées du client sont entrées automatiquement par WooCommerce.

Les détails de la commande sont affichés.

Les liens de téléchargements ne sont pas affichés sur Détails de la commande. Plus loin, dans le courriel, ils le seront.

- L'administrateur du site change l'État de la commande à Terminée.
- Mettre à jour.

Dans la capture du centre, sous Détails de la commande, aucune adresse de livraison n'apparaît, car c'est un produit téléchargeable.
Avec un Serveur NethServer directement branché à l'Internet, l'administrateur du site n'aura pas à changer l'État de la commande; WooCommerce aura reçu la Notification IPN de PayPal et mettra lui-même la commande à Terminée.

Sur la page décrivant la commande, le nombre de téléchargements de chaque fichier est affiché. On peut aussi révoquer l'accès aux fichiers.

On vous laisse vérifier les commandes cancelées, remboursées, etc…

Pour s'assurer que tout fonctionne bien, nous allons faire un test d'achat réel.

Nous utiliserons l'usager “Acheteur Réel - acheteur@micronator-101.org” créé au paragraphe Création d'un utilisateur "acheteur" dans WordPress.

► Livraison

- Tableau de bord WordPress | WooCommerce → Réglages → Expédition → Zones d'expédition → Canada → Forfait → Coût.

► Désactivation du bac à sable

Tableau de bord WordPress → WooCommerce → Réglages → Paiement → PayPal Gérer.

► Informations d’identification API

► Cahier-04

Tableau de bord WordPress → Produits → NethServer-101, Cahier-04… → Modifier → Tarif régulier ($).

► Lecteur HDMI

Tableau de bord WordPress → Produits → Lecteur média HDMI Chromecast → Modifier → Tarif régulier ($).

► Nettoyage du Panier

Pas maintenant.

Retourner chez le marchand.

La commande est affichée.

Vu que nous sommes sur un serveur LOCAL, l'administrateur du site change l'État de la commande à En cours afin que WooCommerce envoie le courriel de notification d'une Nouvelle commande à l'administrateur du site et celui de Remerciement au client.

En cours → Mettre à jour.

De PayPal pour signaler le paie­ment.

De WooCommerce pour remercier le client de sa commande…

… et lui fournir les liens de téléchargements.

L'administrateur expédie la commande et change l'État de celle-ci à Terminée afin que WooCommerce envoie un courriel au client spécifiant que la commande est terminée.

Terminée → Mettre à jour.

Lorsqu'on fait des tests, il peut s'avérer nécessaire de fermer un compte PayPal afin de les recommencer.
Pour éviter toutes pertes, transférer les fonds présents sur votre compte PayPal vers votre compte bancaire ou votre carte de crédit avant de fermer votre compte.

On se logue chez PayPal → icône Préférences → Préférences et paramètres.

Mes paramètres → Fermer le compte → Continuer.

Après la fermeture d'un compte PayPal, il se pourrait qu'on vous téléphone pour discuter des raisons de cette fermeture.

Ce chapitre explique comment intégrer le système de paiements Stripe à l'extension WooCommerce de WordPress roulant sur un Serveur NethServer.
Ce chapitre provient de la version 1.0.1 de ce document. Quelques modifications légères ont été ajoutées pour la nouvelle version de l'extension.

Référence: http://www.journaldunet.com/ebusiness/commerce/john-collison-john-collison-stripe.shtml.

La start-up californienne, qui vient de lever 80 millions, permet aux marchands d'accepter les paiements en ligne par carte bancaire en deux temps trois mouvements. Son président détaille ses ambitions.

JDN Que propose exactement Stripe?

John Collison
Traditionnellement, les e-marchands qui voulaient pouvoir accepter des paiements par carte bancaire étaient obligés de travailler avec les banques et le processus était long et cher. Avec Stripe, c'est simple et rapide. Ils n'ont plus qu'à ajouter quelques lignes de code à leur site et cela fonctionne. C'est Stripe qui se charge des relations avec les banques.

Concrètement, nous éditons une suite d'API que le marchand intègre à son site Internet ou à son application mobile. Cela lui permet aussi de contrôler totalement l'expérience de l'utilisateur, qui n'est pas redirigé vers PayPal ou vers une page de paiement extérieur au site. Et Stripe ne permet pas juste d'accepter les paiements, mais aide aussi à optimiser la conversion, sait envoyer le paiement chez un marchand tiers lorsque l'utilisateur est une marketplace, etc. S'enregistrer prend 10 minutes, intégrer l'API et vérifier que tout fonctionne pas plus de 2 heures. Enfin, n'importe qui peut payer, pas besoin d'avoir un compte utilisateur. Contrairement à PayPal, Stripe a été conçu dès le début pour cet usage.

Qui sont vos clients?
Des entreprises de toutes tailles, comme Rackspace, Shopify, le quotidien britannique The Guardian, ou encore le Français Dailymotion, avec qui nous venons de signer. Dailymotion va utiliser Stripe pour accepter les paiements sur son produit de marque blanche Dailymotion Cloud. Nous travaillons aussi avec le gestionnaire français de mots de passe Dashlane.

Vous avez levé 80 millions de dollars fin janvier 2014. Qu'allez-vous en faire?
Nous avons une feuille de route extrêmement riche. Nous allons accélérer notre développement international, mais aussi ajouter de nouvelles fonctionnalités à notre solution. En particulier, il nous reste à accepter d'autres moyens de paiement que la carte bancaire, dont l'utilisation n'est pas majoritaire dans tous les pays. Plus largement, nous voulons développer des API dédiées au checkout, à la fraude… c'est-à-dire toute l'infrastructure qui soutient le paiement Web et mobile, à la façon de ce que propose AWS vis-à-vis de la construction de sites Web.

Où en est votre expansion internationale?
Pour l'instant notre solution est disponible auprès de marchands dans 12 pays : États-Unis, Canada, Royaume-Uni et Irlande, ainsi qu'en bêta en France, où nous allons nous lancer officiellement cette année, Espagne, Belgique, Luxembourg, Pays-Bas, Allemagne, Finlande et Australie. Travailler en bêta pendant quelques mois nous permet d'ajuster notre produit à chaque pays. Nous sommes arrivés tard sur le marché du paiement, il est donc primordial que nous proposions exactement le bon produit. C'est comme cela que nous avons procédé pour le Royaume-Uni et cela nous a réussi : Stripe croît 2,5 fois plus vite sur ce marché qu'aux États-Unis à son lancement. Nous allons réitérer ce schéma dans les autres pays et allons d'ailleurs embaucher des collaborateurs supplémentaires, aussi bien pour notre bureau de Londres que sur le continent. Au total nous sommes actuellement 90 personnes, contre 40 il y a un an et 15 en 2011.

Nous venons enfin d'étendre Stripe à 139 monnaies, ce qui permet aux marchands de nos 12 pays d'accepter des paiements effectués depuis une bonne partie de la planète.

Votre frère Patrick et vous avez déjà créé et revendu une société en 2008 pour 5 millions de dollars. Comment voyez-vous le futur de Stripe?
Nous pensons que le paiement constitue le dernier grand problème d'Internet. Communiquer est extrêmement facile, mais transférer de l'argent reste très compliqué. Avec Stripe, nous aidons les développeurs, les éditeurs de logiciels, les marchands et toutes sortes d'entreprises à accroître leur activité partout dans le monde. A ce jour moins de 5% des dépenses des consommateurs sont réalisées en ligne. Je ne sais pas si cette proportion finira à 50%, 60%, 70%, mais Stripe aide à la faire progresser, autant qu'à accroître la zone de chalandise des entreprises.

Stripe est encore très jeune. Il nous reste beaucoup à faire, c'est un projet de long terme. Patrick et moi ne nous voyons pas travailler sur un autre projet.

John Collison est le président de Stripe, qu'il a cofondé avec son frère aîné Patrick, CEO de la start-up. Nés en Irlande en 1988 et 1990, les deux frères fondent en 2007 Shuppa, qu'ils fusionnent avec Auctomatic en intégrant l'incubateur Y Combinator, dans la Silicon Valley. La société, qui édite des outils pour eBay, est rachetée 5 millions de dollars en mars 2008 par le Canadien Live Current Media. John Collison entre à Harvard en 2009 et cofonde Stripe en 2010 avec son frère. Depuis sa création, Stripe a levé un total de 130 millions de dollars, apportés par Sequoia Capital, Khosla Ventures et Andreessen Horowitz, ainsi que par les fondateurs de PayPal Elon Musk, Peter Thiel et Max Levchin.

Autre référence: http://www.zdnet.fr/actualites/paiement-en-ligne-visa-investit-dans-la-start-up-stripe-39822984.htm.
Visa vient de nouer un partenariat commercial avec la jeune pousse californienne Stripe tout en entrant dans son capital. Le montant de l’investissement n’a pas été dévoilé, mais l’opération valorise ce spécialiste du paiement en ligne à 5 milliards de dollars.

Après American Express, Stripe compte désormais Visa parmi ses investisseurs. Cette start-up californienne spécialisée dans le paiement en ligne a bouclé un tour de table inférieur à 100 millions de dollars auquel a donc participé Visa ainsi que Kleiner Perkins et d’autres investisseurs. L’opération valorise la jeune pousse à 5 milliards de dollars.

Stripe développe des solutions pour les cyber marchands et les développeurs d’applications qui leur permettent de déployer rapidement le règlement par carte bancaire. L’investissement de Visa s’accompagne également d’un partenariat commercial qui portera sur le développement de nouveaux services de paiement, la sécurité de ces solutions ainsi que l’expansion de Stripe sur des marchés émergents où Visa est bien implanté. (Eureka Presse)

Autre Référence: http://marketinghack.fr/les-logiciels-indispensables-vendre-en-ligne/. (Ce lien n'est plus fonctionnel.)
Stripe est un “must have” en matière de solution de paiement en ligne. Si vous me suivez depuis un bail vous savez déjà que vous devez tout de suite virer PayPal de votre site si vous désirez avoir plus de ventes… En gros, l’outil vous permet de booster vos ventes avec un tunnel de conversion super court. Les internautes cliquent sur le bouton acheter, ils saisissent leurs prénoms et leur email et cliquent sur un bouton pour valider. Là, un pop-up s’ouvre et il faut saisir ses infos de carte bancaires. On ne peut pas faire plus court en tunnel de conversion.

Installation de l'aiguilleur Stripe

Si nous n'avons pas choisi d'installer Stripe au paragraphe Configuration de la boutique et Paiement, on installe maintenant l'extension WooCommerce Stripe Payment Gateway.

Tableau de bord → Extensions → Ajouter.

Mot-clé WooCommerce Stripe Payment Gateway.

Installer.

Activer.

La version 4.1.14 de WooCommerce Stripe Payment Gateway est active.

L'extension WooCommerce Stripe Payment Gateway est installée et activée.

Nous allons utiliser le nom de l'utilisateur “paiement-stripe”, que nous avons créé au paragraphe paiement-stripe, pour créer un compte chez Stripe.

Il nous faut créer un compte personnel chez Stripe pour pouvoir effectuer un achat en Mode TEST ou en Mode LIVE/Réel.

On se rend à l'adresse: https://dashboard.stripe.com/login.

On attend de recevoir un courriel pour confirmer notre adresse.
Il est fortement recommandé d'attendre le courriel de confirmation, que vous devriez recevoir après quelques secondes seulement, pour vous assurer de n'avoir aucun problème lors de l'activation de votre compte.

► Activation du compte Stripe

► Your personal details

► Détails bancaires

On veut recevoir toutes les notifications que Stripe pourrait nous envoyer.

Icône → Profile.

On coche tout et on clique l'icône de retour.

Ces tests ne se font qu'avec un serveur directement connecté à l'Internet ou si le serveur est LOCAL, il faut que son serveur passerelle soit configuré en mandataire inversé (ce qui n'est pas notre cas).
Pour configurer le Serveur NethServer principal/passerelle en mandataire inversé pour le serveur LOCAL, voir le Cahier-10: Mandataire inversé.

Nous allons vérifier que Stripe peut communiquer avec l'extension WooCommerce Stripe Payment Gateway de notre site WordPress.

Webhooks.

Settings → Add endpoints…

► Mode Test

- On entre le nom de notre domaine.
- Choisir le Mode: Test.
- Send me all events.
- Create endpoint.

- http://www. est ajouté à notre nom de domaine.
- On clique encore Add webhook pour ajouter notre domaine pour le Mode Live.

► Mode LIVE

- On entre le nom de notre domaine.
- Choisir le Mode: Live.
- Send me all events.
- Create endpoint.

- http://www. est ajouté à notre nom de domaine.
- On clique Send test webhook…

► Test de webhook

- On choisit la dernière version.
- Send test webhook.

- On vérifie le succès de l'envoi
- Cancel.

L'API de demande de paiement est un système conçu pour éliminer les formulaires de paiement. Il améliore considérablement le flux de travail des utilisateurs au cours du processus d'achat en offrant une expérience utilisateur plus cohérente et en permettant aux marchands Web de tirer facilement parti des méthodes de paiement disparates. L'API de demande de paiement n'est pas une nouvelle méthode de paiement et ne s'intègre pas directement aux processeurs de paiement; il s'agit plutôt d'une couche du processus dont les buts sont:

1. Laisser le navigateur agir en tant qu'intermédiaire entre les commerçants, les utilisateurs et les méthodes de paiement.
2. Normaliser le flux de communication de paiement autant que possible.
3. Prendre en charge de manière transparente les différents modes de paiement sécurisés.
4. Travailler avec n'importe quel navigateur, périphérique, plate-forme mobile ou autre.

L'API de demande de paiement est une norme ouverte et inter-navigateur qui remplace les flux de paiement traditionnels en permettant aux commerçants de demander et d'accepter tout paiement avec un seul appel API. L'API de demande de paiement permet à la page Web d'échanger des informations avec l'agent utilisateur pendant que l'utilisateur fournit des informations et ce, avant d'approuver ou de refuser une demande de paiement.

Le but principal est de laisser le navigateur agir en tant qu'intermédiaire. Toutes les informations nécessaires pour une vérification rapide, peuvent être stockées dans le navigateur afin que les utilisateurs puissent simplement confirmer et payer avec un seul clic.

► Copie des clés API

Au retour du test de Webhook, on clique l'onglet API.
Copier et sauvegarder ces clés, elles seront utiles plus tard pour la configuration de l'extension WooCommerce Stripe Payment Gateway.
C'est avec ces clés que s'établit une communication entre notre site WooCommerce et Stripe lors du paiement d'un achat.

- Developers → API keys.
- Bouton vers la droite.
- Les clé API pour le Mode TEST s'affichent.

- Bouton vers la gauche.
- Les clés API pour le Mode Réel s'affichent.

Maintenant que nous sommes titulaires d'un compte Stripe activé et approuvé et que nous possédons les clés API nécessaires pour une communication chiffrée lors des paiements, nous pouvons configurer l'extension WooCommerce Stripe Payment Gateway.

Tableau de bord → WooCommerce → Réglages → onglet Paiement → vis-à-vis Stripe → Gérer.

☑ Activer/désactiver
Toujours Activer Stripe, même pour les achats de test.

● Titre: Contrôle le titre que le client voit à la caisse de sortie. Ce qui affichera:

Un paiement via la société STRIPE se fait avec un chiffrement de 2048 bits et une certification PCI/DSS Service Provider Level 1.

Pour la création des Crochet Web, voir le paragraphe Webhook.

Les Webhooks sont nécessaires uniquement pour les transactions en coulisses (sans transaction dans la Boutique c.-à-d. renouvellement automatique d'un abonnement payant…). La plupart des demandes Stripe (par exemple: créer des frais ou des remboursements) génèrent des résultats qui sont signalés de manière synchrone à votre code; ces demandes ne nécessitent pas de Webhooks pour la vérification.

Vu que nous ne vendons pas d'abonnements, nous n'ajoutons pas cette URL.

Voir le paragraphe: Clés API.

Ces clés de 2048 bits servent aux communications entre notre Serveur NethServer et Stripe.

Nous avons deux jeux de clés:

1. Un jeu pour le Mode LIVE (transactions réelles).
2. Un jeu pour le Mode TEST (transactions de test).

Chaque jeu comprend deux clés:

1. Clé secrète
   Les clés secrètes doivent demeurer confidentielles et seulement stockées sur vos propres serveurs. La clé API secrète de votre compte peut effectuer, sans restriction, toute requête API à Stripe. Elles devront toujours rester secrète et des copies devraient être sauvegardées dans un endroit très sécuritaire.

1. Clé publiable
   Les clés publiables sont destinées, entre-autre, à identifier votre compte avec Stripe, elles ne sont pas secrè­tes. En d'autres termes, elles peuvent être publiées en toute sécurité dans des endroits comme votre code JavaScript Stripe.js ou dans une application Android ou iPhone.

► Mode LIVE

Si la case Activer le mode TEST n'est pas cochée, le Mode LIVE est activé et les deux prochains paramètres affichent les champs des clés LIVE.

On entre les clés LIVE. Pour ces clés, voir le paragraphe: Clés API.

Bien vérifier que ce sont bien les clés API d'achat réel. Elles débutent pas pk_live_.

► Mode TEST

Si la case Activer le mode TEST est cochée, le Mode TEST est activé et les deux paramètres affichent les champs des clés de TEST.

On entre les clés de TEST.

Bien vérifier que ce sont bien les clés API de TEST. Elles débutent pas pk_test_.

Pour débuter, nous utiliserons le Mode TEST pour vérifier nos premiers achats.

Choisir où afficher le formulaire de carte bancaire.
Lorsque cette case est cochée (activée), c'est après avoir cliquer sur le bouton “Continuer vers le paiement” que le formulaire s'affichera.

Lorsque cette case n'est pas cochée (désactivée), le formulaire de la carte bancaire affichera, directement sur la page de la commande, les champs demandant: le numéro de la carte, la date d’expiration, le champ CVC et un bouton “Commander”.

Informations qui apparaîtront sur le relevé de la carte bancaire du client.
Peut contenir 22 caractères. La “Description sur le relevé de la carte bancaire du client” doit contenir au moins une lettre et ne pas inclure les caractères >; <, “ et '. La description apparaîtra en majuscules sur le relevé de la carte bancaire de votre client.

Encaissement immédiat du paiement ou non.
Si décoché, le système de paiements émet une autorisation et le paiement devra être encaissé plus tard.
Un paiement non encaissé expire dans 7 jours.
On coche ce paramètre.

► Si décoché
Lorsque le paramètre Encaissement du paiement n'est pas cochée, les commandes passées via Stripe auront le statut En attente tel que ci-dessous.

De plus, Notes de commande ci-contre, indiquera elles aussi En attente.

Pour encaisser le paiement ou annuler la commande, mettre État de la commande: à Terminée ou Annulée et cliquer Enregistrer Commande. Notes Commande affichera alors que le paiement a été complété ou que la commande a été annulée.

Exiger 3D Secure si applicable.
Certaines méthodes de paiement disposent de la fonction 3D Secure qui est une couche de sécurité supplémentaire. Choisir comment gérer les paiements lorsque 3D Secure est optionnel. L’activation exigera que les clients utilisent 3D Secure si applicable.

Si activé, cette option affiche un bouton “payer” et un formulaire de carte de paiement modal sur la page de paiement, au lieu des champs de carte de paiement directement sur la page. WooCommerce Stripe Payment Gateway vous recommande de laisser cette option désactivée et d’utiliser le formulaire incorporé, car c’est la méthode préférée.

► Option activée

Lorsqu'on active cette option, deux paramètres s'ajoutent.

● Image Stripe de paiement
Optionnellement, saisir l’URL d’u­ne image de votre marque de commerce, logo ou produit de 128×128 pixels.

Exemple:
/Ut/Images/Logo/logo_Micronator_128x128_1200-1200_CarteBancaire.png.

● Description page de paiement Stripe
Affiche une description de votre boutique sur le formulaire de la caisse de sortie Stripe (en dessous du Descripteur de déclaration).

Nous entrons: Créez votre propre commerce en ligne.

Modale de paiement Stripe - coché (activé).

Le formulaire s'affichera dans une fenêtre surgissante après le clic sur Continuer vers le paiement.

- Modale de paiement Stripe - non coché (désactivé).
- Le formulaire s'affiche sur la page de la commande.

Non-utilisé.

Si activé, les utilisateurs seront en mesure de payer avec une carte bancaire sauvegardée lors d'une commande précédente. Les détails de la carte sont sauvegardés sur les serveurs de Stripe et non sur votre site.

Sauvegarde les messages de débogage dans le journal d'État du système WooCommerce.

Pour voir l'entrée d'une transaction dans le journal:
Tableau de bord → WooCommerce → État du système → onglet Logs
(peut prendre un certain temps).

On choisit la date de l'achat avec un début de ligne commençant avec ”woocommerce-gateway-stripe…“ → Voir.

Tableau de bord WordPress → WooCommerce → Réglages → onglet Paiements.

- On clique l'icône à la gauche de la passerelle Stripe.
- La souris s'affiche alors différemment.
- On glisse le paragraphe Stripe au premier rang et PayPal au second rang des passerelles actives. → Enregistrer les modifications.

Sur la page des commandes, les passerelles de paiement s'affichent selon le rang d'affichage choisi à la page Moyens de paiement.

Si Stripe ne se place pas en premier des méthodes de paiements sur la caisse de sortie, désactiver les autres méthodes de paiement, sauvegarder les modifications. Réactiver les autres méthodes de paiements, sauvegarder les modifications.
Si ces manipulations ne fonctionnent pas, vider le Panier et déloguez-vous. Reloguez-vous, achetez un produit et Stripe devrait être le choix par défaut.

Tout est configuré et nous sommes prêts à faire un achat en Mode TEST.

Les deux prochains paragraphes sont ceux de la version 1.0.1 de ce document. Les images peuvent légèrement différer, mais les principes demeurent les mêmes.

► Achat
Pour des numéros de carte de crédit de tests voir: https://stripe.com/docs/testing.

- Sur notre site WooCommerce, on se logue en tant que l'utilisateur acheteur-test.
- Faire des achats et se rendre à la page Panier.
- Cliquer Procéder à la commande.

- Choisir: Payer via Stripe.
- Entrer les informations demandées.
- Cochez si vous avez lu et accepté les conditions générales.
- Cliquer: Continuer pour le paiement.

Après le “paiement” le client est retourné sur le site WooCommerce. Le site devrait afficher la page ci-dessous, à gauche.

Mais, vu que nous sommes sur un serveur LOCAL (qui ne reçoit pas la réponse de Stripe spécifiant que la commande a été payée, car notre serveur passerelle n'est pas encore configuré en mandataire inversé), c'est la page de droite ci-dessous qui est affichée.

Pour un serveur directement branché à l'Internet, cette situation ne se pose même pas, car il peut recevoir la réponse de Stripe sans intermédiaire.

Serveur branché directement à l'Internet.

Serveur LOCAL sans mandataire inversé.

Pour remédier à la situation sur un serveur LOCAL sans mandataire inversé:
- nous expédions le Lecteur média HDMI Chromecast,
- nous changeons l'État de la commande à Terminée.

→ Mettre à jour.

Le client clique Mon compte → Commandes et le dernier achat 86 apparaît.

L'utilisateur se logue pour voir ses courriels: https://www.micronator-101.org/webmail.

L'administrateur du site a bien reçu le courriel le notifiant qu'une nouvelle commande avait été effectuée. Le client a reçu le courriel de remerciement/facture et il peut télécharger ses fichiers en cliquant les liens inclus.

► On active le Mode LIVE en désactivant le Mode TEST.

Tableau de bord WordPress → WooCommerce → Réglages → onglet Paiement → vis-à-vis Stripe, on clique Gérer.

On clique Activer le mode TEST pour enlever le crochet et on vérifie que les clés LIVE sont bien présentes.

► Usager Acheteur Réel

Il faut utiliser l'usager acheteur@micronator-101.org (Acheteur Réel) créé au paragraphe Création d'un utilisateur "acheteur" dans WordPress.

On vérifie l'achat réel du Cahier-04: Internet et NethServer en Mode LIVE sur notre site WooCommerce; il suffit de suivre la même procédure que celle de l'achat en Mode TEST.

L'achat se passe bien jusqu'à la page de paiement.

Après avoir cliqué Payer 1,14 $CA, l'écran ci-contre apparaît.

Stripe tente de communiquer avec notre serveur LOCAL et celui-ci ne répond pas. Il ne peut communiquer avec l'API et terminer la transaction. Il ne comptabilisera pas cette transaction.

Dans WooCommerce, la commande est en État d'Attente de paiement.
On pourrait tenter à nouveau cette transaction après avoir configurer le serveur passerelle en mandataire inversé.
Pour un serveur directement branché à l'Internet, cette situation ne se pose pas, car il peut recevoir la réponse de Stripe.

Ce paragraphe a été pris d'une véritable transaction sur un serveur physique directement branché à l'Internet.

Après l'achat réel, on se logue chez Stripe.

► Prochain transfert de Stripe vers notre compte bancaire

Nous aurons un transfert de $0.81 le 31 mars (dans 7 jours) vers notre compte bancaire.

► Paiements

Tableau de bord → Payments → onglet Payments.

On voit que la transaction a été enregistrée.

► Balance

Notre balance chez Stripe est de $0.81 pour une vente de $1.14 avec des frais de transaction de $0.33 (2.9% + 0.30 CAD).

Voir les tarifs pour une transaction: https://stripe.com/ca/pricing.

Notre menu n'est pas adéquat. Nous allons créer un “Menu principal”, enlever Contacter le webmestre et Validation de la commande, ajouter Nous contacter et déplacer les Conditions d'utilisations sur le pied de page.

On se rend à la page d'accueil.

Nous avons créé un menu au paragraphe Menu principal qui ne contient pas les pages: Conditions d'utilisation, Conditions de vente et Vie privée.

Nous allons modifier le pied de page de notre Thème enfant et y insérer les pages Conditions de vente et Vie privée.

Code à ajouter au fichier wp-content/themes/storefront-enfant/footer.php pour la page Conditions de vente.

                  <a href="/conditions-de-vente"
                     style="text-decoration: underline; color: #0000ff;"
                     target="_blank"
                     title="Conditions de vente">Conditions de vente</a>
                  &nbsp;&nbsp;&nbsp;&nbsp;

Code à ajouter au fichier wp-content/themes/storefront-enfant/footer.php pour la page Vie privée.

                  <a href="/vie-privee"
                     style="text-decoration: underline; color: #0000ff;"
                     target="_blank"
                     title="Vie privée">Vie priv&eacute;e</a>

On édite le fichier wp-content/themes/storefront-enfant/footer.php, on y insère les lignes ci-dessus et on sauvegarde.

<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the #content div and all content after
 *
 * @package storefront
 */
?>
                </div><!-- .col-full -->
        </div><!-- #content -->
        <?php do_action( 'storefront_before_footer' ); ?>

              <!-- #DEBUT - MODIFICATION DU PIED DE PAGE -->
              <!-- Trait horizontal de séparation -->
              <hr style="width:75%; margin: 0 auto;">
              <br />

              <!-- Première ligne -->
              <div align="center">
                <?php _e( 'Copyright'); ?> &copy;
                <?php echo date("Y"); ?> &nbsp;&nbsp;&nbsp;&nbsp;
                <?php _e( 'Tous droits réservés'); ?> &nbsp;&nbsp;&nbsp;&nbsp;
                <span><?php bloginfo('name')?></span> &nbsp;&nbsp;&nbsp;&nbsp;
                <em>
                  <a href="/conditions-dutilisation"
                     style="text-decoration: underline; color: #0000ff;"
                     target="_blank"
                     title="Conditions d'Utilisation">Conditions d'utilisation</a>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <a href="/conditions-de-vente"
                     style="text-decoration: underline; color: #0000ff;"
                     target="_blank"
                     title="Conditions de vente">Conditions de vente</a>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <a href="/vie-privee"
                     style="text-decoration: underline; color: #0000ff;"
                     target="_blank"
                     title="Vie privée">Vie priv&eacute;e</a>
                </em>
              </div> <br />

              <!-- Deuxième ligne -->
              <div align="center">
                <a  href="http://www.micronator.org/affaires/"
                    target="_blank"
                    title="Votre design alternatif GPL">
                    <img style="vertical-align:middle"
                         src="/Ut/Images/Logo/logo_RF-232_transparent_BT.png"
                         alt="Documentation GFDL & design GPL"
                         width="67" height="25"
                         align="middle">
                </a>
              </div></br>
              <!-- #FIN - MODIFICATION DU PIED DE PAGE -->

        <?php do_action( 'storefront_after_footer' ); ?>

</div><!-- #page -->

<?php wp_footer(); ?>

</body>
</html>

On rafraîchit la page affichée dans notre navigateur Web et notre nouveau pied de page apparaît. On clique tous les liens pour vérifier qu'ils fonctionnent correctement.

Nous lançons le navigateur Chrome et nous nous rendons à notre page d'accueil.

Clac sur l'image d'en-tête → Inspecter.

Cliquer l'icône Toggle device toolbar.

Dérouler le menu et choisir iPhone 6/7/8 Plus.

Dans le Cahier-06: SME & WordPress, lors de l'installation de certaines extensions de WordPress, nous avons installé Exclude Pages From Menu.

Si vous ne souhaitez pas que de tels liens de pages soient ajoutés, il est possible de le faire à l'aide de Exclude Pages From Menu. Pour cela, dans la colonne de droite, lors de la création de la page ou lors de sa modification, il suffit de cocher la case dans le bloc Exclude pages from menu.

Les pages À propos et Nous contacter doivent avoir la case Exclude this page from menu décochée sinon, même si on les inclut dans le Menu principal, elles n'y apparaîtront pas.

À l'aide de WinSCP et NotePad++, on ajoute le texte ci-dessous dans le fichier: wp-content/themes/storefront-enfant/functions.php juste avant la dernière balise de fermeture ?> de PHP.

/* Enlever Rechercher dans l'en-tête du thème */
add_action( 'wp_enqueue_scripts', 'theme_name_parent_styles' );
add_action( 'init', 'jk_remove_storefront_header_search' );
function jk_remove_storefront_header_search() {
          remove_action( 'storefront_header', 'storefront_product_search', 40 );
}

On sauvegarde le fichier et on quitte NotePad++.

Le widget de recherche a disparu de l'en-tête.

Nous sommes sur la page Accueil et ce lien du menu n'est pas de la même couleur que les autres entrées. Le prochain paragraphe va résoudre ce problème.

L'affichage du menu principal est contrôlé par le code CSS du fichier: wp-content/themes/storefront-enfant/style.css.

On supprime la directive qu'on avait ajoutée dans le Cahier-06: au paragraphe Logo et slogan .

/* COULEUR DE LA POLICE DU MENU - la couleur est mauve et en gras*/
.main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a {
    color: #96588a;
    font-weight: bold !important;
}

On remplace l'ancienne directive par celle ci-dessous qui:

1. enlève la marge au-dessus et en dessous des titres du menu principal et
2. change la couleur de la police, sa taille, son poids et sa famille.

/* MENU PRINCIPAL - Pour enlever l'espace au-dessus et en-dessous */
@media screen and (min-width: 767px) {
.main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a {
    padding-top: 0px;
    padding-bottom: 0px;
    color: #96588a !important;            /* Police - couleur mauve */
    font-size: 0.9em !important;          /* Police - grandeur      */
    font-weight: bold !important;         /* Gras                   */
    font-family: georgia,palatino,serif;  /* Tahoma                 */
    }
}

Les item du menu ont tous la même couleur. Le menu s'est déplacé un peu plus haut sur la page, mais pas le Panier. Le prochain paragraphe va s'en occuper.

1. On enlève les marges au-dessus et en dessous du Panier.
2. On change la couleur de la police, sa taille, son poids et sa famille.

On ajoute la directive ci-dessous à la fin du fichier style.css.

/* MENU PANIER - pour enlever l'espace au-dessus et en-dessous du menu Panier */ 
/* Fonctionne avec la directive de l'espace au-dessus et en-dessous du MENU PRINCIPAL */
a.cart-contents, .site-header-cart .widget_shopping_cart a {
    padding: 0 0 !important;
    color: #96588a !important;            /* Police - couleur mauve */
    font-size: 0.9em !important;          /* Police - grandeur      */
    font-weight: bold !important;         /* Gras                   */
    font-family: georgia,palatino,serif;  /* georgia                */
}

Le menu et le Panier sont au même niveau.

La mise à jour de WooCommerce se fait exactement de la même manière que celle des autres extensions.

Tableau de bord WordPress → Mise à jour → on coche Tout sélectionner → Mise à jour des extensions.

La mise à jour est terminée. On peut afficher les détails.

Il pourrait arriver que la BD de WooCommerce doive être mise à jour.

On retourne au Tableau de bord. Un message est affiché demandant de mettre à jour la BD de notre Boutique.

Lancer l'actualisation.

Rarement, la mise à jour de WooCommerce peut affecter le Thème enfant.

Un message nous averti que des fichiers de notre Thème enfant doivent être mis à jour.

On s'en occupera plus loin.

Si nous n'avons aucune sauvegarde de notre Serveur NethServer, on peut en créer une et au retour, on clique OK.

Cliquez ici pour l'effectuer maintenant.

Rejeter pour supprimer le message.

On se rend sur notre site et on vérifie les différents menus de WooCommerce.

Après la mise à jour, on vérifie quelques pages et on peut même faire un achat pour être absolument certain que tout fonctionne parfaitement bien.

Ce paragraphe est inclus à titre d'exemple seulement - provient de la version 1.0.1 de ce document.

Voir les modèles concernés.

En bas de la page affichée.

1. Une mise à jour du Thème enfant Storefront est disponible.
2. Nous voyons les fichiers de WooCommerce qui sont obsolètes. Ce sont les fichiers des courriels qu'on aurait pu avoir copiés à la section Courriels (E-mails) (Modèle HTML- Pour écraser et modifier ce modèle d’e-mail, copiez woocommerce/templates/emails/admin-new-order.php dans le dossier de votre thème: storefront-enfant/woocommerce/emails/admin-new-order.php).

Tableau de bord WordPress → WooCommerce → Réglages → onglet E-mails → Nouvelle commande → Gérer.

Supprimer le fichier modèle.

OK.

Copier le fichier dans le thème.

On retourne à l'onglet E-mails et on répète les mêmes opérations pour Commande annulée et Commande échouée.

On rafraîchit la page du rapport système.

Le Thème enfant est à jour, car le Thème parent est à jour.

Tout est normal pour Modèles HTML.

On vérifie encore en allant à Tableau de bord → WooCommerce → Réglages.

Le message est disparu. Tout est normal.

Le Serveur NethServer LOCAL n'a pas réellement besoin de tester les achats. Il sert surtout à vérifier la création de nouveaux produits.

Si on veut complètement vérifier tous les types d'achats avec le serveur LOCAL micronator-dev.org:

1. On doit s'assurer que le domaine du serveur LOCAL est micronator-dev.org et demander un certificat Let's Encrypt: voir le Cahier-04: NethServer LOCAL & Certificat Let's Encrypt.
2. On doit configurer le Serveur NethServer principal (la passerelle) en serveur Mandataire Inversé. Voir: Cahier-10: Mandataire Inversé.

On peut consulter la page: https://docs.woocommerce.com/document/woocommerce-guided-tour-videos/.

Victoire totale, hissons la bannière de la victoire.

© 2015-2016-2017-2018-2019 RF-232
Auteur: Michel-André CLP.
Remerciement: Tous les contributeurs GNU/GPL.
Intégré par: Michel-André Robillard CLP.
Contact: michelandre at micronator.org

Répertoire de ce document: E:\000_DocPourRF232_general\RF-232_NethServer\RF-232_Cours_NethServer-101_Cahier-08_WooC_Stripe_PayPal_2019-08-06_13h15.odt.

Historique des modifications:

Ce document est uniquement destiné à informer. Les informations, ainsi que les contenus et fonctionnalités de ce do­cument sont fournis sans engagement et peuvent être modifiés à tout moment. RF‑232 n'offre aucune garantie quant à l'actualité, la conformité, l'exhaustivité, la qualité et la durabilité des informations, contenus et fonctionnalités de ce document. L'accès et l'utilisation de ce document se font sous la seule responsabilité du lecteur ou de l'utilisateur.

RF‑232 ne peut être tenu pour responsable de dommages de quelque nature que ce soit, y compris des dommages di­rects ou indirects, ainsi que des dommages consécutifs résultant de l'accès ou de l'utilisation de ce document ou de son contenu.

Chaque internaute doit prendre toutes les mesures appropriées (mettre à jour régulièrement son logiciel antivirus, ne pas ouvrir des documents suspects de source douteuse ou non connue) de façon à protéger le contenu de son ordina­teur de la contamination d'éventuels virus circulant sur la Toile.

Toute reproduction interdite Vous reconnaissez et acceptez que tout le contenu de ce document, incluant mais sans s’y limiter, le texte et les images, sont protégés par le droit d’auteur, les marques de commerce, les marques de service, les brevets, les secrets industriels et les autres droits de propriété intellectuelle. Sauf autorisation expresse de RF-232, vous acceptez de ne pas vendre, délivrer une licence, louer, modifier, distribuer, copier, reproduire, transmettre, afficher publiquement, exécuter en public, publier, adapter, éditer ou créer d’oeuvres dérivées de ce document et de son contenu.

Bien que nous utilisions ici un vocabulaire issu des techniques informatiques, nous ne prétendons nullement à la précision technique de tous nos propos dans ce domaine.