Outils pour utilisateurs

Outils du site


nethserver_101_cahier_08_woocommerce_paypal_stripe

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision
Révision précédente
nethserver_101_cahier_08_woocommerce_paypal_stripe [2019-07-30 15:50] – ↷ Nom de la page changé de nethserver_101_cahier_08_woocommerce_paypal_stripe_partie_1 à nethserver_101_cahier_08_woocommerce_paypal_stripe michelandrenethserver_101_cahier_08_woocommerce_paypal_stripe [2025-01-12 19:30] (Version actuelle) – modification externe 127.0.0.1
Ligne 1: Ligne 1:
 +====== NethServer-101, Cahier-08: WooCommerce, PayPal & Stripe ======
  
 +===== Description générale =====
 +
 +==== Introduction ====
 +
 +Maintenant que vous maîtrisez WordPress, votre but est à portée de main.
 +
 +Le **Cahier-08** du cours **NethServer-101** décrit:
 +
 +  - L'installation et la configuration de **WooCommerce**, l'extension mondialement la plus utilisée pour le commerce électronique.
 +  - 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".
 +  - 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|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 [[https://fr.wikipedia.org/wiki/WordPress|WordPress]]. Lancée le 27 septembre 2011, l'extension est rapidement devenue célèbre pour sa simplicité d'installation et de personnalisation.
 +
 +==== But final de ce cahier ====
 +
 +{{ Images_Cahier-101-08-001.png?600 }}
 +\\ 
 +
 +==== Cours NethServer-101 ====
 +
 +Le //Cours NethServer-101//, se voulant une base solide pour la création d'un site de **Commerce en ligne**, comprend plusieurs cahiers:
 +
 +  - [[nethserver_101_cahier_01_linux|Cahier-01]]: -> Les bases de Linux.
 +  - [[nethserver_101_cahier_02_installations_configurations_logiciels_prerequis|Cahier-02]]: -> Installation et configuration des logiciels prérequis sur le poste de travail.
 +  - [[nethserver_101_cahier_03_creation_un_serveur_virtuel|Cahier-03]]: -> Création d'un Serveur NethServer virtuel.
 +  - [[nethserver_101_cahier_04_local_certificat_let_encrypt|Cahier-04]]: -> Serveur NethServer LOCAL & Let's Encrypt.
 +  - [[nethserver_101_cahier_05_vdsl_fqdn_internet_et_nethserver|Cahier-05]]: -> FAI, modem VDSL, domaine FQDN(( **FQDN**: Dans le //DNS//, un Fully Qualified Domain Name //(FQDN, ou nom de domaine complètement qualifié)// est un nom de domaine qui révèle la position absolue d'un nœud dans l'arborescence //DNS// en indiquant tous les domaines de niveau supérieur jusqu'à la racine. On parle également de domaine absolu, par opposition aux domaines relatifs. Par convention, le //FQDN// est ponctué par un point final. //Référence:// [[https://fr.wikipedia.org/wiki/Fully_qualified_domain_name|https://fr.wikipedia.org/wiki/Fully_qualified_domain_name]].
 + )) et Serveur NethServer physique.
 +  - [[nethserver_101_cahier_06_nethserver_wordPress|Cahier-06]]: -> Installation de WordPress.
 +  - [[nethserver_101_cahier_07_nethserver_wordPress_wordfence|Cahier-07]]: -> Installation de l'extension de sécurité Wordfence.
 +  - [[nethserver_101_cahier_08_woocommerce_paypal_stripe|Cahier-08]]: -> WooCommerce, comptes chez Stripe et   PayPal pour les paiements en ligne.
 +  - [[nethserver_101_cahier_09_duplicator_migration|Cahier-09]]: -> Sauvegarde/restauration ou migration d'un site avec l'extension Duplicator.
 +  - [[nethserver_101_cahier_10_mandataire_inverse|Cahier-10]]: -> Serveur mandataire inversé.
 +  - [[nethserver_101_cahier_11_nethserver_backuppc|Cahier-11]]: -> Sauvegarde/restauration avec BackupPC.
 +
 +==== Logiciels ====
 +
 +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.
 +
 +=== But final ===
 +
 +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.
 +
 +{{ Images_cahier-101-01-001.png?450 }}
 +
 +==== Particularités de ce document ====
 +
 +=== Notes au lecteur ===
 +
 +<nowiki>*</nowiki> Les captures d'écrans ne sont que des références.\\
 +<nowiki>**</nowiki> 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.\\ 
 +<nowiki>***</nowiki> 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.
 +
 +=== Conventions ===
 +
 +{{Images_Cahier-101-03-003.png?22}} Manipulation, truc ou ruse pour se tirer d'embarras.\\
 +{{Images_Cahier-101-03-004.png?25}} Une recommandation ou astuce.\\
 +{{Images_Cahier-101-03-005.png?25}} Une note.\\
 +{{Images_Cahier-101-03-006.png?25}} Une étape, note ou procédure à surveiller.\\
 +{{Images_Cahier-101-03-007.png?25}} Paragraphe non complété ou non vérifié.\\
 +{{Images_Cahier-101-03-008.png?25}} 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.
 +
 +<file>
 +[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 ~]#
 +</file>
 +
 +<WRAP box round>
 +<file>
 +Commande à exécuter si ce n'est déjà fait.
 +</file>
 +</WRAP>
 +
 +<WRAP box>
 +<file>
 +Commande indiquée à titre d'information seulement.
 +</file>
 +</WRAP>
 +\\
 +
 +===== Prérequis =====
 +
 +==== NethServer, Collections Red Hat, WordPress et Wordfence ====
 +
 +  - **Serveur NethServer actuel**\\ Nous utilisons le même système que celui du cours [[nethserver_101_cahier_07_nethserver_wordPress_wordfence|Cahier-07]]: //NethServer, WordPress & Wordfence//.
 +\\ 
 +\\ 
 +  - **WordPress**\\ //Référence:// [[https://wordpress.org/about/requirements/|https://wordpress.org/about/requirements/]].\\ WordPress requière la version //7// pour PHP et recommande la version //7.3//.
 +\\ 
 +\\ 
 +  - **Wordfence**\\ Référence: [[https://www.wordfence.com/help/advanced/system-requirements/|https://www.wordfence.com/help/advanced/system-requirements/]].\\ Wordfence requière la version //5.3// minimum pour PHP et recommande la version //7.2//.
 +\\ 
 +\\ 
 +  - **Let's Encrypt**\\ {{Images_Cahier-101-03-006.png?25}}  On installe un certificat Let's Encrypt selon le [[nethserver_101_cahier_04_local_certificat_let_encrypt|Cahier-04]]: //NethServer LOCAL & Certificat Let's Encrypt//.
 +
 +=== Vérifications ===
 +
 +== Collections Red Hat ==
 +
 +<file>
 +[root@tchana ~]# scl -l
 +
 +php56
 +php70
 +php71
 +php72
 +php73
 +rh-mariadb102
 +[root@tchana ~]#
 +</file>
 +
 +== Collection PHP ==
 +
 +Chemin.
 +
 +<file>
 +[root@tchana ~]# which php
 +
 +/opt/remi/php72/root/usr/bin/php
 +[root@tchana ~]#
 +</file>
 +
 +Version //(on utilise la version 7.2, car 7.3 semble occasionner des problèmes avec certains logiciels)//.
 +
 +<file>
 +[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 ~]#
 +</file>
 +
 +== Paramètres PHP72 ==
 +
 +<file>
 +[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 ~]#
 +</file>
 +
 +{{Images_Cahier-101-03-006.png?25}}  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)//.
 +\\ 
 +\\ 
 +
 +== MariaDB 10.2 ==
 +
 +{{Images_Cahier-101-03-006.png?25}}  Il faut toujours utiliser **mysql**<wrap em>102</wrap> ou **mysqladmin**<wrap em>102</wrap> pour toute les manipulations de MariaDB.
 +
 +Chemin et version.
 +
 +<file>
 +[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 ~]#
 +</file>
 +\\ 
 +
 +==== Usagers obligatoires ====
 +
 +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//.
 +
 +=== Serveur de développement sur un réseau LOCAL ===
 +
 +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ù.
 +
 +=== Créations des usagers ===
 +
 +{{Images_Cahier-101-03-006.png?25}}  On donne toujours des mots de passe <wrap em>robuste</wrap>.
 +
 +== paiement-stripe ==
 +
 +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**.
 +
 +<WRAP column 30%>
 +On entres les informations demandées **-> SOUMETTRE**.
 +|{{ Images_Cahier-101-08-002.png?400 }}|
 +</WRAP>
 +<WRAP column 60%>
 +\\ 
 +Au retour, on vérifie l'orthographe de l'adresse courriel.
 +|{{ Images_Cahier-101-08-003.png?600 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +== paiement-paypal ==
 +
 +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.
 +
 +== acheteur-test ==
 +
 +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.
 +
 +== acheteur ==
 +
 +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.
 +\\ 
 +
 +=== Vérification ===
 +
 +{{ Images_Cahier-101-08-004.png?600}}
 +On vérifie l'orthographe de toutes les adresses courriel.
 +<WRAP clear></WRAP>
 +
 +==== WordPress ====
 +
 +=== Connexion et mises à jour ===
 +
 +{{ Images_Cahier-101-08-005.png?600}}
 +{{Images_Cahier-101-03-006.png?25}}  On se connecte à WordPress sur notre domaine LOCAL:
 +<WRAP centeralign>https://www.micronator-dev.org</WRAP>
 +
 +{{Images_Cahier-101-03-003.png?22}} On peut vérifier s'il existe des mises à jour de WordPress ou de ses thèmes/extensions et si oui, on les installe.
 +<WRAP clear></WRAP>
 +
 +=== Thème WordPress ===
 +
 +{{ Images_Cahier-101-08-006.png?350}}
 +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 [[nethserver_101_cahier_06_nethserver_wordpress|Cahier-06]]: //NethServer, & WordPress//.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +===== Pages indispensables =====
 +
 +==== Conditions de vente ====
 +
 +{{Images_Cahier-101-03-003.png?22}} Pour une protection juridique minimale, il est préférable d'avoir une page énonçant les conditions de vente sur notre site WooCommerce.
 +
 +{{ Images_Cahier-101-08-007.png?600}}
 +=== Création de la page ===
 +**
 +Tableau de bord -> Pages -> Ajouter ->** on **écrit notre page.**
 +<WRAP clear></WRAP>
 +\\ 
 +
 +<WRAP column 32%>
 +<nowiki>-</nowiki> Cocher //**Exclude this page from menu**//.
 +
 +<nowiki>-</nowiki> **Publier**.
 +</WRAP>
 +<WRAP column 29%>
 +|{{ Images_Cahier-101-08-008.png?400 }}|
 +</WRAP>
 +<WRAP column 29%>
 +|{{ Images_Cahier-101-08-009.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-010.png?600}}
 +On vérifie notre page en cliquant le bouton:\\ 
 + 
 +{{ Images_Cahier-101-08-010-A.png?250 }}
 +<WRAP clear></WRAP>
 +\\
 +
 +==== Vie privée ====
 +
 +{{Images_Cahier-101-03-003.png?22}} 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//.
 +
 +{{ Images_Cahier-101-08-011.png?600}}
 +=== Création de la page ===
 +**
 +Tableau de bord -> Pages -> Ajouter ->** on **écrit notre page.**
 +<WRAP clear></WRAP>
 +\\ 
 +
 +<WRAP column 32%>
 +<nowiki>-</nowiki> Cocher //**Exclude this page from menu**//.
 +
 +<nowiki>-</nowiki> **Publier**.
 +</WRAP>
 +<WRAP column 29%>
 +|{{ Images_Cahier-101-08-012.png?400 }}|
 +</WRAP>
 +<WRAP column 29%>
 +|{{ Images_Cahier-101-08-013.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-015.png?600}}
 +On vérifie notre page en cliquant le bouton:\\ 
 + 
 +{{ Images_Cahier-101-08-014.png?250 }}
 +<WRAP clear></WRAP>
 +\\ 
 +\\ 
 +
 +{{ Images_Cahier-101-08-016.png?600}}
 +==== À propos ====
 +
 +=== Création de la page ===
 +
 +<nowiki>-</nowiki> **Tableau de bord -> Pages -> Ajouter ->** on **écrit notre page.**
 +
 +<nowiki>-</nowiki> __On ne coche pas__ //**Exclude this page from menu**//.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +{{ Images_Cahier-101-08-018.png?600}}
 +On vérifie notre page en cliquant le bouton:\\ 
 +
 +{{ Images_Cahier-101-08-017.png?250 }}
 +<WRAP clear></WRAP>
 +\\ 
 +
 +{{ Images_Cahier-101-08-019.png?600}}
 +==== Nous contacter ====
 +
 +Page permettant aux visiteurs de nous contacter.
 +
 +<nowiki>-</nowiki> Dans le [[:nethserver_101_cahier_06_nethserver_wordPress|Cahier-06]]: //NethServer & WordPress//, nous avons créé un //Formulaire de contact//.
 +
 +<nowiki>-</nowiki> On vérifie notre page en se rendant à: [[https://www.micronator-dev.org/nous-contacter/|https://www.micronator-dev.org/nous-contacter/]].
 +\\ 
 +\\ 
 +
 +Toutes nos pages indispensables sont prêtes.
 +<WRAP clear></WRAP>
 +\\ 
 +\\ 
 +
 +===== Compte PayPal =====
 +
 +==== Inscription ====
 +
 +Avant d'installer //WooCommerce//, il nous faut créer un //Compte business// chez //PayPal// pour pouvoir effectuer des tests d'achats.
 +
 +{{Images_Cahier-101-03-006.png?25}}  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|https://www.paypal.com/ca/webapps/mpp/home?locale.x=fr_CA]].
 +
 +<WRAP column 30%>
 +**Ouvrir un compte**.
 +|{{ Images_Cahier-101-08-020.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +**Ouvrir un compte business**.
 +|{{ Images_Cahier-101-08-021.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +**Premiers pas**.
 +|{{ Images_Cahier-101-08-022.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +Entrer l'adresse courriel de celui qui s'occupera du compte PayPal **-> Suivant**.
 +|{{ Images_Cahier-101-08-023.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +\\ 
 +Entrez les informations demandées.
 +|{{ Images_Cahier-101-08-024.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +Lisez les //Conditions d'utilisation// et tous les //Règlement(s)// **->** __si vous les acceptez__, cochez **En cochant la case...** **-> Valider et continuer**.
 +|{{ Images_Cahier-101-08-025.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 35%>
 +<nowiki>-</nowiki> Dérouler le premier menu et choisir **Particulier**.\\ 
 +<nowiki>-</nowiki> Entrer les informations demandées **-> Continuer**.
 +|{{ Images_Cahier-101-08-026.png?400 }}|
 +</WRAP>
 +<WRAP column 35%>
 +\\ 
 +\\ 
 +Entrer les informations demandées **-> Soumettre**.
 +|{{ Images_Cahier-101-08-027.png?400 }}|
 +</WRAP>
 +<WRAP column 20%>
 +\\ 
 +\\ 
 +//Récapitulatif//.
 +|{{ Images_Cahier-101-08-028.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +==== Confirmation de l'adresse courriel ====
 +
 +{{Images_Cahier-101-03-003.png?22}} 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.
 +
 +<WRAP column 45%>
 +<nowiki>-</nowiki> L'utilisateur //paiement-paypal// se connecte à Webmail et ouvre le courriel de //PayPal//.\\ 
 +<nowiki>-</nowiki> **Compléter les informations maintenant**.
 +|{{ Images_Cahier-101-08-029.png?400 }}|
 +</WRAP>
 +<WRAP column 45%>
 +<nowiki>-</nowiki> L'utilisateur //paiement-paypal// est dirigé vers le site //PayPal// pour se connecter et **en­tre son mot de passe**.\\ 
 +<nowiki>-</nowiki> **Connexion**.
 +|{{ Images_Cahier-101-08-030.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +<WRAP column 30%>
 +Il choisit son pays **-> Continuer**.
 +|{{ Images_Cahier-101-08-031.png?400 }}|
 +</WRAP>
 +<WRAP column 60%>
 +La page principale apparaît.
 +|{{ Images_Cahier-101-08-032.png?600 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> Cliquer l'icône de messages.\\ 
 +<nowiki>-</nowiki> **Confirmer l'adresse courriel**.
 +|{{ Images_Cahier-101-08-033.png?400 }}|
 +</WRAP>
 +<WRAP column 60%>
 +<nowiki>-</nowiki> L'adresse courriel __n'est pas encore confirmée__.\\ 
 +<nowiki>-</nowiki> Cliquer l'icône **Mes préférences**.
 +|{{ Images_Cahier-101-08-034.png?600 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-035.png?600}}
 +{{Images_Cahier-101-03-003.png?22}} 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**.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +{{ Images_Cahier-101-08-036.png?600}}
 +Le message de l'//Adresse de courriel// change pour nous avertir de consulter nos courriels.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +=== Activation du compte PayPal ===
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> paiement-paypal@micronator-101.org vérifie ses courriels.\\ 
 +<nowiki>-</nowiki> **Cliquez ici pour activer votre compte**.
 +|{{ Images_Cahier-101-08-037.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +<nowiki>-</nowiki> //paiement-paypal// entre son mot de passe.\\ 
 +<nowiki>-</nowiki> **Confirmer mon adresse courriel**.
 +|{{ Images_Cahier-101-08-038.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +<nowiki>-</nowiki> Entrer les informations demandées.\\ 
 +<nowiki>-</nowiki> **Soumettre**.
 +|{{ Images_Cahier-101-08-039.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 45%>
 +Cliquer l'icône **Mes préférences**.
 +|{{ Images_Cahier-101-08-040.png?400 }}|
 +</WRAP>
 +<WRAP column 45%>
 +Le __compte est activé__ et l'__adresse courriel confirmée__.
 +|{{ Images_Cahier-101-08-041.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +{{Images_Cahier-101-03-004.png?25}} //**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.)//
 +\\ 
 +
 +==== Vérification ====
 +
 +On s'assure que tout fonctionne correctement.
 +
 +<WRAP column 30%>
 +**Déconnexion/reconnexion**.
 +|{{ Images_Cahier-101-08-042.png?400 }}|
 +</WRAP>
 +<WRAP column 60%>
 +Tout est fonctionnel.
 +|{{ Images_Cahier-101-08-043.png?600 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\ 
 +
 +==== Création d'une signature API ====
 +
 +//Référence:// [[https://developer.paypal.com/webapps/developer/docs/classic/api/apiCredentials/#creating-classic-api-credentials|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//.
 +
 +{{Images_Cahier-101-03-006.png?25}}  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!
 +
 +{{ Images_Cahier-101-08-044.png?600}}
 +<nowiki>-</nowiki> On retourne à notre compte chez: [[https://www.paypal.com/|https://www.paypal.com]].
 +
 +<nowiki>-</nowiki> Cliquer l'Icône **Mes Préférences -> Mes outils de vente**.
 +
 +<nowiki>-</nowiki> Vis-à-vis //**Accès à L'API**//  **→  Mise à jour**.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +{{ Images_Cahier-101-08-045.png?600}}
 +{{Images_Cahier-101-03-005.png?25}} 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**.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +{{ Images_Cahier-101-08-046.png?600}}
 +<nowiki>-</nowiki> Choisissez **Demander une signature API...**
 +
 +<nowiki>-</nowiki> __Si vous acceptez__ les //Conditions d'utilisation de l'API//, cliquez **Accepter et envoyer**.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +{{ Images_Cahier-101-08-047.png?600}}
 +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//.
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-048.png?600}}
 +{{Images_Cahier-101-03-004.png?25}} Pour les conserver, on peut sélectionner ces données, les copier et les entrer dans un fichier texte.
 +
 +{{Images_Cahier-101-03-003.png?22}} On peut aussi pendre une capture d'écran pour pouvoir con­server une copie de __ces informations très sensibles__.
 +
 +{{Images_Cahier-101-03-008.png?25}} __Conserver les informations d'authentification en lieu sûr ayant un accès restreint__.
 +
 +{{Images_Cahier-101-03-006.png?25}}  <wrap em>Terminé</wrap> pour fermer la fenêtre.
 +
 +{{Images_Cahier-101-03-005.png?25}} 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 [[nethserver_101_cahier_08_woocommerce_paypal_stripe#PayPal]].
 +\\ 
 +
 +=== Pour revoir les clés API ===
 +
 +Plus tard, si on veut revoir ces informations, 
 +
 +<WRAP column 30%>
 +On se logue avec notre compte chez: [[https://www.paypal.com/|https://www.paypal.com]].
 +|{{ Images_Cahier-101-08-049.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +Cliquer l'icône **Mes Préférences**.
 +|{{ Images_Cahier-101-08-050.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +**Mes outils de vente**.
 +|{{ Images_Cahier-101-08-051.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-052.png?600}}
 +Mettre à jour.
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-053.png?600}}
 +Gérer les informations d'authentification API.
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-054.png?600}}
 +À la fenêtre des informations d'authentification, cliquer **Afficher** pour voir le paramètre désiré.
 +
 +{{Images_Cahier-101-03-006.png?25}}  Pour refermer la fenêtre, cliquer **Terminé**.
 +\\ 
 +
 +==== Déconnexion ====
 +
 +On se déconnecte de notre compte //PayPal//.
 +\\
 +{{ Images_Cahier-101-08-055.png?150 }}
 +<WRAP clear></WRAP>
 +\\
 +<WRAP centeralign>**Notre compte PayPal est fonctionnel.**</WRAP>
 +\\ 
 +
 +===== Bac à sable PayPal =====
 +
 +//Référence:// [[https://www.paypal.com/fr/cgi-bin/webscr?cmd=_ipn-test-about-outside|https://www.paypal.com/fr/cgi-bin/webscr?cmd=_ipn-test-about-outside]].
 +
 +=== Test de la Notification Instantanée de Paiement ===
 +
 +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.
 +
 +=== Environnement de test PayPal ===
 +
 +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/|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|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.
 +
 +=== Remarque à propos des courriels ===
 +
 +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/|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 [[https://www.paypalobjects.com/webstatic/fr_FR/developer/docs/pdf/integralevolution_fr.pdf|Guide d'intégration de PayPal Intégral Évolution]] //(en français)//, chapitre 6, //Tester votre intégration dans l'Environnement de test//.
 +\\ 
 +\\ 
 +
 +==== Création d'un compte de test ====
 +
 +{{Images_Cahier-101-03-006.png?25}}  Les pages du //Bac à sable// chez //PayPal// peuvent varier avec le temps, mais les principes demeurent les mêmes.\\ 
 +{{Images_Cahier-101-03-005.png?25}} 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 [[nethserver_101_cahier_08_woocommerce_paypal_stripe#Compte PayPal]].
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> On se rend au site: https://developer.paypal.com/.\\ 
 +<nowiki>-</nowiki> Cliquer **Log into Dashboard**.
 +|{{ Images_Cahier-101-08-056.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +Entrer l'adresse courriel et le mot de passe donnés lors de la création du compte ci-dessus **-> Log In**.
 +|{{ Images_Cahier-101-08-057.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +\\
 +**Dashboard**.
 +|{{ Images_Cahier-101-08-058.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-059.png?600}}
 +<nowiki>-</nowiki> On vérifie qu'on est bien chez [[https://developer.paypal.com/|https://developer.paypal.com/]].
 +
 +<nowiki>-</nowiki> On clique **Accounts**.
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Création d'un usager de test ===
 +
 +{{ Images_Cahier-101-08-060.png?600}}
 +{{Images_Cahier-101-03-004.png?25}} //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.
 +
 +<nowiki>-</nowiki> On clique **Create Account**.
 +<WRAP clear></WRAP>
 +\\
 +
 +== Informations du compte et balance de la carte Visa ==
 +
 +{{Images_Cahier-101-03-006.png?25}}  Attention aux erreurs de frappe.
 +
 +<WRAP column 30%>
 +\\ 
 +On entre les informations demandées... //(sans accents)//.
 +|{{ Images_Cahier-101-08-061.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +\\
 +**999 -> Yes -> Visa -> Create account**.
 +|{{ Images_Cahier-101-08-062.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +Le nouveau compte acheteur-test@micronator-101.org a été créé avec succès.
 +|{{ Images_Cahier-101-08-063.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +\\ 
 +On clique l'adresse pour développer et faire apparaître les onglets **-> Profile**.
 +|{{ Images_Cahier-101-08-064.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +Sous l'onglet //**Profile**//, si on veut changer le mot de passe, le nouveau doit être différent du précédent.
 +|{{ Images_Cahier-101-08-065.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +<nowiki>-</nowiki> **Funding** //(détails de la carte de crédit)//.\\ 
 +<nowiki>-</nowiki> On utilisera ces données pour les achats.
 +|{{ Images_Cahier-101-08-066.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +**Settings -> Off -> Close**.
 +
 +{{Images_Cahier-101-03-006.png?25}}  Il est __TRÈS IMPORTANT__ sous l'onglet **Settings** de mettre //**Payment Review**// à **Off**, surtout pour les fichiers téléchargeables.
 +
 +==== Déconnexion ====
 +
 +**Log Out** pour se déconnecter du site du //Bac à sable//.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-067.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-068.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +==== Fermeture de compte ====
 +
 +Pour la marche à suivre pour fermer un compte //PayPal//, voir la section: [[nethserver_101_cahier_08_woocommerce_paypal_stripe#Fermeture d'un compte PayPal]].
 +
 +<WRAP centeralign>
 +**Nous avons tous les comptes et informations nécessaires pour des tests de transactions //PayPal//.\\ 
 +Nous pouvons maintenant procéder à l'installation de //WooCommerce//.**
 +</WRAP>
 +\\ 
 +
 +===== WooCommerce =====
 +
 +==== Description ====
 +
 +//Référence:// [[https://fr.wikipedia.org/wiki/WooCommerce|https://fr.wikipedia.org/wiki/WooCommerce]]
 +
 +<WRAP column 50%>
 +//WooCommerce// est une extension LIBRE pour WordPress permettant de créer une boutique en ligne. Il est conçu pour les petites et grandes entreprises utilisant WordPress. Lancé le 27 septembre 2011, l'extension est rapidement devenue célèbre pour sa simplicité d'installation et de personnalisation.
 +</WRAP>
 +<WRAP column 20%>
 +|{{ Images_Cahier-101-08-069.png?400 }}|
 +</WRAP>
 +<WRAP column 20%>
 +|{{ Images_Cahier-101-08-070.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +==== Installation ====
 +
 +Si nous ne sommes pas connectés à notre Serveur NethServer LOCAL, on se logue à: https://www.micronator-dev.org.
 +
 +<WRAP column 45%>
 +**Tableau de bord -> Extensions -> Ajouter**.
 +|{{ Images_Cahier-101-08-071.png?400 }}|
 +</WRAP>
 +<WRAP column 45%>
 +//**Mot-clé**// ** →  WooCommerce**.
 +|{{ Images_Cahier-101-08-072.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +<WRAP column 45%>
 +**Installer**.
 +|{{ Images_Cahier-101-08-073.png?400 }}|
 +</WRAP>
 +<WRAP column 45%>
 +**Activer**.
 +|{{ Images_Cahier-101-08-076.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\ 
 +
 +==== L'assistant d'installation ====
 +
 +=== Configuration de la boutique et Paiement ===
 +
 +<WRAP column 45%>
 +\\ 
 +\\ 
 +\\ 
 +\\ 
 +\\ 
 +Entrer les information demandées **-> C'est parti!**
 +|{{ Images_Cahier-101-08-077.png?400 }}|
 +</WRAP>
 +<WRAP column 45%>
 +<nowiki>-</nowiki> __Activer__ **Stripe**.\\ 
 +<nowiki>-</nowiki> Décocher //Configurer Stripe pour moi avec cet e-mail//.\\ 
 +<nowiki>-</nowiki> __Désactiver__ **PayPal** //(ceci va désactiver seulement PayPal Express Checkout)//.\\ 
 +<nowiki>-</nowiki> Facultatif: //Paiements hors ligne//.\\ 
 +<nowiki>-</nowiki> **Continuer**.
 +|{{ Images_Cahier-101-08-078.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Expédition et Recommandé ===
 +
 +<WRAP column 45%>
 +<nowiki>-</nowiki> Entrer les informations ci-dessous qui vont créer deux forfaits: un pour le Canada et un autre pour ceux qui ne sont pas couverts par le premier. On pourra ajuster par la suite.\\ 
 +<nowiki>-</nowiki> Imprimer des étiquettes de livraison à la maison. //(Votre choix.)//\\ 
 +<nowiki>-</nowiki> **Continuer**.
 +|{{ Images_Cahier-101-08-079.png?400 }}|
 +</WRAP>
 +<WRAP column 45%>
 +- __Décocher__ //Taxes automatisées// et //MailChimp//.\\ 
 +BEAUCOUP TROP INTRUSIF, lisez les licences et vous serez de notre avis...\\ 
 +<nowiki>-</nowiki> Nous entrerons les taxes nous-mêmes.\\ 
 +<nowiki>-</nowiki> **Passer cette étape**.
 +|{{ Images_Cahier-101-08-080.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Activer et Prêt! ===
 +
 +<WRAP column 45%>
 +\\ 
 +<nowiki>-</nowiki> Extension non-nécessaire.\\  BEAUCOUP TROP INTRUSIF, lisez la licence et vous serez de notre avis...\\ 
 +<nowiki>-</nowiki> **Passer cette étape**.
 +|{{ Images_Cahier-101-08-081.png?400 }}|
 +</WRAP>
 +<WRAP column 45%>
 +<nowiki>-</nowiki> On peut changer le contact pour la réception de conseils et sources d'inspiration.\\ 
 +<nowiki>-</nowiki> On peut consulter le [[https://docs.woocommerce.com/document/woocommerce-guided-tour-videos/?utm_source=setupwizard&utm_medium=product&utm_content=videos&utm_campaign=woocommerceplugin|guide vidéo]] ou [[https://docs.woocommerce.com/documentation/plugins/woocommerce/getting-started/?utm_source=setupwizard&utm_medium=product&utm_content=docs&utm_campaign=woocommerceplugin|pour bien commencer]].\\ 
 +<nowiki>-</nowiki> **Se rendre sur le Tableau de bord**.
 +|{{ Images_Cahier-101-08-082.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-083.png?600}}
 +<nowiki>-</nowiki> Le premier message peut être supprimé, car c'est une première installation.
 +
 +<nowiki>-</nowiki> Pour //WooCommerce Products Block//, votre choix. Nous sommes vieux jeu et préférons l'éditeur classique: //(Ignorer)//.
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-084.png?600}}
 +<nowiki>-</nowiki> Plus loin, nous nous occuperons de la configuration de //Stripe//.\\ 
 +<nowiki>-</nowiki> **Fermer** cette fenêtre.
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-085.png?600}}
 +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//.
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-086.png?600}}
 +L'extension //WooCommerce// est installée et activée.
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 32%>
 +Les menus //WooCommerce// et //Produits// ont été installées.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-087.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-088.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\ 
 +
 +===== Configuration =====
 +
 +==== Introduction ====
 +
 +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.
 +
 +==== Dimensions des images ====
 +
 +{{ Images_Cahier-101-08-089.png?600}}
 +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**.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +<WRAP column 30%>
 +**Tableau de bord -> Apparence -> Personnaliser -> WooCommerce**.
 +|{{ Images_Cahier-101-08-090.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +**Images de produit**.
 +|{{ Images_Cahier-101-08-091.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +**__Non recadrée__ -> Publier -> X**.
 +|{{ Images_Cahier-101-08-093.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +==== Général ====
 +
 +{{ Images_Cahier-101-08-094.png?600}}
 +=== Adresse de la boutique ===
 +
 +<nowiki>-</nowiki> **WooCommerce -> Réglages ->** onglet **Général**.
 +
 +<nowiki>-</nowiki> Cliquer **Ignorer** pour sup­pri­mer le message.
 +
 +<nowiki>-</nowiki> On vérifie/corrige l'adresse de notre Boutique.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +{{ Images_Cahier-101-08-095.png?600}}
 +=== Options générales ===
 +
 +On ajuste:
 +
 +● //**Emplacement(s) de vente**//
 + 
 +● //**Emplacement(s) de livraison**// 
 +
 +● //**Adresse client par défaut**// \\ {{Images_Cahier-101-03-005.png?25}} 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**
 +<WRAP clear></WRAP>
 +\\ 
 +
 +{{ Images_Cahier-101-08-096.png?600}}
 +=== Options devise ===
 +
 +● //**Devise**// 
 +
 +● //**Position devise**// 
 +
 +Si nous avons changé un paramètre, **Enregistrer les changements**.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +{{ Images_Cahier-101-08-097.png?600}}
 +{{Images_Cahier-101-03-006.png?25}}  On s'assure du succès de l'opération.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +=== Vérification de la Géolocalisation ===
 +
 +On vérifie si la base de données //GeoLite2-Country.mmdb//(( **GeoLite2-Country.mmdb:** Pour plus de détails, voir la section "GeoLite2 integration" à la page: [[https://woocommerce.com/posts/whats-new-woocommerce-3-4-gdpr-features-geolite2-integration/|https://woocommerce.com/posts/whats-new-woocommerce-3-4-gdpr-features-geolite2-integration/]]. )) pour la Géolocalisation a bien été téléchargée.
 +
 +<file>
 +[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 ~]#
 +</file>
 +
 +La base de donnée //(.mmdb - MaxMind database)// a bien été téléversée.
 +
 +== Adresse exacte pour le calcul des taxes ==
 +
 +//WooCommerce// utilise cette BD pour connaître l'emplacement des clients.
 +
 +//Référence:// [[https://fr.wikipedia.org/wiki/GeoIP|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__.
 +
 +== Utilité ==
 +
 +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.
 +
 +== Adresse exacte ==
 +
 +{{Images_Cahier-101-03-006.png?25}}  {{Images_Cahier-101-03-004.png?25}} 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//.
 +
 +==== Produits ====
 +
 +{{ Images_Cahier-101-08-098.png?600}}
 +=== Général ===
 +
 +Cliquer Ignorer pour supprimer le message.
 +
 +● //**Page boutique**//\\ Prendre les défauts.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +{{ Images_Cahier-101-08-099.png?600}}
 +● //**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.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +{{ Images_Cahier-101-08-100.png?600}}
 +● //**Dimensions**//\\ 
 +Unité de poids  **kg** \\ 
 +Unité de dimensions  **cm** 
 +<WRAP clear></WRAP>
 +\\ 
 +
 +{{ Images_Cahier-101-08-101.png?600}}
 +● //**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.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +=== Inventaire ===
 +
 +{{ Images_Cahier-101-08-102.png?600}}
 +Si on vend plusieurs articles, on peut savoir la quantité de stock disponible en cochant **Activer la gestion du stock**.
 +
 +{{Images_Cahier-101-03-004.png?25}} 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)**//\\ 
 +{{Images_Cahier-101-03-005.png?25}} Il n'est pas nécessaire que l'adresse courriel soit la même que celle de l'administrateur de la //Sandbox//.\\ 
 +{{Images_Cahier-101-03-005.png?25}} 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.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +=== Produits téléchargeables ===
 +
 +{{ Images_Cahier-101-08-103.png?600}}
 +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.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +==== TVA ====
 +
 +=== Options TVA ===
 +
 +{{ Images_Cahier-101-08-104.png?600}}
 +● //**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.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +{{ Images_Cahier-101-08-105.png?600}}
 +Après avoir enregistrer les changements, un nouveau menu est créé pour la //Taxe sur livre//.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +=== Taux standards ===
 +
 +{{ Images_Cahier-101-08-106.png?600}}
 +On peut vérifier les taux actuels en allant sur le site: [[http://www.retailcouncil.org/quickfacts/taxrates|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''.
 +
 +{{Images_Cahier-101-03-006.png?25}}  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.
 +
 +{{Images_Cahier-101-03-005.png?25}} En date du 24 juin 2019, les tarifs des taxes sont demeurés les mêmes.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +== Téléchargement du fichier des Taux standards ==
 +
 +{{Images_Cahier-101-03-003.png?22}} S'assurer que //JavaScript// est activé pour le téléversement.
 +
 +<WRAP column 30%>
 +Onglet  **TVA -> Taux standards -> Import CSV**.
 +|{{ Images_Cahier-101-08-107.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +**Parcourir...**
 +|{{ Images_Cahier-101-08-108.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +Sélectionner le fichier **-> Ouvrir**.
 +|{{ Images_Cahier-101-08-109.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +**Téléverser le fichier et importer**.\\ 
 +On voit la taille maximum //(UploadMaxFilesize=75 MB)// telle qu'affichée au paragraphe [[nethserver_101_cahier_08_woocommerce_paypal_stripe#Paramètres PHP72]].
 +
 +**Voir les taux de TVA**.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-110.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-111.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\ 
 +
 +{{ Images_Cahier-101-08-112.png?600}}
 +**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.
 +
 +{{Images_Cahier-101-03-006.png?25}}  La //Priorité// de la //TVQ// est de __2__ et signifie que la //TPS// sera calculée en premier et ensuite la //TVQ//.
 +
 +{{Images_Cahier-101-03-005.png?25}} 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.
 +
 +{{Images_Cahier-101-03-008.png?25}} 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 [[nethserver_101_cahier_08_woocommerce_paypal_stripe#Expédition et Recommandé]].
 +<WRAP clear></WRAP>
 +\\ 
 +
 +== Adresse exacte pour le calcul des taxes ==
 +
 +{{Images_Cahier-101-03-006.png?25}}  {{Images_Cahier-101-03-004.png?25}} 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__.
 +
 +=== Taux réduit ===
 +
 +{{ Images_Cahier-101-08-113.png?600}}
 +N'est pas utilisé.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +=== Taux zéro ===
 +
 +{{ Images_Cahier-101-08-114.png?600}}
 +N'est pas utilisé.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +== Taxe sur livre ==
 +
 +//**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 <wrap em>détaxé</wrap> dans le régime de la //TVQ//. Cependant, dans le régime de la //TPS//, cette vente est <wrap em>taxable</wrap> et peut, dans certaines circonstances, faire l’objet d’un remboursement.
 +
 +{{Images_Cahier-101-03-005.png?25}} __La livraison__ de tout livre est taxable.
 +
 +{{ Images_Cahier-101-08-115.png?600}}
 +**Insérer ligne ->** entrer les informations telles que ci-dessous pour la **TVQ-LIVRE ->** répéter pour la //TPS// **-> Enregistrer les changements**.\\ 
 +{{ Images_Cahier-101-08-116.png?50 }}
 +
 +Seulement la //TPS// sera appliquée sur les livres et //0%// sera indiqué pour la //Taxe de Vente du Québec//.
 +<WRAP clear></WRAP>
 +
 +==== Expédition ====
 +
 +=== Zone d'expédition ===
 +
 +{{Images_Cahier-101-03-005.png?25}} 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 [[nethserver_101_cahier_08_woocommerce_paypal_stripe#Expédition et Recommandé]].
 +
 +On examine la Zone d'expédition pour le Canada.
 +
 +<WRAP column 45%>
 +Onglet **Expédition -> Zone d'expédition ->** on survole **Canada -> Modifier**.
 +|{{ Images_Cahier-101-08-117.png?400 }}|
 +</WRAP>
 +<WRAP column 45%>
 +<nowiki>-</nowiki> Le //Mode d'expédition// est //**Activé**//.\\ 
 +<nowiki>-</nowiki> On survole **Forfait -> Modifier**.
 +|{{ Images_Cahier-101-08-118.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\ 
 +
 +<WRAP column 45%>
 +<nowiki>-</nowiki> Les réglages s'affichent et on peut les modifier **-> Enregistrer les modifications**.\\ 
 +<nowiki>-</nowiki> Ou, on peut fermer //(X)// et retourner à //Zone d'expédition//.
 +|{{ Images_Cahier-101-08-119.png?400 }}|
 +</WRAP>
 +<WRAP column 45%>
 +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**.
 +|{{ Images_Cahier-101-08-120.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\ 
 +
 +=== Options de livraison ===
 +
 +{{ Images_Cahier-101-08-121.png?600}}
 +//**Calculs**//
 +
 +<WRAP indent>
 +☑ **Activer le calculateur de frais de livraison sur la page panier**
 +
 +☑ **Masquer les frais de livraison jusqu’à ce qu’une adresse soit renseignée**
 +</WRAP>
 +
 +//**Destination de la livraison**//
 +
 +<WRAP indent>
 +⦿ **Par défaut à l’adresse de livraison client**
 +</WRAP>
 +
 +**Enregistrer les changements**.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +=== Classes de livraison ===
 +
 +{{ Images_Cahier-101-08-122.png?600}}
 +Pour plus de détails, voir: [[https://docs.woocommerce.com/document/table-rate-shipping/|https://docs.woocommerce.com/document/table-rate-shipping/]].
 +<WRAP clear></WRAP>
 +\\ 
 +
 +==== Paiements ====
 +
 +{{ Images_Cahier-101-08-123.png?600}}
 +{{Images_Cahier-101-03-005.png?25}} 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**.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +=== PayPal ===
 +
 +{{ Images_Cahier-101-08-124.png?600}}
 +☑ Il faut aussi __toujours__ cocher **Activer PayPal standard**.
 +
 +● {{Images_Cahier-101-03-006.png?25}} 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.
 +
 +● {{Images_Cahier-101-03-006.png?25}}  **E-mail du destinataire** est l'adresse courriel de celui qui recevra les notifications après une vente. <wrap em>Il est impératif</wrap> 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 [[nethserver_101_cahier_08_woocommerce_paypal_stripe#Création d'une signature API]].
 +
 +{{Images_Cahier-101-03-006.png?25}}  Si le paramètre **Activer PayPal sandbox** est coché, les informations API sont //Optionnelles//
 +\\ 
 +\\ 
 +
 +-> **Enregistrer les changements**.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +== Différences entre les Modes Live & Sandbox ==
 +
 +<WRAP column 30%>
 +Les images ci-contre illustrent les différences entre le //Mode Live// et le //Mode Sandbox//.
 +</WRAP>
 +<WRAP column 30%>
 +Mode Live
 +{{ Images_Cahier-101-08-125.png?400 }}
 +
 +{{ Images_Cahier-101-08-127.png?400 }}
 +</WRAP>
 +<WRAP column 30%>
 +Mode SandBox
 +{{ Images_Cahier-101-08-126.png?400 }}
 +
 +{{ Images_Cahier-101-08-128.png?400 }}
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\ 
 +
 +==== Comptes et confidentialité ====
 +
 +{{ Images_Cahier-101-08-129.png?600}}
 +Les configurations ci-contre sont celles que nous utilisons pour notre propre boutique.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +=== Politique de confidentialité ===
 +
 +{{ Images_Cahier-101-08-130.png?600}}
 +Pour la configuration de la //Page Politique de confidentialité//, on choisit notre page Vie privée créée au paragraphe [[nethserver_101_cahier_08_woocommerce_paypal_stripe#Vie privée]].
 +<WRAP clear></WRAP>
 +\\ 
 +
 +=== Conservation des données personnelles ===
 +
 +{{ Images_Cahier-101-08-131.png?600}}
 +Les configurations ci-contre sont celles que nous utilisons pour notre propre boutique.
 +
 +Enregistrer le modifications.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +==== Courriels (E-mails) ====
 +
 +Sous l'onglet **E-mails**, le destinataire est l'adresse courriel, c.-à-d. celle de l'administrateur du site de //Commerce en ligne//.
 +
 +=== Nouvelle commande ===
 +
 +<WRAP column 45%>
 +\\ 
 +\\ 
 +\\ 
 +\\ 
 +\\ 
 +On ajuste les différents paramètres.
 +|{{ Images_Cahier-101-08-132.png?400 }}|
 +</WRAP>
 +<WRAP column 45%>
 +<nowiki>-</nowiki> On peut //désactiver// ce courriel. //(Non recommandé.)//\\ 
 +<nowiki>-</nowiki> //**Destinataire:**// adresse courriel de l'administrateur du site.\\ 
 +<nowiki>-</nowiki> On peut //modifier les modèles// des courriels.\\ 
 +**-> Enregistrer les changements**.\\ 
 +<nowiki>-</nowiki> On clique l'icône de retour, à la fin de la ligne //**Nouvelle commande**//.
 +|{{ Images_Cahier-101-08-133.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +Lors d'une nouvelle commande, l'usager administrateur du site recevra un courriel indiquant qu'un client à généré une nouvelle commande.
 +\\ 
 +
 +=== Commande annulée/échouée ===
 +
 +<WRAP column 45%>
 +<nowiki>-</nowiki> On peut activer/désactiver ce courriel.\\ 
 +<nowiki>-</nowiki> //**Destinataire:**// adresse courriel de l'administrateur du site.\\ 
 +-> Enregistrer les changements.\\ 
 +<nowiki>-</nowiki> On clique l'icône de retour, à la fin de la ligne //**Commande Annulée**//.
 +|{{ Images_Cahier-101-08-134.png?400 }}|
 +</WRAP>
 +<WRAP column 45%>
 +<nowiki>-</nowiki> On peut activer/désactiver ce courriel.\\ 
 +<nowiki>-</nowiki> //**Destinataire:**// adresse courriel de l'administrateur du site.\\ 
 +-> Enregistrer les changements.\\ 
 +<nowiki>-</nowiki> On clique l'icône de retour, à la fin de la ligne //**Commande Annulée**//.
 +|{{ Images_Cahier-101-08-135.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Options d’e-mail de l’expéditeur ===
 +
 +On est de retour à la page de l'onglet **E-mails**.
 +
 +<WRAP column 45%>
 +● Ici, on peut changer le //**Nom d'expéditeur**//.
 +
 +● On peut modifier l'//**Adresse de l'expéditeur**// des courriels de **WooCommerce**.
 +
 +Le nom de l'expéditeur provient du paramètre entré dans: //Tableau de bord de WordPress -> Réglages -> Général -> Réglages généraux -> Adresse de messagerie//.
 +</WRAP>
 +<WRAP column 45%>
 +{{ Images_Cahier-101-08-136.png?400 }}
 +
 +{{ Images_Cahier-101-08-137.png?400 }}
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\ 
 +
 +=== Modèle d'e-mail ===
 +
 +On est toujours sur la page de l'onglet **E-mails**.
 +
 +{{ Images_Cahier-101-08-138.png?600}}
 +Comme image d'en-tête, nous allons prendre note logo utilisé pour l'image d'en-tête de notre site du [[nethserver_101_cahier_06_nethserver_wordPress|Cahier-06]]: //NethServer & WordPress// à la section //Logo et slogan//.
 +
 +{{Images_Cahier-101-03-006.png?25}} 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.
 +
 +{{Images_Cahier-101-03-004.png?25}} 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.
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-140.png?350}}
 +Au retour de l'enregistrement des modifications, on clique **Cliquez ici pour prévisualiser votre modèle d’e-mail**.
 +
 +{{ Images_Cahier-101-08-139.png?400 }}
 +
 +Notre modèle de courriel s'affiche tel que ci-contre.
 +<WRAP clear></WRAP>
 +\\
 +
 +==== Avancé ====
 +
 +=== Installation des pages ===
 +
 +{{ Images_Cahier-101-08-141.png?600}}
 +Pour les Conditions générales de vente, on choisit la page du paragraphe [[nethserver_101_cahier_08_woocommerce_paypal_stripe#Conditions de vente]].
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-142.png?600}}
 +{{Images_Cahier-101-03-008.png?25}} 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)**.
 +<WRAP clear></WRAP>
 +
 +=== Points de terminaisons de validation de commande ===
 +
 +{{ Images_Cahier-101-08-143.png?600}}
 +On prend les paramètres par défaut.
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Terminaisons du compte ===
 +
 +{{ Images_Cahier-101-08-144.png?600}}
 +On prend les paramètres par défaut.
 +
 +**-> Enregistrer les modifications** si on a changé un paramètre.
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Clés/Apps ===
 +
 +{{ Images_Cahier-101-08-145.png?600}}
 +N'est pas utilisé.
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Crochets Web ===
 +
 +{{ Images_Cahier-101-08-146.png?600}}
 +N'est pas utilisé.
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Ancienne API ===
 +
 +{{ Images_Cahier-101-08-147.png?600}}
 +N'est pas utilisé.
 +<WRAP clear></WRAP>
 +\\
 +
 +==== Tout le monde peut s'enregistrer ====
 +
 +{{ Images_Cahier-101-08-148.png?600}}
 +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**.
 +<WRAP clear></WRAP>
 +\\
 +
 +==== Création d'un utilisateur "acheteur-test" dans WordPress ====
 +
 +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.
 +
 +{{Images_Cahier-101-03-004.png?25}} 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 [[nethserver_101_cahier_08_woocommerce_paypal_stripe#acheteur-test]].
 +
 +<WRAP column 35%>
 +**Tableau de bord -> Utilisateurs -> Ajouter**.
 +|{{ Images_Cahier-101-08-149.png?400 }}|
 +</WRAP>
 +<WRAP column 55%>
 +On entre les informations demandées **-> Ajouter un utilisateur**.
 +|{{ Images_Cahier-101-08-150.png?500 }}|
 +
 +On s'assure que tout s'est bien déroulé.
 +|{{ Images_Cahier-101-08-151.png?500 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +=== Courriel à l'administrateur du site ===
 +
 +{{ Images_Cahier-101-08-152.png?600}}
 +L'administrateur du site reçoit un courriel annonçant qu'un nouvel utilisateur s'est inscrit.
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Informations du nouvel utilisateur ===
 +
 +<WRAP column 45%>
 +**Tableau de bord -> Utilisateurs ->** double cliquer **acheteur-test**.
 +|{{ Images_Cahier-101-08-153.png?400 }}|
 +
 +{{Images_Cahier-101-03-004.png?25}} On pourrait modifier son adresse de livraison pour vérifier que celle-ci fonctionne à l'international.
 +
 +== Adresse exacte pour le calcul des taxes ==
 +
 +{{Images_Cahier-101-03-006.png?25}}  {{Images_Cahier-101-03-004.png?25}} 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__.
 +
 +Lors de la mise à jour de l'utilisateur, on s'assure du succès de l'opération.
 +
 +{{ Images_Cahier-101-08-156.png?200 }}
 +</WRAP>
 +<WRAP column 45%>
 +Pour ne pas devoir entrer les informations à chaque achat, on les spécifie ici, une seule fois 
 +**-> Mettre à jour l'utilisateur**.
 +|{{ Images_Cahier-101-08-154.png?400 }}|
 +
 +|{{ Images_Cahier-101-08-155.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +==== Création d'un utilisateur "acheteur" dans WordPress ====
 +
 +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**.
 +\\ 
 +
 +==== Code Promo ====
 +
 +<WRAP column 45%>
 +**WooCommerce -> Codes promo -> Créer votre premier code promo**.
 +|{{ Images_Cahier-101-08-157.png?400 }}|
 +</WRAP>
 +<WRAP column 45%>
 +<nowiki>-</nowiki> Menu **Général**.\\ 
 +<nowiki>-</nowiki> Entrer les informations demandées.
 +|{{ Images_Cahier-101-08-158.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 45%>
 +<nowiki>-</nowiki> Menu **Restriction d'usage**.\\ 
 +<nowiki>-</nowiki> Entrer les informations demandées.
 +|{{ Images_Cahier-101-08-159.png?400 }}|
 +</WRAP>
 +<WRAP column 45%>
 +<nowiki>-</nowiki> Menu **Limites d'utilisation**.\\ 
 +<nowiki>-</nowiki> Entrer les informations demandées **-> Publier**.
 +|{{ Images_Cahier-101-08-160.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-161.png?600}}
 +Pour vérifier, on retourne à **WooCommerce -> Codes promo**.
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 45%>
 +Le code promo a été créé et il pourra être insérer depuis les pages //Panier// et //Validation de la commande//.
 +</WRAP>
 +<WRAP column 45%>
 +|{{ Images_Cahier-101-08-162.png?400 }}|
 +
 +|{{ Images_Cahier-101-08-163.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +==== Exemples des sous-menus ====
 +
 +=== Commandes ===
 +
 +
 +{{ Images_Cahier-101-08-164.png?600}}
 +Pour afficher les commandes reçues: **Tableau de bord -> WooCommerce -> Commandes**.
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Rapports ===
 +
 +== Commandes, Clients, Stock et TVA ==
 +
 +{{ Images_Cahier-101-08-165.png?600}}
 +**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.
 +<WRAP clear></WRAP>
 +\\
 +
 +=== État ===
 +
 +{{ Images_Cahier-101-08-166.png?600}}
 +Pour connaître tous les environnements de notre système.
 +
 +**Tableau de bord -> WooCommerce -> État**.
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Extensions WooCommerce ===
 +
 +{{ Images_Cahier-101-08-167.png?600}}
 +Extensions disponibles pour //WooCommerce//. La très grande majorité ne sont pas LIBRE.
 +
 +**Tableau de bord -> WooCommerce -> Extensions**.
 +<WRAP clear></WRAP>
 +\\
 +
 +==== Extensions WordPress ====
 +
 +=== Canada Post Shipping For WooCommerce ===
 +
 +{{ Images_Cahier-101-08-168.png?400}}
 +{{Images_Cahier-101-03-006.png?25}}  Nous n'avons pas vérifié cette extension. __Utilisez à vos risques et périls__.
 +
 +https://fr.wordpress.org/plugins/canada-post-shipping-for-woocommerce/
 +<WRAP clear></WRAP>
 +\\
 +
 +=== UPS WooCommerce Shipping Method Plugin ===
 +
 +{{ Images_Cahier-101-08-169.png?400}}
 +{{Images_Cahier-101-03-006.png?25}}  Nous n'avons pas vérifié cette extension. __Utilisez à vos risques et périls__.
 +
 +https://fr.wordpress.org/plugins/flexible-shipping-ups/
 +<WRAP clear></WRAP>
 +\\
 +<WRAP centeralign>**Nous sommes prêts à créer nos produits.**</WRAP>
 +\\
 +
 +===== Produits physiques =====
 +
 +==== Catégorie ====
 +
 +Nous créons une catégorie de produits multimédia.
 +
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +**Tableau de bord -> WooCommerce -> Produits -> Catégories**.
 +|{{ Images_Cahier-101-08-170.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +\\ 
 +On entre les informations demandées.
 +|{{ Images_Cahier-101-08-171.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +<nowiki>-</nowiki> On ajoute une //**Description**//.\\ 
 +<nowiki>-</nowiki> On ajoute une image.\\ 
 +<nowiki>-</nowiki> **Ajouter une nouvelle catégorie de produits**.
 +|{{ Images_Cahier-101-08-172.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-173.png?600}}
 +On rafraîchit la page.
 +
 +La nouvelle catégorie apparaît.
 +
 +{{Images_Cahier-101-03-005.png?25}} 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.
 +<WRAP clear></WRAP>
 +\\
 +
 +==== Création du produit ====
 +
 +<WRAP column 30%>
 +**Tableau de bord -> WooCommerce -> Produits -> Ajouter un produit ->** on nomme le produit.
 +|{{ Images_Cahier-101-08-174.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +On entre la description du produit.
 +|{{ Images_Cahier-101-08-175.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +\\
 +**29.97 -> Taxable -> Standard**.
 +|{{ Images_Cahier-101-08-176.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +Description courte du produit.
 +|{{ Images_Cahier-101-08-177.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +**Définir l'image du produit**.
 +|{{ Images_Cahier-101-08-178.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +**Téléverser des fichiers**.
 +|{{ Images_Cahier-101-08-179.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +\\ 
 +**Choisir des fichiers**.
 +|{{ Images_Cahier-101-08-180.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +On choisit le fichier de l'image dans un répertoire sur le poste de travail.
 +|{{ Images_Cahier-101-08-181.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +L'image est sélectionnée.
 +|{{ Images_Cahier-101-08-182.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> On entre un //**Titre**//, un //**Texte alternatif**// et une //**Description**//.\\ 
 +<nowiki>-</nowiki> La //**Légende**// s'affiche en bas de l'image lorsqu'on agrandit celle-ci sur la page du produit.\\ 
 +<nowiki>-</nowiki> **Définir l'image du produit**.
 +|{{ Images_Cahier-101-08-183.png?400 }}|
 +
 +|{{ Images_Cahier-101-08-184.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +\\ 
 +\\ 
 +\\ 
 +L'image du produit est affiché.
 +|{{ Images_Cahier-101-08-185.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +\\
 +\\ 
 +\\ 
 +Cocher la catégorie du produit.
 +|{{ Images_Cahier-101-08-186.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +**Publier**.
 +|{{ Images_Cahier-101-08-187.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +**Prévisualiser les modifications**.
 +|{{ Images_Cahier-101-08-188.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +La page du produit est affiché sur le site.
 +|{{ Images_Cahier-101-08-189.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +Le produit est aussi affiché dans la //Boutique//.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-190.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\ 
 +\\ 
 +
 +===== Produits téléchargeables =====
 +
 +==== Catégorie ====
 +
 +{{Images_Cahier-101-03-006.png?25}}  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//.
 +
 +<WRAP column 30%>
 +**Tableau de bord -> WooCommerce -> Produits -> Catégories**.
 +|{{ Images_Cahier-101-08-191.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +On entre les informations demandées.
 +|{{ Images_Cahier-101-08-192.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +<nowiki>-</nowiki> **Téléverser/Ajouter image**.\\
 +<nowiki>-</nowiki> **Ajouter une catégorie**.
 +|{{ Images_Cahier-101-08-193.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-194.png?600}}
 +On rafraîchit la page.
 +
 +La nouvelle catégorie apparaît.
 +<WRAP clear></WRAP>
 +\\
 +
 +==== Création du produit ====
 +
 +=== Titre et description ===
 +
 +<WRAP column 45%>
 +**Tableau de bord WordPress -> WooCommerce -> Produits -> Ajouter un produit**.
 +|{{ Images_Cahier-101-08-195.png?400 }}|
 +{{Images_Cahier-101-03-004.png?25}} Dans le titre ci-dessus, nous avons incorporé le code html ''<br/>'' afin que le titre s'affiche sur deux lignes au lieu d'une seule.
 +
 +{{Images_Cahier-101-03-003.png?22}} Plus loin, nous ajusterons la police pour les titres.
 +</WRAP>
 +<WRAP column 45%>
 +\\ 
 +Description du produit.
 +|{{ Images_Cahier-101-08-196.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +=== Prix du produit ===
 +
 +<WRAP column 45%>
 +<nowiki>-</nowiki> //**Données Produit**// **-> Produit simple**.
 +
 +<nowiki>-</nowiki> Cocher **Virtuel**.
 +
 +<nowiki>-</nowiki> Cocher **Téléchargeable**.
 +
 +<nowiki>-</nowiki> On entre le prix.
 +</WRAP>
 +<WRAP column 45%>
 +|{{ Images_Cahier-101-08-197.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Fichiers téléchargeables ===
 +
 +<WRAP column 30%>
 +**Ajouter un fichier ->** on entre le nom: **Cahier-04 Fichier PDF -> Choisir un fichier**.
 +|{{ Images_Cahier-101-08-198.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +Onglet **Téléverser des fichiers**.
 +|{{ Images_Cahier-101-08-199.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +Sélectionner des fichier.
 +|{{ Images_Cahier-101-08-200.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +\\ 
 +\\ 
 +Sélectionner le fichier PDF **-> Ouvrir**.
 +|{{ Images_Cahier-101-08-201.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +\\ 
 +Entrer un **Titre**, une **Légende**, une **Description -> Insérer l'URL du fichier**.
 +|{{ Images_Cahier-101-08-202.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +<nowiki>-</nowiki> Le fichier est inséré.\\ 
 +<nowiki>-</nowiki> On clique **Ajouter un fichier** et on refait la même procédure pour insérer un deuxième fichier téléchargeable de ce produit.
 +|{{ Images_Cahier-101-08-203.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> Ce deuxième fichier est le diagramme du réseau décrit dans le premier document.
 +
 +<nowiki>-</nowiki> Le lien du deuxième fichier apparaît.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-204.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-205.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Fichiers des sommes de contrôle ===
 +
 +<WRAP column 45%>
 +De la même manière, on ajoute les fichiers des sommes de contrôle //SHA-1// des fichiers précédents.
 +</WRAP>
 +<WRAP column 45%>
 +|{{ Images_Cahier-101-08-206.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Limite, Expiration, Type, État de la TVA et Classe ===
 +
 +<WRAP column 45%>
 +On entre les informations suivantes: **5 -> Jamais -> Application/Logiciel -> Taxable -> Standard**.
 +</WRAP>
 +<WRAP column 45%>
 +|{{ Images_Cahier-101-08-207.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Description courte, Catégorie et Image du produit===
 +
 +<WRAP column 30%>
 +On entre la **Description courte du produit**.
 +|{{ Images_Cahier-101-08-208.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +On coche la **Catégorie du produit**.
 +|{{ Images_Cahier-101-08-209.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +**Définir l'image du produi**t.
 +|{{ Images_Cahier-101-08-210.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +\\ 
 +**Envoyer des fichiers**.
 +|{{ Images_Cahier-101-08-211.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +**Choisir des fichiers**.
 +|{{ Images_Cahier-101-08-212.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +Entrer les informations requises **-> Définir l'image produit**.
 +|{{ Images_Cahier-101-08-213.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\ 
 +
 +=== Galerie produit ===
 +
 +On ajoute des images des pages du sommaire.
 +
 +<WRAP column 30%>
 +\\ 
 +**Ajouter des images à la galerie produit**.
 +|{{ Images_Cahier-101-08-214.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +On choisit les images, on les insère, on entre les informations demandées **-> Ajouter à la galerie**.
 +|{{ Images_Cahier-101-08-215.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +Les images apparaissent.
 +|{{ Images_Cahier-101-08-216.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +On peut déplacer une image en la survolant puis, //cliquer et glisser//.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-217.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Publication et Prévisualisation ===
 +
 +<WRAP column 30%>
 +**Publier**.
 +|{{ Images_Cahier-101-08-218.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +**Prévisualiser les modifications**.
 +|{{ Images_Cahier-101-08-219.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +La page du produit s'affiche.
 +|{{ Images_Cahier-101-08-220.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +**Boutique ->** tous les produits de la boutique apparaissent.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-221.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +==== Lightbox ====
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> On survole l'image pour zoomer et se déplacer sur la page du produit.
 +
 +<nowiki>-</nowiki> On clique une image de sa galerie et elle remplacera l'image du produit.
 +
 +<nowiki>-</nowiki> Lorsqu'on clique la ''loupe'' en haut, sur la droite d'un produit, **Lightbox** l'affiche en mode plein-écran.\\ 
 +On peut passer à l'image précédente ou suivante, agrandir et fermer en cliquant les différentes icônes.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-222.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-223.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +===== Régénération des Images =====
 +
 +==== Introduction ====
 +
 +Parfois, on peut changer les dimensions des images. Voir: [[nethserver_101_cahier_08_woocommerce_paypal_stripe#Dimensions des images]]. Il nous faut alors redimensionner toutes les images de notre site à l'aide d'une extension WordPress: **Regenerate Thumbnails**.
 +
 +==== Informations sur l'image ====
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> De retour à notre Boutique, clac sur l'image du produit **-> Informations sur l'image**.
 +
 +<nowiki>-</nowiki> L'image //PNG// a une dimension de //551 x 712 pixels//.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-224.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-225.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +
 +== Examiner l'élément ==
 +
 +//Référence:// [[https://docs.woothemes.com/document/using-the-appropriate-product-image-dimensions/|https://docs.woothemes.com/document/using-the-appropriate-product-image-dimensions/]].
 +
 +{{ Images_Cahier-101-08-226.png?600}}
 +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//.
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Image générée par un appareil photo ===
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> Avec le navigateur Firefox, clac //(clic droit)// sur une image prise avec un appareil photo **-> Informations sur l'image**.
 +
 +<nowiki>-</nowiki> L'image JPEG a une dimension de //1600 x 1200 pixels//.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-227.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-228.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +==== Pixel ====
 +
 +//Référence:// [[https://fr.wikipedia.org/wiki/Pixel|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 [[https://www.w3.org/TR/CSS21/syndata.html#length-units|W3C]] définit le pixel comme 1/96 de pouce__.
 +\\ 
 +
 +==== Régénération des images ====
 +
 +=== Installation de l'extension ===
 +
 +Afin de régénérer toutes les images emmagasinées par WordPress, nous allons installer l'extension **Regenerate Thumbnails**.
 +
 +<WRAP column 30%>
 +**Tableau de bord  ->  Extensions  ->  Ajouter  ->  Mot-clé  ->  Regenerate Thumbnails**.
 +|{{ Images_Cahier-101-08-229.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +**Installer**.
 +|{{ Images_Cahier-101-08-230.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +**Activer**.
 +|{{ Images_Cahier-101-08-231.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\ 
 +
 +=== Régénération ===
 +
 +<WRAP column 60%>
 +\\ 
 +L'extension est installée et activée.
 +|{{ Images_Cahier-101-08-232.png?600 }}|
 +</WRAP>
 +<WRAP column 30%>
 +**Tableau de bord -> Outils -> Regenerate Thumbnails**.
 +|{{ Images_Cahier-101-08-233.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 40%>
 +<nowiki>-</nowiki> Décocher: //**Sauter la régénération des tailles de miniatures existantes et correctes (plus rapide)**//.\\ 
 +-> **Régénérer les miniature pour toutes les 2 pièces jointes**.
 +|{{ Images_Cahier-101-08-234.png?400 }}|
 +</WRAP>
 +<WRAP column 50%>
 +\\ 
 +\\ 
 +<nowiki>-</nowiki> On s'assure du succès de l'opération.\\ 
 +<wrap em>*</wrap> L'article //#8// n'est pas une image mais un PDF.
 +|{{ Images_Cahier-101-08-235.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +On retourne sur la page de notre Boutique et on clique sur l'image du produit **NethServer-101, Cahier-04: Internet et NethServer**.
 +
 +La page du produit s'affiche, les images sont claires, nettes et sans tronquage.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-236.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-237.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +==== Vérifications des vignettes ====
 +
 +<WRAP column 30%>
 +Les vignettes apparaissent sous l'image du produit.
 +|{{ Images_Cahier-101-08-238.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +On en clique une **-> Loupe**.
 +|{{ Images_Cahier-101-08-239.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +On peut agrandir à plein écran, passer à la vignette suivante ou précédente et fermer.
 +|{{ Images_Cahier-101-08-240.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +<WRAP centeralign>**Les images s'affichent correctement, elles sont claires et ne sont pas tronquées.**</WRAP>
 +\\
 +
 +===== Achats dans le bac à sable =====
 +
 +==== Introduction ====
 +
 +À la section [[nethserver_101_cahier_08_woocommerce_paypal_stripe#Compte PayPal]], nous avons créé un compte //PayPal//. De plus, à la section [[nethserver_101_cahier_08_woocommerce_paypal_stripe#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.
 +
 +==== Remarque importante sur les machines virtuelles ====
 +
 +=== Serveur relié directement à l'Internet vs virtuel ou LOCAL ===
 +
 +== Serveur relié directement à Internet ==
 +
 +{{ Images_Cahier-101-08-241.png?400}}
 +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 [[nethserver_101_cahier_08_woocommerce_paypal_stripe#Vérification des paramètres de test]].
 +<WRAP clear></WRAP>
 +
 +== Serveur virtuel sur le réseau LOCAL ==
 +
 +{{ Images_Cahier-101-08-242.png?500}}
 +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**//
 +
 +{{Images_Cahier-101-03-006.png?25}}  L'image de ce paragraphe provient de la version //1.0.0// de ce document.
 +
 +{{ Images_Cahier-101-08-243.png?500}}
 +À 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.
 +<WRAP clear></WRAP>
 +
 +**††** //**Explication**//
 +
 +<WRAP column 60%>
 +{{Images_Cahier-101-03-006.png?25}}  L'image de ce paragraphe provient de la version //1.0.0// de ce document.\\ 
 +Dans **Tableau de bord -> WooCommerce -> Commandes**, la commande affiche En cours.
 +
 +En effet, //WooCommerce// sait que la commande est //En cours//, car le client a sélectionné son article puis a cliqué les boutons:// Voir panier -> Procéder à la commande -> Payer avec PayPal//.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-244.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +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.
 +
 +{{Images_Cahier-101-03-005.png?25}} 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**//
 +
 +{{Images_Cahier-101-03-006.png?25}}  Les images de ce paragraphe proviennent de la version //1.0.0// de ce document.
 +
 +<WRAP column 50%>
 +Sur un serveur virtuel ou LOCAL, pour simuler la réception de la //Notification Instantanée de Paiement// et permettre à //WooCommerce// d'envoyer la facture de la commande, il suffit de changer le statut de la commande en cliquant l'icône <wrap em>En cours</wrap>. Il ne restera alors que les icônes //Terminer// et //Voir//.
 +</WRAP>
 +<WRAP column 20%>
 +|{{ Images_Cahier-101-08-245.png?400 }}|
 +</WRAP>
 +<WRAP column 20%>
 +|{{ Images_Cahier-101-08-246.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +{{Images_Cahier-101-03-003.png?22}} Une __solution à ce problème__ est de configurer le Serveur NethServer principal en mandataire inversé. Voir [[nethserver_101_cahier_10_mandataire_inverse#Cahier-10]]: //Mandataire inversé//.\\ 
 +{{Images_Cahier-101-03-006.png?25}}  __Ne pas oublier que le //Mandataire inversé// ne redirige pas les courriels__, mais seulement les requêtes html[s].\\ 
 +{{Images_Cahier-101-03-004.png?25}} Lorsque le Serveur NethServer roulant //WooCommerce// possède un FQDN défini chez un régistraire, __ce problème n'existe pas__.
 +
 +==== Vérification des paramètres de test ====
 +
 +{{ Images_Cahier-101-08-247.png?600}}
 +**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//.
 +
 +{{Images_Cahier-101-03-006.png?25}} __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//.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +{{Images_Cahier-101-03-003.png?22}} 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.
 +
 +{{ Images_Cahier-101-08-248.png?600}}
 +**Tableau de bord NethServer -> Gestion -> Adresses mail ->** onglet  **Alias de messagerie -> CRÉER NOUVEAU**.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +==== Usager pour le compte de test ====
 +
 +{{ Images_Cahier-101-08-249.png?600}}
 +Dans //Sandbox//, nous avons créé un usager de test: //acheteur-test@micronator-101.org// //(voir:// [[nethserver_101_cahier_08_woocommerce_paypal_stripe#Création d'un usager de test]]//)// de type //PERSONNAL//. C'est cet usager qu'on pourra utiliser pour nos tests d'achat.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +==== Achat d'un produit physique ====
 +
 +{{Images_Cahier-101-03-004.png?25}} On se déconnecte de notre site WooCommerce.
 +
 +<WRAP column 30%>
 +\\ 
 +Sur notre site on clique **Boutique**.
 +|{{ Images_Cahier-101-08-250.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +Sous //Chromecast//, on clique **Ajouter au panier**.
 +|{{ Images_Cahier-101-08-251.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +**Voir Panier**.
 +|{{ Images_Cahier-101-08-252.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +\\ 
 +**Valider la commande**.
 +|{{ Images_Cahier-101-08-253.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +<nowiki>-</nowiki> Nous avons créé l'usager //Acheteur Test// à la section [[nethserver_101_cahier_08_woocommerce_paypal_stripe#Création d'un utilisateur "acheteur-test" dans WordPress]].\\ 
 +<nowiki>-</nowiki> **Cliquez ici pour vous connecter**.
 +|{{ Images_Cahier-101-08-254.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +**Identifiant ou e-mail -> Mot de passe -> Connexion**.
 +|{{ Images_Cahier-101-08-255.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +
 +{{ Images_Cahier-101-08-256.png?500}}
 +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**.
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-257.png?600}}
 +{{Images_Cahier-101-03-006.png?25}}  Si vous ne cochez pas //J'ai lu et j'accepte les conditions générales//, vous recevrez le message d'erreur ci-dessous.
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +\\ 
 +\\ 
 +\\ 
 +Le client est redirigé vers un site sécurisé.
 +|{{ Images_Cahier-101-08-258.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +<nowiki>-</nowiki> Dans le cas de ce client particulier, nous lui avons déjà créé un usager dans le //Sandbox de PayPal//.\\ 
 +<nowiki>-</nowiki> On entre le **mot de passe** qu'on a donné à cet usager dans //Sandbox// **-> Log In**.
 +|{{ Images_Cahier-101-08-259.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +<nowiki>-</nowiki> On coche **Visa** qui est la carte choisie au paragraphe [[nethserver_101_cahier_08_woocommerce_paypal_stripe#Informations du compte et balance de la carte Visa]].\\ 
 +<nowiki>-</nowiki> On coche **Make this card my preferred way to pay**.\\ 
 +**-> Pay Now**.
 +|{{ Images_Cahier-101-08-260.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> Le paiement pour la commande a été accepté.\\ 
 +<nowiki>-</nowiki> **Return to Merchant**.
 +
 +De retour sur notre site, //acheteur-test// peut voir sa commande.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-261.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-262.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Examen de la commande du client ===
 +
 +{{ Images_Cahier-101-08-263.png?600}}
 +L'administrateur de notre site se connecte et se rend à **Tableau de bord WordPress -> WooCommerce -> Commandes**.
 +
 +Il clique sur la commande.
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +{{Images_Cahier-101-03-005.png?25}} La commande est en attente de paiement. Voir [[nethserver_101_cahier_08_woocommerce_paypal_stripe#Remarque importante sur les machines virtuelles]].
 +\\ 
 +
 +<nowiki>-</nowiki> Nous sommes sur un serveur LOCAL.\\ 
 +<nowiki>-</nowiki> Sur un site relié directement à l'Internet, l'//État// devrait être //En cours//, car la commande est déjà payée mais non livrée.\\ 
 +<nowiki>-</nowiki> On change pour **En cours**.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-264.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-265.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +**Mettre à jour** afin que soit envoyé les courriels: //Nouvelle commande// à l'administrateur du site et //Merci pour votre commande// à l'acheteur.
 +\\ 
 +
 +On expédie la commande et on change son état à **Terminée**, afin d'envoyer le courriel //Facture pour la commande// à l'acheteur.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-266.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-267.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +**Mettre à jour** pour envoyer le courriel.
 +|{{ Images_Cahier-101-08-268.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +État de la commande __avant__ l'expédition.
 +|{{ Images_Cahier-101-08-269.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +État de la commande __après__ l'expédition.
 +|{{ Images_Cahier-101-08-270.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Courriels de la commande ===
 +
 +{{Images_Cahier-101-03-006.png?25}}  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//.
 +
 +<WRAP column 30%>
 +Courriel //Nouvelle commande client// à l'administrateur du site //WooCommerce// avant l'expédition.
 +|{{ Images_Cahier-101-08-271.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +Courriel de remerciement à l'a­che­teur __avant__ l'expédition.
 +|{{ Images_Cahier-101-08-272.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +Courriel des détails de la facture à l'acheteur __après__ l'expédition.
 +|{{ Images_Cahier-101-08-273.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +
 +==== Achat d'un produit téléchargeable ====
 +
 +Si l'administrateur du site ou l'utilisateur //acheteur-test// est logué, __il se délogue__.
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> Sur le site, on clique **Boutique**.\\ 
 +<nowiki>-</nowiki> Sous l'image du PDF, on clique **Ajouter au panier**.
 +|{{ Images_Cahier-101-08-274.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +**Voir Panier**.
 +|{{ Images_Cahier-101-08-275.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +**Valider la commande**.
 +|{{ Images_Cahier-101-08-276.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> 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.\\ 
 +<nowiki>-</nowiki> **Cliquez ici pour vous connecter**.
 +|{{ Images_Cahier-101-08-277.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +\\ 
 +**Identifiant ou e-mail -> Mot de passe -> Connexion**.
 +|{{ Images_Cahier-101-08-278.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +\\ 
 +Les coordonnées du client sont entrées automatiquement par //WooCommerce//.
 +|{{ Images_Cahier-101-08-279.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Paiement ===
 +
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +<nowiki>-</nowiki> Cocher //J’ai lu et j’accepte les conditions générales//.\\ 
 +<nowiki>-</nowiki> **Payer avec PayPal**.
 +|{{ Images_Cahier-101-08-280.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +\\ 
 +L'adresse courriel est déjà entrée, on entre le **mot de passe -> Log In**.
 +|{{ Images_Cahier-101-08-281.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +<nowiki>-</nowiki> Quelque fois, //Sandbox// ne se souviens pas de notre choix de paiement préféré.\\ 
 +<nowiki>-</nowiki> Cette fois, on coche et on paie avec notre compte **PayPal Balance -> Payer maintenant**.
 +|{{ Images_Cahier-101-08-282.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> Les détails de la transaction sont affichés.\\ 
 +<nowiki>-</nowiki> **Return to Merchant**.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-283.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +=== De retour à la Boutique ===
 +
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +Les détails de la commande sont affichés.
 +|{{ Images_Cahier-101-08-284.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +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.
 +|{{ Images_Cahier-101-08-285.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +<nowiki>-</nowiki> L'administrateur du site change l'//État de la commande// à **Terminée**.\\ 
 +<nowiki>-</nowiki> **Mettre à jour**.
 +|{{ Images_Cahier-101-08-286.png?400 }}|
 +
 +|{{ Images_Cahier-101-08-287.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +{{Images_Cahier-101-03-005.png?25}} 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.\\ 
 +{{Images_Cahier-101-03-006.png?25}}  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//.
 +\\ 
 +
 +=== Téléchargement ===
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> **Mon compte**.\\ 
 +<nowiki>-</nowiki> **Commandes -> Voir**.
 +|{{ Images_Cahier-101-08-288.png?400 }}|
 +
 +|{{ Images_Cahier-101-08-289.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +On clique **Cahier-04 Fichier PDF** pour télécharger le document.
 +|{{ Images_Cahier-101-08-290.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +On sauvegarde le fichier PDF.
 +|{{ Images_Cahier-101-08-291.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> On rafraîchit la page.\\ 
 +<nowiki>-</nowiki> Il ne reste que //4// autres téléchargement pour ce fichier.
 +
 +{{Images_Cahier-101-03-005.png?25}} Le nombre de téléchargement par fichier est configuré lors de la création du produit. Voir le paragraphe [[nethserver_101_cahier_08_woocommerce_paypal_stripe#Limite, Expiration, Type, État de la TVA et Classe]].
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-292.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +== Nombre limite de téléchargements ==
 +
 +<WRAP column 30%>
 +\\ 
 +On télécharge encore **4** fois le mê­me fichier pour voir le nombre limite de téléchargements.
 +
 +{{ Images_Cahier-101-08-293.png?125 }}
 +</WRAP>
 +<WRAP column 30%>
 +<nowiki>-</nowiki> Au sixième téléchargement, le //nombre limite de téléchargements autorisé// a été déjà atteint.\\ 
 +<nowiki>-</nowiki> **Aller à la boutique**.
 +|{{ Images_Cahier-101-08-294.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +<nowiki>-</nowiki> **Mon compte -> Téléchargements**.\\ 
 +<nowiki>-</nowiki> Le //nombre de téléchargements// pour ce fichier est épuisé.
 +|{{ Images_Cahier-101-08-295.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Courriels de la nouvelle commande ===
 +
 +<WRAP column 30%>
 +\\ 
 +Courriel //Nouvelle commande client// à l'administrateur du site //WooCommerce//.
 +|{{ Images_Cahier-101-08-296.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +Courriel de //remerciement/facture// à l'acheteur contenant les liens de téléchargements ...
 +|{{ Images_Cahier-101-08-297.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +... y sont inclus.
 +|{{ Images_Cahier-101-08-298.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Permissions des téléchargements ===
 +
 +{{ Images_Cahier-101-08-299.png?600}}
 +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...
 +<WRAP clear></WRAP>
 +\\
 +<WRAP centeralign>**Voilà, notre boutique WooCommerce fonctionne parfaitement en mode TEST de PayPal.**</WRAP>
 +\\
 +
 +===== Achat réel =====
 +
 +==== Introduction ====
 +
 +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 [[nethserver_101_cahier_08_woocommerce_paypal_stripe#Création d'un utilisateur "acheteur" dans WordPress]].
 +
 +==== Modifications avant l'achat réel ====
 +
 +//**► Livraison**//
 +
 +<nowiki>-</nowiki> **Tableau de bord WordPress |  WooCommerce -> Réglages -> Expédition -> Zones d'expédition -> Canada -> Forfait -> Coût**.
 +
 +<WRAP column 55%>
 +<nowiki>-</nowiki> **Ajuster le coût** le plus bas possible.
 +
 +<nowiki>-</nowiki> **Enregistrer les modifications**.
 +</WRAP>
 +<WRAP column 35%>
 +|{{ Images_Cahier-101-08-300.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +//**► Désactivation du bac à sable**//
 +
 +**Tableau de bord WordPress -> WooCommerce -> Réglages -> Paiement -> PayPal  Gérer**.
 +
 +<WRAP column 55%>
 +Décocher **Activer PayPal sandbox**.
 +</WRAP>
 +<WRAP column 35%>
 +|{{ Images_Cahier-101-08-301.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +//**► Informations d’identification API**//
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> On s'assure qu'on est bien en //Mode LIVE// et que nos //justificatifs API Live// sont tous présents.
 +
 +<nowiki>-</nowiki> **Enregistrer les modifications**.
 +</WRAP>
 +<WRAP column 60%>
 +|{{ Images_Cahier-101-08-302.png?600 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +=== Prix des produits ===
 +
 +//**► Cahier-04**//
 +
 +**Tableau de bord WordPress -> Produits -> NethServer-101, Cahier-04... -> Modifier -> Tarif régulier ($)**.
 +
 +<WRAP column 55%>
 +Ajuster le coût à **0.99**.
 +
 +**Mettre à jour** et vérifier avec **Prévisualiser les modifications**.
 +</WRAP>
 +<WRAP column 35%>
 +|{{ Images_Cahier-101-08-303.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +//**► Lecteur HDMI**//
 +
 +**Tableau de bord WordPress -> Produits -> Lecteur média HDMI Chromecast -> Modifier -> Tarif régulier ($)**.
 +
 +<WRAP column 55%>
 +Ajuster le coût à **0.99**.
 +
 +**Mettre à jour** et vérifier avec **Prévisualiser les modifications**.
 +</WRAP>
 +<WRAP column 35%>
 +|{{ Images_Cahier-101-08-303.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +//**► Nettoyage du Panier**//
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> On se logue sur notre site WooCommerce avec l'usager __acheteur__.
 +
 +<nowiki>-</nowiki> Si nous avons fait des tests d'achat, on supprime tous les articles qu'on pourrait avoir dans le Panier.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-305.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-306.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +==== Achat réel ====
 +
 +<WRAP column 30%>
 +Nous nous rendons à la **Boutique** et nous ajoutons au Panier:
 +
 +1 x **Lecteur média HDMI Chromecast** et 
 +
 +1 x **Micronator-101, Cahier-04**.
 +
 +** Voir le Panier**.
 +
 +**-> Valider la commande**.
 +</WRAP>
 +<WRAP column 60%>
 +|{{ Images_Cahier-101-08-307.png?600 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\ 
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> L'usager __acheteur__ est déjà logué, ses coordonnées sont automatiquement ajoutées.
 +
 +<nowiki>-</nowiki> **On coche** que //nous acceptons les conditions générales//.\\ 
 +<nowiki>-</nowiki> **Payer avec PayPal**.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-308.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-309.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Paiement ===
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> L'usager //acheteur// n'a pas de compte //PayPal//. Il va payer par carte de crédit.\\ 
 +<nowiki>-</nowiki> On entre les informations demandées.
 +\\ 
 +\\ 
 +
 +<nowiki>-</nowiki> On vérifie les informations affichées.\\ 
 +<nowiki>-</nowiki> On coche **Je confirme que j'accepte...**
 +
 +**-> Payer maintenant**.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-310.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-311.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +**Pas maintenant**.
 +|{{ Images_Cahier-101-08-312.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +**Retourner chez le marchand**.
 +|{{ Images_Cahier-101-08-313.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +La commande est affichée.
 +|{{ Images_Cahier-101-08-314.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-315.png?600}}
 +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**.
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Courriels au client ===
 +
 +<WRAP column 30%>
 +\\ 
 +De //PayPal// pour signaler le paie­ment.
 +|{{ Images_Cahier-101-08-316.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +De //WooCommerce// pour remercier le client de sa commande...
 +|{{ Images_Cahier-101-08-317.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +... et lui fournir les liens de téléchargements.
 +|{{ Images_Cahier-101-08-318.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-319.png?600}}
 +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**.
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Autres courriels ===
 +
 +<WRAP column 30%>
 +Notification au client que sa com­mande est terminée.
 +|{{ Images_Cahier-101-08-320.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +L'administrateur du site //WooCommerce// est notifié d'une //Nouvelle commande//...
 +|{{ Images_Cahier-101-08-321.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +... puis, il reçoit la confirmation de //PayPal// du montant payé par le client.
 +|{{ Images_Cahier-101-08-322.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +<WRAP centeralign>**Notre WooCommerce fonctionne parfaitement avec les paiements PayPal, en Mode TEST et en Mode LIVE/Réel**.</WRAP>
 +\\ 
 +
 +===== Fermeture d'un compte PayPal =====
 +
 +Lorsqu'on fait des tests, il peut s'avérer nécessaire de fermer un compte //PayPal// afin de les recommencer.\\
 +{{Images_Cahier-101-03-003.png?22}} <wrap em>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</wrap>.
 +
 +==== Fermeture de compte ====
 +
 +<WRAP column 30%>
 +On se logue chez //PayPal// **->** icône  **Préférences -> Préférences et paramètres**.
 +|{{ Images_Cahier-101-08-323.png?400 }}|
 +</WRAP>
 +<WRAP column 60%>
 +\\ 
 +\\ 
 +**Mes paramètres -> Fermer le compte -> Continuer**.
 +|{{ Images_Cahier-101-08-324.png?600 }}|
 +
 +|{{ Images_Cahier-101-08-325.png?600 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> **Cocher** et donner une raison pour fermer le compte **-> Continuer**.
 +\\
 +
 +<nowiki>-</nowiki> **Continuer**.
 +\\
 +
 +<nowiki>-</nowiki> **Clore le compte**.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-326.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-327.png?400 }}|
 +
 +|{{ Images_Cahier-101-08-328.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> On est retourné à la page d'accueil de **PayPal**.
 +\\ 
 +
 +<nowiki>-</nowiki> On reçoit un courriel de confirmation de la fermeture du compte.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-329.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-330.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +{{Images_Cahier-101-03-005.png?25}} Après la fermeture d'un compte //PayPal//, il se pourrait qu'on vous téléphone pour discuter des raisons de cette fermeture.
 +
 +<WRAP centeralign>**Voilà, le compte PayPal est fermé.**</WRAP>
 +\\ 
 +
 +===== Compte Stripe =====
 +
 +Ce chapitre explique comment intégrer le système de paiements **Stripe** à l'extension //WooCommerce// de WordPress roulant sur un Serveur NethServer.\\ 
 +{{Images_Cahier-101-03-006.png?25}}  __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.
 +
 +==== Qu'est-ce que Stripe ====
 +
 +//Référence:// [[http://www.journaldunet.com/ebusiness/commerce/john-collison-john-collison-stripe.shtml|http://www.journaldunet.com/ebusiness/commerce/john-collison-john-collison-stripe.shtml]].
 +
 +{{Images_Cahier-101-08-331.png?150 }}{{Images_Cahier-101-08-332.png?200 }}
 +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.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +//JDN// **Que propose exactement //Stripe//?**
 +
 +**John Collison**\\ 
 +{{ Images_Cahier-101-08-333.png?150}}
 +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|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/|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.
 +\\ 
 +\\ 
 +
 +<WRAP box round>
 +==== Installation de l'aiguilleur Stripe ====
 +
 +__Si nous n'avons pas choisi d'installer //Stripe// au paragraphe__ [[nethserver_101_cahier_08_woocommerce_paypal_stripe#Configuration de la boutique et Paiement]], on installe maintenant l'extension //WooCommerce Stripe Payment Gateway//.
 +
 +<WRAP column 30%>
 +**Tableau de bord -> Extensions -> Ajouter**.
 +|{{ Images_Cahier-101-08-334.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +//**Mot-clé**//  **WooCommerce Stripe Payment Gateway**.
 +|{{ Images_Cahier-101-08-335.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +**Installer**.
 +|{{ Images_Cahier-101-08-336.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +<WRAP column 30%>
 +**Activer**.
 +|{{ Images_Cahier-101-08-337.png?400 }}|
 +</WRAP>
 +<WRAP column 60%>
 +La version //4.1.14// de //WooCommerce Stripe Payment Gateway// est active.
 +|{{ Images_Cahier-101-08-338.png?600 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +<WRAP centeralign>**L'extension WooCommerce Stripe Payment Gateway est installée et activée.**</WRAP>
 +</WRAP>
 +\\ 
 +
 +==== Création d'un compte personnel Stripe ====
 +
 +{{Images_Cahier-101-03-004.png?25}} Nous allons utiliser le nom de l'utilisateur "__paiement-stripe__", que nous avons créé au paragraphe [[nethserver_101_cahier_08_woocommerce_paypal_stripe#paiement-stripe]], pour créer un compte chez //Stripe//.
 +
 +=== Inscription ===
 +
 +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|https://dashboard.stripe.com/login]].
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> En bas de la page, **Sign Up**.
 +\\ 
 +
 +<nowiki>-</nowiki> Entrer les informations demandées.\\ 
 +**-> Create you Stripe account**.
 +</WRAP>
 +<WRAP column 25%>
 +|{{ Images_Cahier-101-08-339.png?400 }}|
 +</WRAP>
 +<WRAP column 35%>
 +|{{ Images_Cahier-101-08-340.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +=== Courriel de confirmation du compte ===
 +
 +{{Images_Cahier-101-03-003.png?22}} __On attend de recevoir un courriel pour confirmer notre adresse.__\\ 
 +{{Images_Cahier-101-03-004.png?25}} 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.
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> **Cliquer le lien** pour confirmer le compte //Stripe//.
 +\\ 
 +\\ 
 +
 +**►** Notre adresse courriel est entrée par défaut.\\ 
 +<nowiki>-</nowiki> On entre notre **mot de passe**.\\  
 +<nowiki>-</nowiki> **Confirm your email**.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-341.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-342.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +<WRAP column 30%>
 +On clique l'**icône usager** et le nom de l'//administrateur du compte// apparaît.
 +
 +{{Images_Cahier-101-03-005.png?25}} Notre compte //Stripe// est confirmé.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-343.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +**►** //**Activation du compte Stripe**//
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> **Activate Your Account**.
 +
 +<nowiki>-</nowiki> **Your account -> Activate Account...**
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-344.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-345.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> Choisir le pays et donner une description.
 +\\ 
 +\\ 
 +<nowiki>-</nowiki> **Individual / Sole Proprietorship** et entrer les informations demandées.\\ 
 +<nowiki>-</nowiki> L'URL de notre site est confirmé - //(Valid URL!)//.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-346.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-347.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +**►** //**Your personal details**//
 +
 +<WRAP column 30%>
 +Dans cette section, on demande votre numéro de sécurité sociale //(Social InsuranceNumber)//.
 +
 +Ce numéro étant très personnel et extrêmement sensible, on peut laisser l'espace libre et plus loin on fournira une photo de notre permis de conduire qui est moins sensible du point de vue confidentialité.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-348.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> Entrer les informations demandées.\\ 
 +<nowiki>-</nowiki> Ne rien enter pour SIN //(Tax ID)//.
 +
 +<nowiki>-</nowiki> Entrer les informations demandées.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-349.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-350.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +**►**  //**Détails bancaires**//
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> Entrer les informations demandées.\\ 
 +<nowiki>-</nowiki> S'assurer que le crochet {{Images_Cahier-101-08-351-A.png?15}} est vert.\\ //(__Ne pas utiliser de "-" dans les numéros de compte.__)//
 +\\ 
 +
 +<nowiki>-</nowiki> Lire //Terms of Service// et __si acceptés__ **-> Activate account**.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-351.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-352.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> Une page de remerciement s'affiche.\\ 
 +<nowiki>-</nowiki> Notre statut est Approuvé.
 +\\ 
 +\\
 +<nowiki>-</nowiki> Le titulaire du compte reçoit un courriel de bienvenue.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-353.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-354.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +=== Notifications ===
 +
 +On veut recevoir toutes les notifications que //Stripe// pourrait nous envoyer.
 +
 +<WRAP column 30%>
 +**Icône -> Profile**.
 +|{{ Images_Cahier-101-08-355.png?300 }}|
 +</WRAP>
 +<WRAP column 60%>
 +On coche tout et on clique l'**icône de retour**.
 +|{{ Images_Cahier-101-08-356.png?600 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +=== Confirmation d'identité ===
 +
 +<WRAP column 60%>
 +**Business Settings**.
 +|{{ Images_Cahier-101-08-357.png?600 }}|
 +</WRAP>
 +<WRAP column 30%>
 +**Verifications**.
 +|{{ Images_Cahier-101-08-358.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\ 
 +
 +<WRAP column 30%>
 +\\ 
 +**Verify now**.
 +|{{ Images_Cahier-101-08-359.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +**Start verification**.
 +|{{ Images_Cahier-101-08-360.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +Cliquer sous un des choix de pièce d'identité.
 +|{{ Images_Cahier-101-08-361.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +**Choose file** pour téléverser un fichier de l'__image du recto__ de notre pièce d'identité.
 +|{{ Images_Cahier-101-08-362.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +Choisir le fichier de l'image du recto de notre pièce d'identité.
 +|{{ Images_Cahier-101-08-363.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +**Continue**.
 +|{{ Images_Cahier-101-08-364.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +**Choose file** pour téléverser un fichier de l'__image du verso__ de notre pièce d'identité.
 +|{{ Images_Cahier-101-08-365.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +Choisir le fichier de l'image du verso de notre pièce d'identité.
 +|{{ Images_Cahier-101-08-366.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +**Confirm**.
 +|{{ Images_Cahier-101-08-367.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +\\ 
 +\\ 
 +\\ 
 +Nos fichiers se font anlayser.
 +|{{ Images_Cahier-101-08-368.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +\\ 
 +\\ 
 +\\ 
 +**Done**.
 +|{{ Images_Cahier-101-08-369.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +<nowiki>-</nowiki> Si on clique l'icône d'information, un message apparaît disant que //Stripe// va nous contacter s'il ne peut vérifier notre identification.\\ 
 +<nowiki>-</nowiki> On clique **Settings** pour retourner au tableau de bord.
 +|{{ Images_Cahier-101-08-370.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Webhook ===
 +
 +{{Images_Cahier-101-03-006.png?25}}  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)//.\\ 
 +{{Images_Cahier-101-03-003.png?22}} Pour configurer le Serveur NethServer principal/passerelle en mandataire inversé pour le serveur LOCAL, voir le [[nethserver_101_cahier_10_mandataire_inverse|Cahier-10]]: //Mandataire inversé//.
 +
 +Nous allons vérifier que Stripe peut communiquer avec l'extension WooCommerce Stripe Payment Gateway de notre site WordPress.
 +
 +<WRAP column 45%>
 +**Webhooks**.
 +|{{ Images_Cahier-101-08-371.png?400 }}|
 +</WRAP>
 +<WRAP column 45%>
 +**Settings -> Add endpoints...**
 +|{{ Images_Cahier-101-08-372.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\ 
 +**►** //**Mode Test**//
 +
 +<WRAP column 45%>
 +<nowiki>-</nowiki> On entre le nom de notre domaine.\\ 
 +<nowiki>-</nowiki> Choisir le **Mode: Test**.\\ 
 +<nowiki>-</nowiki> **Send me all events**.\\ 
 +<nowiki>-</nowiki> **Create endpoint**.
 +|{{ Images_Cahier-101-08-373.png?400 }}|
 +</WRAP>
 +<WRAP column 45%>
 +\\ 
 +- __<nowiki>http://www.</nowiki>__ est ajouté à notre nom de domaine.\\ 
 +- On clique encore **Add webhook** pour ajouter notre domaine pour le //Mode Live//.
 +|{{ Images_Cahier-101-08-374.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +**►** //**Mode LIVE**//
 +
 +<WRAP column 45%>
 +<nowiki>-</nowiki> On entre le nom de notre domaine.\\ 
 +<nowiki>-</nowiki> Choisir le **Mode: Live**.\\ 
 +<nowiki>-</nowiki> **Send me all events**.\\ 
 +<nowiki>-</nowiki> **Create endpoint**.
 +|{{ Images_Cahier-101-08-375.png?400 }}|
 +</WRAP>
 +<WRAP column 45%>
 +\\
 +\\
 +<nowiki>-</nowiki> __<nowiki>http://www.</nowiki>__ est ajouté à notre nom de domaine.\\ 
 +<nowiki>-</nowiki> On clique **Send test webhook...**
 +|{{ Images_Cahier-101-08-376.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +**►** //**Test de webhook**//
 +
 +<WRAP column 45%>
 +<nowiki>-</nowiki> On choisit la dernière version.\\ 
 +<nowiki>-</nowiki> **Send test webhook**.
 +|{{ Images_Cahier-101-08-377.png?400 }}|
 +</WRAP>
 +<WRAP column 45%>
 +**-** On vérifie le succès de l'envoi\\ 
 +**-** **Cancel**.
 +|{{ Images_Cahier-101-08-378.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +=== Clés API ===
 +
 +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:
 +
 +  - Laisser le navigateur agir en tant qu'intermédiaire entre les commerçants, les utilisateurs et les méthodes de paiement.
 +  - Normaliser le flux de communication de paiement autant que possible.
 +  - Prendre en charge de manière transparente les différents modes de paiement sécurisés.
 +  - 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**.\\ 
 +{{Images_Cahier-101-03-004.png?25}} 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.
 +
 +<WRAP column 45%>
 +- **Developers -> API keys**.\\ 
 +- Bouton __vers la droite__.\\ 
 +- Les clé API pour le //Mode TEST// s'affichent.
 +|{{ Images_Cahier-101-08-379.png?400 }}|
 +</WRAP>
 +<WRAP column 45%>
 +\\ 
 +- Bouton __vers la gauche__.\\ 
 +- Les clés API pour le //Mode Réel// s'affichent.
 +|{{ Images_Cahier-101-08-380.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +\\
 +
 +==== Configuration de l'extension ====
 +
 +=== Introduction ===
 +
 +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//.
 +
 +=== Gérer Stripe ===
 +
 +{{ Images_Cahier-101-08-381.png?600}}
 +**Tableau de bord -> WooCommerce -> Réglages -> onglet Paiement ->** vis-à-vis //**Stripe**//  **→  Gérer**.
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-382.png?600}}
 +{{Images_Cahier-101-03-006.png?25}}  ☑ //**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:
 +
 +{{ Images_Cahier-101-08-383.png?250 }}
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 60%>
 +● //**Description:**// Ajoute un encadré __sous le Titre__ que le client voit à la caisse de sortie. Ce qui affichera le message ci-contre:
 +
 +On entre le contenu de l'encadré ci-dessous à //Description//.
 +
 +<file>
 +Un paiement via la société STRIPE se fait avec un chiffrement de 2048 bits et une certification PCI/DSS Service Provider Level 1.
 +</file>
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-384.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Crochet Web - Points de terminaison ===
 +
 +{{ Images_Cahier-101-08-385.png?600}}
 +Pour la création des //Crochet Web//, voir le paragraphe [[nethserver_101_cahier_08_woocommerce_paypal_stripe#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__.
 +
 +{{Images_Cahier-101-03-005.png?25}} Vu que nous ne vendons pas d'abonnements, __nous n'ajoutons pas__ cette URL.
 +
 +=== Clés secrètes et publiables ===
 +
 +Voir le paragraphe: [[nethserver_101_cahier_08_woocommerce_paypal_stripe#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:
 +
 +  - Un jeu pour le Mode LIVE //(transactions réelles)//.
 +  - Un jeu pour le Mode TEST //(transactions de test)//.
 +
 +Chaque jeu comprend deux clés:
 +
 +  - 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__.
 +\\ 
 +\\
 +  - 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**//
 +
 +{{ Images_Cahier-101-08-386.png?450}}
 +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: [[nethserver_101_cahier_08_woocommerce_paypal_stripe#Clés API]].
 +
 +{{Images_Cahier-101-03-006.png?25}}  Bien vérifier que ce sont bien les __clés API d'achat réel__. Elles débutent pas //**pk_live_**//.
 +
 +**►** //**Mode TEST**//
 +
 +{{ Images_Cahier-101-08-387.png?450}}
 +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**.
 +
 +{{Images_Cahier-101-03-006.png?25}}  Bien vérifier que ce sont bien les __clés API de TEST__. Elles débutent pas //**pk_test_**//.
 +
 +{{Images_Cahier-101-03-003.png?22}} Pour débuter, nous utiliserons le //Mode TEST// pour vérifier nos premiers achats.
 +
 +=== Formulaire de paiement compact ===
 +
 +{{ Images_Cahier-101-08-388.png?450}}
 +{{Images_Cahier-101-03-005.png?25}} 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".
 +
 +=== Notification de déclaration ===
 +
 +{{ Images_Cahier-101-08-389.png?450}}
 +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 du paiement ===
 +
 +{{ Images_Cahier-101-08-390.png?450}}
 +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.\\ 
 +{{Images_Cahier-101-03-005.png?25}} __Un paiement non encaissé expire dans //7// jours__.\\ 
 +{{Images_Cahier-101-03-003.png?22}} <wrap em>On coche ce paramètre</wrap>.
 +
 +**►** //**Si décoché**//\\ 
 +{{ Images_Cahier-101-08-392.png?250}}
 +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.
 +
 +{{ Images_Cahier-101-08-391.png?350 }}
 +
 +De plus, //Notes de commande// ci-contre, indiquera elles aussi __//En attente//__.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +
 +
 +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.
 +
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-393.png?400 }}|
 +
 +|{{ Images_Cahier-101-08-394.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-395.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-396.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +=== 3D Secure ===
 +
 +{{ Images_Cahier-101-08-397.png?350}}
 +//**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.
 +
 +=== Modale de paiement Stripe ===
 +
 +{{ Images_Cahier-101-08-398.png?450}}
 +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**//
 +
 +{{ Images_Cahier-101-08-399.png?450}}
 +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 <wrap em>128x128</wrap> pixels.
 + 
 +//Exemple://\\
 +<nowiki>/Ut/Images/Logo/logo_Micronator_128x128_1200-1200_CarteBancaire.png</nowiki>.
 +
 +● //**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**. {{Images_Cahier-101-08-400.png?200}}
 +<WRAP clear></WRAP>
 +\\ 
 +
 +<WRAP column 30%>
 +\\ 
 +\\ 
 +//Modale de paiement Stripe// - coché //(activé)//.
 +|{{ Images_Cahier-101-08-401.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +Le formulaire s'affichera dans une fenêtre surgissante //après le clic// sur **Continuer vers le paiement**.
 +|{{ Images_Cahier-101-08-402.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +- //Modale de paiement Stripe// - non coché //(désactivé)//.\\ 
 +- Le formulaire s'affiche sur la page de la commande.
 +|{{ Images_Cahier-101-08-403.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +=== Boutons de demande de paiement ===
 +
 +{{ Images_Cahier-101-08-404.png?600}}
 +Non-utilisé.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +=== Paiement par carte enregistrée ===
 +
 +{{ Images_Cahier-101-08-405.png?600}}
 +{{Images_Cahier-101-03-005.png?25}} 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__.
 +<WRAP clear></WRAP>
 +
 +=== Journalisation ===
 +
 +{{ Images_Cahier-101-08-406.png?600}}
 +{{Images_Cahier-101-03-005.png?25}} Sauvegarde les messages de débogage dans le journal d'//État du système WooCommerce//.
 +<WRAP clear></WRAP>
 +
 +== Journal des transactions ==
 +
 +{{ Images_Cahier-101-08-407.png?600}}
 +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**.
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Enregistrement des changements ===
 +
 +<WRAP column 30%>
 +{{Images_Cahier-101-03-006.png?25}}  Une fois toutes les options choisies, si ce n'est déjà fait, on clique **Enregistrer les changements** et on s'assure du succès de l'opération.
 +
 +On retourne à la page //Moyens de paiement// en cliquant l'**icône de retour**.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-408.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-409.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Ordre d'affichage des passerelles de paiement ===
 +
 +**Tableau de bord WordPress -> WooCommerce -> Réglages ->** onglet **Paiements**.
 +
 +<WRAP column 60%>
 +<nowiki>-</nowiki> On clique l'icône {{Images_Cahier-101-08-410-A.png?20}} à la gauche de la passerelle //Stripe//.\\ 
 +<nowiki>-</nowiki> La souris s'affiche alors différemment.\\ 
 +<nowiki>-</nowiki> On glisse le paragraphe //Stripe// au premier rang et //PayPal// au second rang des passerelles actives.
 +**-> Enregistrer les modifications**.
 +|{{ Images_Cahier-101-08-410.png?600 }}|
 +
 +{{ Images_Cahier-101-08-411.png?200 }}
 +</WRAP>
 +<WRAP column 30%>
 +Sur la page des commandes, les passerelles de paiement s'affichent selon le rang d'affichage choisi à la page //Moyens de paiement//.
 +|{{ Images_Cahier-101-08-412.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +{{Images_Cahier-101-03-003.png?22}} 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.\\
 +{{Images_Cahier-101-03-004.png?25}} 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.
 +\\ 
 +\\ 
 +
 +==== Mode Test ====
 +
 +Tout est configuré et nous sommes prêts à faire un achat en //Mode TEST//.
 +
 +{{Images_Cahier-101-03-006.png?25}}  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.
 +
 +=== Activation du Mode TEST ===
 +
 +<WRAP column 45%>
 +Si nous ne sommes pas en //Mode TEST//, nous pouvons nous mettre dans ce mode avec **Tableau de Bord WordPress -> WooCommerce -> Réglages ->** onglet **Paiements -> Stripe -> Gérer ->** cocher  **Activer le mode TEST -> Enregistrer les changements**.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-413.png?400 }}|
 +</WRAP>
 +<WRAP column 15%>
 +|{{ Images_Cahier-101-08-414.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +**►** //**Achat**//\\ 
 +{{Images_Cahier-101-03-003.png?22}} Pour des numéros de carte de crédit de tests voir: [[https://stripe.com/docs/testing|https://stripe.com/docs/testing]].
 +
 +<WRAP column 45%>
 +<nowiki>-</nowiki> Sur notre site //WooCommerce//, on se logue en tant que l'utilisateur __acheteur-test__.\\ 
 +<nowiki>-</nowiki> Faire des achats et se rendre à la page **Panier**.\\ 
 +<nowiki>-</nowiki> Cliquer **Procéder à la commande**.
 +|{{ Images_Cahier-101-08-415.png?400 }}|
 +</WRAP>
 +<WRAP column 45%>
 +<nowiki>-</nowiki> Choisir: **Payer via Stripe**.\\ 
 +<nowiki>-</nowiki> Entrer les informations demandées.\\ 
 +<nowiki>-</nowiki> Cochez si vous avez __lu et accepté__ les //conditions générales//.\\ 
 +<nowiki>-</nowiki> Cliquer: **Continuer pour le paiement**.
 +|{{ Images_Cahier-101-08-416.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +Après le "paiement" le client est retourné sur le site //WooCommerce//. Le site devrait afficher la page ci-dessous, à gauche.
 +
 +{{Images_Cahier-101-03-005.png?25}} 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.
 +
 +{{Images_Cahier-101-03-006.png?25}}  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.
 +
 +<WRAP column 45%>
 +Serveur branché directement à l'Internet.
 +|{{ Images_Cahier-101-08-417.png?400 }}|
 +</WRAP>
 +<WRAP column 45%>
 +Serveur LOCAL sans mandataire inversé.
 +|{{ Images_Cahier-101-08-418.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-419.png?600}}
 +{{Images_Cahier-101-03-003.png?22}} Pour remédier à la situation sur un serveur LOCAL sans mandataire inversé:\\ 
 +<nowiki>-</nowiki> nous expédions le //Lecteur média HDMI Chromecast//,\\ 
 +<nowiki>-</nowiki> nous changeons l'//État de la commande// à __Terminée__.
 +
 +**-> Mettre à jour**.
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-420.png?600}}
 +Le client clique **Mon compte -> Commandes** et le dernier achat //86// apparaît.
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Courriel client ===
 +
 +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.
 +
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-423.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-421.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-422.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +<WRAP centeralign>**On est prêt pour un achat en Mode LIVE/Réel.**</WRAP>
 +
 +==== Achat en Mode réel (LIVE) ====
 +
 +=== Activation du mode LIVE ===
 +
 +{{ Images_Cahier-101-08-424.png?450}}
 +**►** 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 [[nethserver_101_cahier_08_woocommerce_paypal_stripe#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.
 +
 +{{ Images_Cahier-101-08-425.png?150}}
 +L'achat se passe bien jusqu'à la page de paiement.
 +
 +Après avoir cliqué **Payer 1,14 $CA**, l'écran ci-contre apparaît.
 +
 +{{Images_Cahier-101-03-006.png?25}} //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.
 + 
 +{{Images_Cahier-101-03-005.png?25}} Dans //WooCommerce//, la commande est en //État d'Attente de paiement//.\\ 
 +{{Images_Cahier-101-03-003.png?22}} 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//.
 +\\ 
 +
 +=== Vérification chez Stripe ===
 +
 +{{Images_Cahier-101-03-006.png?25}}  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//.
 +
 +<WRAP column 30%>
 +<nowiki>-</nowiki> Nous avons un message.\\ 
 +<nowiki>-</nowiki> On le clique.
 +
 +<nowiki>-</nowiki> On clique **transfers page**.
 +</WRAP>
 +<WRAP column 20%>
 +|{{ Images_Cahier-101-08-426.png?400 }}|
 +</WRAP>
 +<WRAP column 40%>
 +|{{ Images_Cahier-101-08-427.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +**►** //**Prochain transfert de Stripe vers notre compte bancaire**//
 +
 +{{ Images_Cahier-101-08-428.png?600}}
 +Nous aurons un transfert de __$0.81__ le //31 mars (dans 7 jours)// vers notre compte bancaire.
 +<WRAP clear></WRAP>
 +
 +**►** //**Paiements**//
 +
 +{{ Images_Cahier-101-08-429.png?600}}
 +**Tableau de bord -> Payments ->** onglet **Payments**.
 +
 +On voit que la transaction a été enregistrée.
 +<WRAP clear></WRAP>
 +
 +**►** //**Balance**//
 +
 +{{ Images_Cahier-101-08-430.png?600}}
 +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)//.
 +<WRAP clear></WRAP>
 +\\
 +
 +{{Images_Cahier-101-03-005.png?25}} Voir les tarifs pour une transaction: [[https://stripe.com/ca/pricing|https://stripe.com/ca/pricing]]. {{Images_Cahier-101-08-431.png?300}}
 +\\ 
 +
 +<WRAP centeralign>
 +{{Images_Cahier-101-03-006.png?25}}  <wrap em>//**Rétablir les vraies valeurs des prix, des taux d'expédition et des autres paramètres.**//</wrap>
 +</WRAP>
 +<WRAP centeralign>
 +**Notre compte //Stripe// est approuvé, actif et en Mode LIVE.**\\
 +**Les clients peuvent faire leurs achats en toute sécurité avec la carte bancaire de leur choix**\\
 +**via la passerelle de paiements //Stripe//.**
 +</WRAP>
 +\\
 +
 +===== Menu principal =====
 +
 +==== Introduction ====
 +
 +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.
 +
 +<WRAP centeralign>//Menu actuel//</WRAP>
 +
 +{{ Images_Cahier-101-08-432.png?800 }}
 +
 +<WRAP centeralign>//Menu souhaité//</WRAP>
 +
 +{{ Images_Cahier-101-08-433.png?800 }}
 +\\
 +
 +==== Création du menu ====
 +
 +<WRAP column 45%>
 +**Tableau de bord WordPress -> Apparence -> Menus**.
 +
 +//**Nom du menu**// **-> Menu primaire -> Créer le menu**.
 +</WRAP>
 +<WRAP column 45%>
 +|{{ Images_Cahier-101-08-434.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 45%>
 +=== Éléments du menu ===
 +
 +<nowiki>-</nowiki> Dans la colonne de gauche, sous //Liens personnalisés//, on clique l'icône triangulaire ▼ pour developper.
 +
 +<nowiki>-</nowiki> //**Adresse WEB**// **-> /**
 +
 +<nowiki>-</nowiki> //**Texte du lien**// **-> Accueil**.
 +
 +<nowiki>-</nowiki> **Ajouter au menu**.
 +</WRAP>
 +<WRAP column 35%>
 +|{{ Images_Cahier-101-08-435.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 30%>
 +Sous// Pages//, on clique l'icône triangulaire ▼ pour developper.
 +
 +<nowiki>-</nowiki> **Afficher tout**.
 +
 +<nowiki>-</nowiki> On sélectionne les pages ci-contre.
 +
 +<nowiki>-</nowiki> **Ajouter au menu**.
 +\\ 
 +\\ 
 +
 +Sous //Terminaisons WooCommerce//, on clique l'icône triangulaire ▼ pour developper.
 +
 +<nowiki>-</nowiki> On coche **Commandes**.
 +
 +<nowiki>-</nowiki> **Ajouter au menu**.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-436.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-437.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 45%>
 +<nowiki>-</nowiki> On organise l'ordre des éléments en les cliquant & glissant.
 +
 +<nowiki>-</nowiki> À la droite d'//**Afficher l'emplacement**//, on coche **Menu principal**.
 +
 +<nowiki>-</nowiki> **Enregistrer le menu**.
 +</WRAP>
 +<WRAP column 45%>
 +|{{ Images_Cahier-101-08-438.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +=== Vérification ===
 +
 +On se rend à la page d'accueil.
 +
 +<WRAP centeralign>//Voilà notre nouveau Menu.//</WRAP>
 +
 +{{ Images_Cahier-101-08-439.png?800 }}
 +\\
 +\\ 
 +
 +===== Ajustements CSS et pied de page =====
 +
 +==== Pied de page ====
 +
 +Nous avons créé un menu au paragraphe [[nethserver_101_cahier_08_woocommerce_paypal_stripe#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//.
 +
 +<WRAP centeralign>//Pied de page actuel.//</WRAP>
 +
 +{{ Images_Cahier-101-08-441.png?700 }}
 +\\
 +
 +<WRAP centeralign>//Pied de page désiré.//</WRAP>
 +
 +{{ Images_Cahier-101-08-442.png?700 }}
 +\\
 +
 +Code à ajouter au fichier ''wp-content/themes/storefront-enfant/footer.php'' pour la page //Conditions de vente//.
 +
 +<WRAP box>
 +<file>
 +                  <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;
 +</file>
 +</WRAP>
 +
 +Code à ajouter au fichier ''wp-content/themes/storefront-enfant/footer.php'' pour la page //Vie privée//.
 +
 +<WRAP box>
 +<file>
 +                  <a href="/vie-privee"
 +                     style="text-decoration: underline; color: #0000ff;"
 +                     target="_blank"
 +                     title="Vie privée">Vie priv&eacute;e</a>
 +</file>
 +</WRAP>
 +
 +On édite le fichier ''wp-content/themes/storefront-enfant/footer.php'', on y insère les lignes ci-dessus et on sauvegarde.
 +
 +<file>
 +<?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>
 +</file>
 +
 +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.
 +
 +{{ Images_Cahier-101-08-443.png?700 }}
 +\\
 +
 +==== Menu principal ====
 +
 +=== Pages incluses dans le menu ===
 +
 +<WRAP centeralign>//Exemple de menu principal pour les explications ci-dessous.//</WRAP>
 +
 +{{ Images_Cahier-101-08-444.png?800 }}
 +\\
 +
 +Nous lançons le navigateur //Chrome// et nous nous rendons à notre page d'accueil.
 +
 +<WRAP column 30%>
 +\\ 
 +Clac sur l'image d'en-tête **-> Inspecter**.
 +|{{ Images_Cahier-101-08-445.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +\\ 
 +Cliquer l'icône **Toggle device toolbar**.
 +|{{ Images_Cahier-101-08-446.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +Dérouler le menu et choisir **iPhone 6/7/8 Plus**.
 +|{{ Images_Cahier-101-08-447.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 45%>
 +On développe le menu.
 +
 +Certains liens de pages pourraient apparaître sur le menu et ne pas faire partie de ce dernier car lors de la création d’une nouvelle page, celle-ci est automatiquement ajoutée au menu principal du site. L'image ci-contre contient de telles pages.
 +</WRAP>
 +<WRAP column 45%>
 +|{{ Images_Cahier-101-08-448.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +Dans le [[nethserver_101_cahier_06_nethserver_wordPress|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//.
 +
 +<WRAP column 30%>
 +On édite toutes les pages non désirées du menu et on coche la case //Exclude this page from menu//.
 +
 +Dans //Chrome//, on rafraîchit la page et on déroule le menu. Les liens des pages exclues ne sont plus présentes dans le menu.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-449.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-450.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +{{Images_Cahier-101-03-003.png?22}} 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.
 +\\ 
 +\\
 +
 +==== Widget de recherche ====
 +
 +<WRAP column 30%>
 +Nous avons deux widgets de recherche; nous escamotons celui de l'en-tête //(en rouge)//.
 +</WRAP>
 +<WRAP column 30%>
 +|{{ Images_Cahier-101-08-451.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +À 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.
 +
 +<file>
 +/* 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 );
 +}
 +
 +</file>
 +
 +{{ Images_Cahier-101-08-452.png?600}}
 +On sauvegarde le fichier et on quitte NotePad++.
 +<WRAP clear></WRAP>
 +\\
 +
 +=== Vérification ===
 +
 +{{ Images_Cahier-101-08-453.png?600}}
 +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.
 +<WRAP clear></WRAP>
 +\\
 +
 +==== Affichage ====
 +
 +L'affichage du menu principal est contrôlé par le code CSS du fichier: ''wp-content/themes/storefront-enfant/style.css''.
 +
 +=== Menu ===
 +
 +On supprime la directive qu'on avait ajoutée dans le [[nethserver_101_cahier_06_nethserver_wordPress|Cahier-06]]: au paragraphe //Logo et slogan// .
 +
 +<WRAP box>
 +<file>
 +/* 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;
 +}
 +</file>
 +</WRAP>
 +
 +On remplace l'ancienne directive par celle ci-dessous qui:
 +
 +  - enlève la marge au-dessus et en dessous des titres du menu principal et
 +  - change la couleur de la police, sa taille, son poids et sa famille.
 +
 +<file>
 +/* 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                 */
 +    }
 +}
 +
 +</file>
 +
 +{{ Images_Cahier-101-08-454.png?600}}
 +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.
 +<WRAP clear></WRAP>
 +
 +=== Panier ===
 +
 +  - On enlève les //marges// au-dessus et en dessous du Panier.
 +  - 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''.
 +
 +<file>
 +/* 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                */
 +}
 +
 +</file>
 +\\ 
 +
 +{{ Images_Cahier-101-08-455.png?600}}
 +Le menu et le Panier sont au même niveau.
 +<WRAP clear></WRAP>
 +\\
 +<WRAP centeralign>**Notre site a tout ce qu'il faut pour nous lancer dans l'aventure du //Commerce en ligne//.**</WRAP>
 +\\ 
 +
 +===== Mise à jour de WooCommerce =====
 +
 +La mise à jour de //WooCommerce// se fait exactement de la même manière que celle des autres extensions.
 +
 +==== Mise à jour ====
 +
 +<WRAP column 45%>
 +**Tableau de bord WordPress -> Mise à jour ->** on coche **Tout sélectionner -> Mise à jour des extensions**.
 +|{{ Images_Cahier-101-08-456.png?400 }}|
 +</WRAP>
 +<WRAP column 45%>
 +La mise à jour est terminée. On peut **afficher les détails**.
 +|{{ Images_Cahier-101-08-457.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-458.png?600}}
 +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**.
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-459.png?600}}
 +Rarement, la mise à jour de //WooCommerce// peut affecter le //Thème enfant//.
 +
 +{{Images_Cahier-101-03-006.png?25}} Un message nous averti que des fichiers de notre //Thème enfant// doivent être mis à jour.
 +
 +On s'en occupera plus loin.
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-460.png?600}}
 +Si nous n'avons aucune sauvegarde de notre Serveur NethServer, on peut en créer une et au retour, on clique **OK**.
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-461.png?600}}
 +**Cliquez ici pour l'effectuer maintenant**.
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-462.png?600}}
 +**Rejeter** pour supprimer le message.
 +<WRAP clear></WRAP>
 +\\
 +
 +==== Vérification ====
 +
 +{{ Images_Cahier-101-08-463.png?600}}
 +On se rend sur notre site et on vérifie les différents menus de //WooCommerce//.
 +
 +{{Images_Cahier-101-03-004.png?25}} 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.
 +<WRAP clear></WRAP>
 +\\
 +
 +==== Ajustement du Thème enfant ====
 +
 +{{Images_Cahier-101-03-005.png?25}} __Ce paragraphe est inclus à titre d'exemple seulement - provient de la version //1.0.1// de ce document__.
 +
 +{{ Images_Cahier-101-08-464.png?600}}
 +**Voir les modèles concernés**.
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-465.png?600}}
 +En bas de la page affichée.
 +
 +  - Une mise à jour du //Thème enfant Storefront// est disponible.
 +  - 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 [[nethserver_101_cahier_08_woocommerce_paypal_stripe#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__)//.
 +<WRAP clear></WRAP>
 +\\
 +
 +<WRAP column 32%>
 +=== Mise à jour du Thème Storefront ===
 +</WRAP>
 +<WRAP column 45%>
 +{{Images_Cahier-101-08-466.png?400 }}
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-467.png?600}}
 +=== Fichiers des courriels ===
 +<WRAP clear></WRAP>
 +\\
 +
 +**Tableau de bord WordPress -> WooCommerce -> Réglages ->** onglet **E-mails -> Nouvelle commande -> Gérer**.
 +
 +<WRAP column 30%>
 +**Supprimer le fichier modèle**.
 +|{{ Images_Cahier-101-08-468.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +**OK**.
 +|{{ Images_Cahier-101-08-469.png?400 }}|
 +</WRAP>
 +<WRAP column 30%>
 +**Copier le fichier dans le thème**.
 +|{{ Images_Cahier-101-08-470.png?400 }}|
 +</WRAP>
 +<WRAP clear></WRAP>
 +
 +On retourne à l'onglet **E-mails** et on répète les mêmes opérations pour //Commande annulée// et //Commande échouée//.
 +\\ 
 +
 +=== Vérification ===
 +
 +{{ Images_Cahier-101-08-471.png?600}}
 +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//.
 +<WRAP clear></WRAP>
 +\\
 +
 +{{ Images_Cahier-101-08-472.png?600}}
 +On vérifie encore en allant à **Tableau de bord -> WooCommerce -> Réglages**.
 +
 +Le message est disparu. Tout est normal.
 +<WRAP clear></WRAP>
 +\\
 +\\
 +
 +===== Serveur LOCAL =====
 +
 +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.
 +
 +==== Prérequis ====
 +
 +{{ Images_Cahier-101-08-473.png?450}}
 +Si on veut complètement vérifier tous les types d'achats avec le serveur LOCAL //micronator-dev.org//:
 +
 +  - On doit s'assurer que le domaine du serveur LOCAL est //micronator-dev.org// et demander un certificat Let's Encrypt: voir le [[nethserver_101_cahier_04_local_certificat_let_encrypt|Cahier-04]]: //NethServer LOCAL & Certificat Let's Encrypt//.
 +  - On doit configurer le Serveur NethServer principal //(la passerelle)// en serveur __Mandataire Inversé__. Voir: [[nethserver_101_cahier_10_mandataire_inverse|Cahier-10]]: //Mandataire Inversé//.
 +<WRAP clear></WRAP>
 +\\ 
 +
 +===== Tutoriels & vidéo =====
 +
 +==== WooCommerce 101 ====
 +
 +On peut consulter la page: [[https://docs.woocommerce.com/document/woocommerce-guided-tour-videos/|https://docs.woocommerce.com/document/woocommerce-guided-tour-videos/]].
 +
 +==== Katrinah ====
 +
 +<WRAP column 53%>
 +La meilleure prof que j'ai vue depuis très longtemps. C'est une vraie perle.
 +
 +[[https://www.youtube.com/channel/UC1ybp5y7RIoMpkJi2ItkuYg|https://www.youtube.com/channel/UC1ybp5y7RIoMpkJi2ItkuYg]].
 +
 +[[https://www.youtube.com/user/77webstudio/videos|https://www.youtube.com/user/77webstudio/videos]].
 +<WRAP clear></WRAP>
 +</WRAP>
 +<WRAP column 35%>
 +{{Images_Cahier-101-08-474.png?100 }}
 +</WRAP>
 +<WRAP clear></WRAP>
 +\\ 
 +\\ 
 +{{Images_Cahier-101-02-164.png?50}} Victoire totale, hissons la bannière de la victoire.
 +\\ 
 +
 +----
 +
 +===== Crédits =====
 +
 +© 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: <nowiki>E:\000_DocPourRF232_general\RF-232_NethServer\RF-232_Cours_NethServer-101_Cahier-08_WooC_Stripe_PayPal_2019-08-06_13h15.odt</nowiki>.
 +
 +Historique des modifications:
 +
 +^Version^Date^Commentaire^Auteur|
 +|0.0.1|2015-11-30|Début.|Michel-André|
 +|0.0.2|2016-01-03|Ajout pour le bon affichage des images, la mise à jour de WordPress, le bit GID et l'éditeur vi.|Michel-André|
 +|1.0.0|2017-03-07|Mise à jour pour le cours Micronator-101.|Michel-André|
 +|1.0.1|2017-04-11|Correction pour l'affichage des paramètres du fichier php.ini de PHP-5.6 au début du chapitre des prérequis.|Michel-André|
 +|2.0.0|2018-03-29|Mise à jour et nouvelle mise en page.|Michel-André|
 +|3.0.0|2018-10-21|Mise à jour.|Michel-André|
 +|4.0.0|2019-03-01|Adaptation pour NethServer-7.6.1810.|Michel-André|
 +|4.0.1|2019-05-05|Corrections mineures.|Michel-André|
 +|4.0.2|2019-06-24|Corrections mineures.|Michel-André|
 +|4.1.0|2019-07-27|Ajustement pour DokuWiki.| |
 +|12345678901| | |12345678901|
 +\\ 
 +
 +===== AVIS DE NON-RESPONSABILITÉ =====
 +
 +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.
 +
 +==== Avertissement====
 +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.
 +\\
 +\\