====== 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 === * Les captures d'écrans ne sont que des références.\\ ** Les informations écrites ont préséance sur celles retrouvées dans les captures d'écrans. Veillez vous référer aux différents tableaux lorsque ceux-ci sont présents.\\ *** Une capture d'écran avec une accentuation en magenta indique qu'il faut remplacer cette distinction par vos propres paramètres ou implique un choix laissé à votre appréciation. === 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. [root@dorgee ~]# ping 10.10.10.75 -c1 PING 10.10.10.75 (10.10.10.75) 56(84) bytes of data. 64 bytes from 10.10.10.75: icmp_seq=1 ttl=64 time=1.63 ms --- 10.10.10.75 ping statistics --- 1 packets transmitted, 1 received, 0% packet loss, time 0ms rtt min/avg/max/mdev = 1.639/1.639/1.639/0.000 ms [root@dorgee ~]# Commande à exécuter si ce n'est déjà fait. Commande indiquée à titre d'information seulement. \\ ===== 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 == [root@tchana ~]# scl -l php56 php70 php71 php72 php73 rh-mariadb102 [root@tchana ~]# == Collection PHP == Chemin. [root@tchana ~]# which php /opt/remi/php72/root/usr/bin/php [root@tchana ~]# Version //(on utilise la version 7.2, car 7.3 semble occasionner des problèmes avec certains logiciels)//. [root@tchana ~]# php --version PHP 7.2.15 (cli) (built: Feb 5 2019 18:05:51) ( NTS ) Copyright (c) 1997-2018 The PHP Group Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies [root@tchana ~]# == Paramètres PHP72 == [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 ~]# {{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**102 ou **mysqladmin**102 pour toute les manipulations de MariaDB. Chemin et version. [root@tchana ~]# mysql102 --version /opt/rh/rh-mariadb102/root/usr/bin/mysql Ver 15.1 Distrib 10.2.8-MariaDB, for Linux (x86_64) using EditLine wrapper [root@tchana ~]# \\ ==== 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 robuste. == 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**. On entres les informations demandées **-> SOUMETTRE**. |{{ Images_Cahier-101-08-002.png?400 }}| \\ Au retour, on vérifie l'orthographe de l'adresse courriel. |{{ Images_Cahier-101-08-003.png?600 }}| == 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. ==== 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: https://www.micronator-dev.org {{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. === 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//. \\ ===== 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.** \\ - Cocher //**Exclude this page from menu**//. - **Publier**. |{{ Images_Cahier-101-08-008.png?400 }}| |{{ Images_Cahier-101-08-009.png?400 }}| \\ {{ Images_Cahier-101-08-010.png?600}} On vérifie notre page en cliquant le bouton:\\ {{ Images_Cahier-101-08-010-A.png?250 }} \\ ==== 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.** \\ - Cocher //**Exclude this page from menu**//. - **Publier**. |{{ Images_Cahier-101-08-012.png?400 }}| |{{ Images_Cahier-101-08-013.png?400 }}| \\ {{ Images_Cahier-101-08-015.png?600}} On vérifie notre page en cliquant le bouton:\\ {{ Images_Cahier-101-08-014.png?250 }} \\ \\ {{ Images_Cahier-101-08-016.png?600}} ==== À propos ==== === Création de la page === - **Tableau de bord -> Pages -> Ajouter ->** on **écrit notre page.** - __On ne coche pas__ //**Exclude this page from menu**//. \\ {{ Images_Cahier-101-08-018.png?600}} On vérifie notre page en cliquant le bouton:\\ {{ Images_Cahier-101-08-017.png?250 }} \\ {{ Images_Cahier-101-08-019.png?600}} ==== Nous contacter ==== Page permettant aux visiteurs de nous contacter. - Dans le [[:nethserver_101_cahier_06_nethserver_wordPress|Cahier-06]]: //NethServer & WordPress//, nous avons créé un //Formulaire de contact//. - On vérifie notre page en se rendant à: [[https://www.micronator-dev.org/nous-contacter/|https://www.micronator-dev.org/nous-contacter/]]. \\ \\ Toutes nos pages indispensables sont prêtes. \\ \\ ===== 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]]. **Ouvrir un compte**. |{{ Images_Cahier-101-08-020.png?400 }}| **Ouvrir un compte business**. |{{ Images_Cahier-101-08-021.png?400 }}| **Premiers pas**. |{{ Images_Cahier-101-08-022.png?400 }}| \\ \\ Entrer l'adresse courriel de celui qui s'occupera du compte PayPal **-> Suivant**. |{{ Images_Cahier-101-08-023.png?400 }}| \\ \\ \\ Entrez les informations demandées. |{{ Images_Cahier-101-08-024.png?400 }}| 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 }}| \\ - Dérouler le premier menu et choisir **Particulier**.\\ - Entrer les informations demandées **-> Continuer**. |{{ Images_Cahier-101-08-026.png?400 }}| \\ \\ Entrer les informations demandées **-> Soumettre**. |{{ Images_Cahier-101-08-027.png?400 }}| \\ \\ //Récapitulatif//. |{{ Images_Cahier-101-08-028.png?400 }}| ==== 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. - L'utilisateur //paiement-paypal// se connecte à Webmail et ouvre le courriel de //PayPal//.\\ - **Compléter les informations maintenant**. |{{ Images_Cahier-101-08-029.png?400 }}| - L'utilisateur //paiement-paypal// est dirigé vers le site //PayPal// pour se connecter et **en­tre son mot de passe**.\\ - **Connexion**. |{{ Images_Cahier-101-08-030.png?400 }}| Il choisit son pays **-> Continuer**. |{{ Images_Cahier-101-08-031.png?400 }}| La page principale apparaît. |{{ Images_Cahier-101-08-032.png?600 }}| - Cliquer l'icône de messages.\\ - **Confirmer l'adresse courriel**. |{{ Images_Cahier-101-08-033.png?400 }}| - L'adresse courriel __n'est pas encore confirmée__.\\ - Cliquer l'icône **Mes préférences**. |{{ Images_Cahier-101-08-034.png?600 }}| \\ {{ 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**. \\ {{ Images_Cahier-101-08-036.png?600}} Le message de l'//Adresse de courriel// change pour nous avertir de consulter nos courriels. \\ === Activation du compte PayPal === - paiement-paypal@micronator-101.org vérifie ses courriels.\\ - **Cliquez ici pour activer votre compte**. |{{ Images_Cahier-101-08-037.png?400 }}| \\ - //paiement-paypal// entre son mot de passe.\\ - **Confirmer mon adresse courriel**. |{{ Images_Cahier-101-08-038.png?400 }}| \\ - Entrer les informations demandées.\\ - **Soumettre**. |{{ Images_Cahier-101-08-039.png?400 }}| \\ Cliquer l'icône **Mes préférences**. |{{ Images_Cahier-101-08-040.png?400 }}| Le __compte est activé__ et l'__adresse courriel confirmée__. |{{ Images_Cahier-101-08-041.png?400 }}| {{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. **Déconnexion/reconnexion**. |{{ Images_Cahier-101-08-042.png?400 }}| Tout est fonctionnel. |{{ Images_Cahier-101-08-043.png?600 }}| \\ ==== 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}} - On retourne à notre compte chez: [[https://www.paypal.com/|https://www.paypal.com]]. - Cliquer l'Icône **Mes Préférences -> Mes outils de vente**. - Vis-à-vis //**Accès à L'API**// **→ Mise à jour**. \\ {{ 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**. \\ {{ Images_Cahier-101-08-046.png?600}} - Choisissez **Demander une signature API...** - __Si vous acceptez__ les //Conditions d'utilisation de l'API//, cliquez **Accepter et envoyer**. \\ {{ 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//. \\ {{ 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}} Terminé 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, On se logue avec notre compte chez: [[https://www.paypal.com/|https://www.paypal.com]]. |{{ Images_Cahier-101-08-049.png?400 }}| \\ Cliquer l'icône **Mes Préférences**. |{{ Images_Cahier-101-08-050.png?400 }}| \\ **Mes outils de vente**. |{{ Images_Cahier-101-08-051.png?400 }}| \\ {{ Images_Cahier-101-08-052.png?600}} Mettre à jour. \\ {{ Images_Cahier-101-08-053.png?600}} Gérer les informations d'authentification API. \\ {{ 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 }} \\ **Notre compte PayPal est fonctionnel.** \\ ===== 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]]. - On se rend au site: https://developer.paypal.com/.\\ - Cliquer **Log into Dashboard**. |{{ Images_Cahier-101-08-056.png?400 }}| 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 }}| \\ \\ **Dashboard**. |{{ Images_Cahier-101-08-058.png?400 }}| \\ {{ Images_Cahier-101-08-059.png?600}} - On vérifie qu'on est bien chez [[https://developer.paypal.com/|https://developer.paypal.com/]]. - On clique **Accounts**. \\ === 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. - On clique **Create Account**. \\ == Informations du compte et balance de la carte Visa == {{Images_Cahier-101-03-006.png?25}} Attention aux erreurs de frappe. \\ On entre les informations demandées... //(sans accents)//. |{{ Images_Cahier-101-08-061.png?400 }}| \\ \\ **999 -> Yes -> Visa -> Create account**. |{{ Images_Cahier-101-08-062.png?400 }}| Le nouveau compte acheteur-test@micronator-101.org a été créé avec succès. |{{ Images_Cahier-101-08-063.png?400 }}| \\ \\ On clique l'adresse pour développer et faire apparaître les onglets **-> Profile**. |{{ Images_Cahier-101-08-064.png?400 }}| 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 }}| \\ - **Funding** //(détails de la carte de crédit)//.\\ - On utilisera ces données pour les achats. |{{ Images_Cahier-101-08-066.png?400 }}| \\ **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//. |{{ Images_Cahier-101-08-067.png?400 }}| |{{ Images_Cahier-101-08-068.png?400 }}| ==== 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]]. **Nous avons tous les comptes et informations nécessaires pour des tests de transactions //PayPal//.\\ Nous pouvons maintenant procéder à l'installation de //WooCommerce//.** \\ ===== WooCommerce ===== ==== Description ==== //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. 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. |{{ Images_Cahier-101-08-069.png?400 }}| |{{ Images_Cahier-101-08-070.png?400 }}| ==== Installation ==== Si nous ne sommes pas connectés à notre Serveur NethServer LOCAL, on se logue à: https://www.micronator-dev.org. **Tableau de bord -> Extensions -> Ajouter**. |{{ Images_Cahier-101-08-071.png?400 }}| //**Mot-clé**// ** → WooCommerce**. |{{ Images_Cahier-101-08-072.png?400 }}| **Installer**. |{{ Images_Cahier-101-08-073.png?400 }}| **Activer**. |{{ Images_Cahier-101-08-076.png?400 }}| \\ ==== L'assistant d'installation ==== === Configuration de la boutique et Paiement === \\ \\ \\ \\ \\ Entrer les information demandées **-> C'est parti!** |{{ Images_Cahier-101-08-077.png?400 }}| - __Activer__ **Stripe**.\\ - Décocher //Configurer Stripe pour moi avec cet e-mail//.\\ - __Désactiver__ **PayPal** //(ceci va désactiver seulement PayPal Express Checkout)//.\\ - Facultatif: //Paiements hors ligne//.\\ - **Continuer**. |{{ Images_Cahier-101-08-078.png?400 }}| \\ === Expédition et Recommandé === - 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.\\ - Imprimer des étiquettes de livraison à la maison. //(Votre choix.)//\\ - **Continuer**. |{{ Images_Cahier-101-08-079.png?400 }}| - __Décocher__ //Taxes automatisées// et //MailChimp//.\\ BEAUCOUP TROP INTRUSIF, lisez les licences et vous serez de notre avis...\\ - Nous entrerons les taxes nous-mêmes.\\ - **Passer cette étape**. |{{ Images_Cahier-101-08-080.png?400 }}| \\ === Activer et Prêt! === \\ - Extension non-nécessaire.\\ BEAUCOUP TROP INTRUSIF, lisez la licence et vous serez de notre avis...\\ - **Passer cette étape**. |{{ Images_Cahier-101-08-081.png?400 }}| - On peut changer le contact pour la réception de conseils et sources d'inspiration.\\ - 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]].\\ - **Se rendre sur le Tableau de bord**. |{{ Images_Cahier-101-08-082.png?400 }}| \\ {{ Images_Cahier-101-08-083.png?600}} - Le premier message peut être supprimé, car c'est une première installation. - Pour //WooCommerce Products Block//, votre choix. Nous sommes vieux jeu et préférons l'éditeur classique: //(Ignorer)//. \\ {{ Images_Cahier-101-08-084.png?600}} - Plus loin, nous nous occuperons de la configuration de //Stripe//.\\ - **Fermer** cette fenêtre. \\ {{ 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//. \\ {{ Images_Cahier-101-08-086.png?600}} L'extension //WooCommerce// est installée et activée. \\ Les menus //WooCommerce// et //Produits// ont été installées. |{{ Images_Cahier-101-08-087.png?400 }}| |{{ Images_Cahier-101-08-088.png?400 }}| \\ ===== 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**. \\ **Tableau de bord -> Apparence -> Personnaliser -> WooCommerce**. |{{ Images_Cahier-101-08-090.png?400 }}| \\ **Images de produit**. |{{ Images_Cahier-101-08-091.png?400 }}| \\ **__Non recadrée__ -> Publier -> X**. |{{ Images_Cahier-101-08-093.png?400 }}| ==== Général ==== {{ Images_Cahier-101-08-094.png?600}} === Adresse de la boutique === - **WooCommerce -> Réglages ->** onglet **Général**. - Cliquer **Ignorer** pour sup­pri­mer le message. - On vérifie/corrige l'adresse de notre Boutique. \\ {{ 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** \\ {{ Images_Cahier-101-08-096.png?600}} === Options devise === ● //**Devise**// ● //**Position devise**// Si nous avons changé un paramètre, **Enregistrer les changements**. \\ {{ Images_Cahier-101-08-097.png?600}} {{Images_Cahier-101-03-006.png?25}} On s'assure du succès de l'opération. \\ === 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. [root@dev ~]# ls -als /var/www/html/wp-content/uploads/*Lite2* 3612 -rw-r--r-- 1 apache apache 3696547 3 mars 16:16 /var/www/html/wp-content/uploads/GeoLite2-Country.mmdb [root@dev ~]# La base de donnée //(.mmdb - MaxMind database)// a bien été téléversée. == 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. \\ {{ 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. \\ {{ Images_Cahier-101-08-100.png?600}} ● //**Dimensions**//\\ Unité de poids **kg** \\ Unité de dimensions **cm** \\ {{ 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. \\ === 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. \\ === 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. \\ ==== 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. \\ {{ Images_Cahier-101-08-105.png?600}} Après avoir enregistrer les changements, un nouveau menu est créé pour la //Taxe sur livre//. \\ === 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. \\ == 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. Onglet **TVA -> Taux standards -> Import CSV**. |{{ Images_Cahier-101-08-107.png?400 }}| \\ **Parcourir...** |{{ Images_Cahier-101-08-108.png?400 }}| \\ Sélectionner le fichier **-> Ouvrir**. |{{ Images_Cahier-101-08-109.png?400 }}| \\ **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**. |{{ Images_Cahier-101-08-110.png?400 }}| |{{ Images_Cahier-101-08-111.png?400 }}| \\ {{ 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é]]. \\ == 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é. \\ === Taux zéro === {{ Images_Cahier-101-08-114.png?600}} N'est pas utilisé. \\ == 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 détaxé dans le régime de la //TVQ//. Cependant, dans le régime de la //TPS//, cette vente est taxable et peut, dans certaines circonstances, faire l’objet d’un remboursement. {{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//. ==== 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. Onglet **Expédition -> Zone d'expédition ->** on survole **Canada -> Modifier**. |{{ Images_Cahier-101-08-117.png?400 }}| - Le //Mode d'expédition// est //**Activé**//.\\ - On survole **Forfait -> Modifier**. |{{ Images_Cahier-101-08-118.png?400 }}| \\ - Les réglages s'affichent et on peut les modifier **-> Enregistrer les modifications**.\\ - Ou, on peut fermer //(X)// et retourner à //Zone d'expédition//. |{{ Images_Cahier-101-08-119.png?400 }}| 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 }}| \\ === Options de livraison === {{ Images_Cahier-101-08-121.png?600}} //**Calculs**// ☑ **Activer le calculateur de frais de livraison sur la page panier** ☑ **Masquer les frais de livraison jusqu’à ce qu’une adresse soit renseignée** //**Destination de la livraison**// ⦿ **Par défaut à l’adresse de livraison client** **Enregistrer les changements**. \\ === 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/]]. \\ ==== 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**. \\ === 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. Il est impératif que l'adresse courriel pour **E-mail du Destinataire** soit __la même__ que celle de **E-mail PayPal** du gestionnaire du compte //PayPal// sinon, les acheteurs de produits téléchargeables __ne recevront pas leurs liens__ de téléchargement après leur paiement et __la commande restera figée à //En Cours//__. ● **Préfixe de la facture**, au choix. ● **Action de paiement**, il faut **Capturer** sinon, les clients attendront qu'on valide la commande pour recevoir leur lien de téléchargement après leur paiement. \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ ● C'est ici qu'on entre les //**Informations d'identification API**// voir [[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**. \\ == Différences entre les Modes Live & Sandbox == Les images ci-contre illustrent les différences entre le //Mode Live// et le //Mode Sandbox//. Mode Live {{ Images_Cahier-101-08-125.png?400 }} {{ Images_Cahier-101-08-127.png?400 }} Mode SandBox {{ Images_Cahier-101-08-126.png?400 }} {{ Images_Cahier-101-08-128.png?400 }} \\ ==== Comptes et confidentialité ==== {{ Images_Cahier-101-08-129.png?600}} Les configurations ci-contre sont celles que nous utilisons pour notre propre boutique. \\ === 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]]. \\ === 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. \\ ==== 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 === \\ \\ \\ \\ \\ On ajuste les différents paramètres. |{{ Images_Cahier-101-08-132.png?400 }}| - On peut //désactiver// ce courriel. //(Non recommandé.)//\\ - //**Destinataire:**// adresse courriel de l'administrateur du site.\\ - On peut //modifier les modèles// des courriels.\\ **-> Enregistrer les changements**.\\ - On clique l'icône de retour, à la fin de la ligne //**Nouvelle commande**//. |{{ Images_Cahier-101-08-133.png?400 }}| 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 === - On peut activer/désactiver ce courriel.\\ - //**Destinataire:**// adresse courriel de l'administrateur du site.\\ -> Enregistrer les changements.\\ - On clique l'icône de retour, à la fin de la ligne //**Commande Annulée**//. |{{ Images_Cahier-101-08-134.png?400 }}| - On peut activer/désactiver ce courriel.\\ - //**Destinataire:**// adresse courriel de l'administrateur du site.\\ -> Enregistrer les changements.\\ - On clique l'icône de retour, à la fin de la ligne //**Commande Annulée**//. |{{ Images_Cahier-101-08-135.png?400 }}| \\ === Options d’e-mail de l’expéditeur === On est de retour à la page de l'onglet **E-mails**. ● 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//. {{ Images_Cahier-101-08-136.png?400 }} {{ Images_Cahier-101-08-137.png?400 }} \\ === 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. \\ {{ 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. \\ ==== 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]]. \\ {{ 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)**. === Points de terminaisons de validation de commande === {{ Images_Cahier-101-08-143.png?600}} On prend les paramètres par défaut. \\ === 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. \\ === Clés/Apps === {{ Images_Cahier-101-08-145.png?600}} N'est pas utilisé. \\ === Crochets Web === {{ Images_Cahier-101-08-146.png?600}} N'est pas utilisé. \\ === Ancienne API === {{ Images_Cahier-101-08-147.png?600}} N'est pas utilisé. \\ ==== 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**. \\ ==== 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]]. **Tableau de bord -> Utilisateurs -> Ajouter**. |{{ Images_Cahier-101-08-149.png?400 }}| 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 }}| === 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. \\ === Informations du nouvel utilisateur === **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 }} 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 }}| \\ ==== 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 ==== **WooCommerce -> Codes promo -> Créer votre premier code promo**. |{{ Images_Cahier-101-08-157.png?400 }}| - Menu **Général**.\\ - Entrer les informations demandées. |{{ Images_Cahier-101-08-158.png?400 }}| \\ - Menu **Restriction d'usage**.\\ - Entrer les informations demandées. |{{ Images_Cahier-101-08-159.png?400 }}| - Menu **Limites d'utilisation**.\\ - Entrer les informations demandées **-> Publier**. |{{ Images_Cahier-101-08-160.png?400 }}| \\ {{ Images_Cahier-101-08-161.png?600}} Pour vérifier, on retourne à **WooCommerce -> Codes promo**. \\ Le code promo a été créé et il pourra être insérer depuis les pages //Panier// et //Validation de la commande//. |{{ Images_Cahier-101-08-162.png?400 }}| |{{ Images_Cahier-101-08-163.png?400 }}| ==== Exemples des sous-menus ==== === Commandes === {{ Images_Cahier-101-08-164.png?600}} Pour afficher les commandes reçues: **Tableau de bord -> WooCommerce -> Commandes**. \\ === 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. \\ === État === {{ Images_Cahier-101-08-166.png?600}} Pour connaître tous les environnements de notre système. **Tableau de bord -> WooCommerce -> État**. \\ === 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**. \\ ==== 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/ \\ === 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/ \\ **Nous sommes prêts à créer nos produits.** \\ ===== Produits physiques ===== ==== Catégorie ==== Nous créons une catégorie de produits multimédia. \\ \\ **Tableau de bord -> WooCommerce -> Produits -> Catégories**. |{{ Images_Cahier-101-08-170.png?400 }}| \\ \\ \\ On entre les informations demandées. |{{ Images_Cahier-101-08-171.png?400 }}| - On ajoute une //**Description**//.\\ - On ajoute une image.\\ - **Ajouter une nouvelle catégorie de produits**. |{{ Images_Cahier-101-08-172.png?400 }}| \\ {{ 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. \\ ==== Création du produit ==== **Tableau de bord -> WooCommerce -> Produits -> Ajouter un produit ->** on nomme le produit. |{{ Images_Cahier-101-08-174.png?400 }}| \\ \\ On entre la description du produit. |{{ Images_Cahier-101-08-175.png?400 }}| \\ \\ **29.97 -> Taxable -> Standard**. |{{ Images_Cahier-101-08-176.png?400 }}| \\ Description courte du produit. |{{ Images_Cahier-101-08-177.png?400 }}| **Définir l'image du produit**. |{{ Images_Cahier-101-08-178.png?400 }}| **Téléverser des fichiers**. |{{ Images_Cahier-101-08-179.png?400 }}| \\ \\ **Choisir des fichiers**. |{{ Images_Cahier-101-08-180.png?400 }}| On choisit le fichier de l'image dans un répertoire sur le poste de travail. |{{ Images_Cahier-101-08-181.png?400 }}| \\ L'image est sélectionnée. |{{ Images_Cahier-101-08-182.png?400 }}| - On entre un //**Titre**//, un //**Texte alternatif**// et une //**Description**//.\\ - La //**Légende**// s'affiche en bas de l'image lorsqu'on agrandit celle-ci sur la page du produit.\\ - **Définir l'image du produit**. |{{ Images_Cahier-101-08-183.png?400 }}| |{{ Images_Cahier-101-08-184.png?400 }}| \\ \\ \\ \\ \\ L'image du produit est affiché. |{{ Images_Cahier-101-08-185.png?400 }}| \\ \\ \\ \\ \\ Cocher la catégorie du produit. |{{ Images_Cahier-101-08-186.png?400 }}| \\ **Publier**. |{{ Images_Cahier-101-08-187.png?400 }}| **Prévisualiser les modifications**. |{{ Images_Cahier-101-08-188.png?400 }}| La page du produit est affiché sur le site. |{{ Images_Cahier-101-08-189.png?400 }}| \\ Le produit est aussi affiché dans la //Boutique//. |{{ Images_Cahier-101-08-190.png?400 }}| \\ \\ ===== 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//. **Tableau de bord -> WooCommerce -> Produits -> Catégories**. |{{ Images_Cahier-101-08-191.png?400 }}| \\ On entre les informations demandées. |{{ Images_Cahier-101-08-192.png?400 }}| - **Téléverser/Ajouter image**.\\ - **Ajouter une catégorie**. |{{ Images_Cahier-101-08-193.png?400 }}| \\ {{ Images_Cahier-101-08-194.png?600}} On rafraîchit la page. La nouvelle catégorie apparaît. \\ ==== Création du produit ==== === Titre et description === **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 ''
'' 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. \\ Description du produit. |{{ Images_Cahier-101-08-196.png?400 }}| === Prix du produit === - //**Données Produit**// **-> Produit simple**. - Cocher **Virtuel**. - Cocher **Téléchargeable**. - On entre le prix. |{{ Images_Cahier-101-08-197.png?400 }}| \\ === Fichiers téléchargeables === **Ajouter un fichier ->** on entre le nom: **Cahier-04 Fichier PDF -> Choisir un fichier**. |{{ Images_Cahier-101-08-198.png?400 }}| \\ \\ Onglet **Téléverser des fichiers**. |{{ Images_Cahier-101-08-199.png?400 }}| \\ \\ Sélectionner des fichier. |{{ Images_Cahier-101-08-200.png?400 }}| \\ \\ \\ \\ \\ Sélectionner le fichier PDF **-> Ouvrir**. |{{ Images_Cahier-101-08-201.png?400 }}| \\ \\ \\ Entrer un **Titre**, une **Légende**, une **Description -> Insérer l'URL du fichier**. |{{ Images_Cahier-101-08-202.png?400 }}| - Le fichier est inséré.\\ - 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 }}| \\ - Ce deuxième fichier est le diagramme du réseau décrit dans le premier document. - Le lien du deuxième fichier apparaît. |{{ Images_Cahier-101-08-204.png?400 }}| |{{ Images_Cahier-101-08-205.png?400 }}| \\ === Fichiers des sommes de contrôle === De la même manière, on ajoute les fichiers des sommes de contrôle //SHA-1// des fichiers précédents. |{{ Images_Cahier-101-08-206.png?400 }}| \\ === Limite, Expiration, Type, État de la TVA et Classe === On entre les informations suivantes: **5 -> Jamais -> Application/Logiciel -> Taxable -> Standard**. |{{ Images_Cahier-101-08-207.png?400 }}| \\ === Description courte, Catégorie et Image du produit=== On entre la **Description courte du produit**. |{{ Images_Cahier-101-08-208.png?400 }}| \\ On coche la **Catégorie du produit**. |{{ Images_Cahier-101-08-209.png?400 }}| \\ **Définir l'image du produi**t. |{{ Images_Cahier-101-08-210.png?400 }}| \\ \\ **Envoyer des fichiers**. |{{ Images_Cahier-101-08-211.png?400 }}| \\ **Choisir des fichiers**. |{{ Images_Cahier-101-08-212.png?400 }}| Entrer les informations requises **-> Définir l'image produit**. |{{ Images_Cahier-101-08-213.png?400 }}| \\ === Galerie produit === On ajoute des images des pages du sommaire. \\ **Ajouter des images à la galerie produit**. |{{ Images_Cahier-101-08-214.png?400 }}| On choisit les images, on les insère, on entre les informations demandées **-> Ajouter à la galerie**. |{{ Images_Cahier-101-08-215.png?400 }}| \\ \\ Les images apparaissent. |{{ Images_Cahier-101-08-216.png?400 }}| \\ On peut déplacer une image en la survolant puis, //cliquer et glisser//. |{{ Images_Cahier-101-08-217.png?400 }}| \\ === Publication et Prévisualisation === **Publier**. |{{ Images_Cahier-101-08-218.png?400 }}| **Prévisualiser les modifications**. |{{ Images_Cahier-101-08-219.png?400 }}| La page du produit s'affiche. |{{ Images_Cahier-101-08-220.png?400 }}| \\ **Boutique ->** tous les produits de la boutique apparaissent. |{{ Images_Cahier-101-08-221.png?400 }}| \\ ==== Lightbox ==== - On survole l'image pour zoomer et se déplacer sur la page du produit. - On clique une image de sa galerie et elle remplacera l'image du produit. - 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. |{{ Images_Cahier-101-08-222.png?400 }}| |{{ Images_Cahier-101-08-223.png?400 }}| \\ ===== 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 ==== - De retour à notre Boutique, clac sur l'image du produit **-> Informations sur l'image**. - L'image //PNG// a une dimension de //551 x 712 pixels//. |{{ Images_Cahier-101-08-224.png?400 }}| |{{ Images_Cahier-101-08-225.png?400 }}| \\ == 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//. \\ === Image générée par un appareil photo === - Avec le navigateur Firefox, clac //(clic droit)// sur une image prise avec un appareil photo **-> Informations sur l'image**. - L'image JPEG a une dimension de //1600 x 1200 pixels//. |{{ Images_Cahier-101-08-227.png?400 }}| |{{ Images_Cahier-101-08-228.png?400 }}| ==== 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**. **Tableau de bord -> Extensions -> Ajouter -> Mot-clé -> Regenerate Thumbnails**. |{{ Images_Cahier-101-08-229.png?400 }}| \\ \\ **Installer**. |{{ Images_Cahier-101-08-230.png?400 }}| \\ \\ **Activer**. |{{ Images_Cahier-101-08-231.png?400 }}| \\ === Régénération === \\ L'extension est installée et activée. |{{ Images_Cahier-101-08-232.png?600 }}| **Tableau de bord -> Outils -> Regenerate Thumbnails**. |{{ Images_Cahier-101-08-233.png?400 }}| \\ - 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 }}| \\ \\ - On s'assure du succès de l'opération.\\ * L'article //#8// n'est pas une image mais un PDF. |{{ Images_Cahier-101-08-235.png?400 }}| \\ 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. |{{ Images_Cahier-101-08-236.png?400 }}| |{{ Images_Cahier-101-08-237.png?400 }}| \\ ==== Vérifications des vignettes ==== Les vignettes apparaissent sous l'image du produit. |{{ Images_Cahier-101-08-238.png?400 }}| \\ On en clique une **-> Loupe**. |{{ Images_Cahier-101-08-239.png?400 }}| On peut agrandir à plein écran, passer à la vignette suivante ou précédente et fermer. |{{ Images_Cahier-101-08-240.png?400 }}| **Les images s'affichent correctement, elles sont claires et ne sont pas tronquées.** \\ ===== 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]]. == 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. **††** //**Explication**// {{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//. |{{ Images_Cahier-101-08-244.png?400 }}| 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. 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 En cours. Il ne restera alors que les icônes //Terminer// et //Voir//. |{{ Images_Cahier-101-08-245.png?400 }}| |{{ Images_Cahier-101-08-246.png?400 }}| {{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//. \\ {{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**. \\ ==== 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. \\ ==== Achat d'un produit physique ==== {{Images_Cahier-101-03-004.png?25}} On se déconnecte de notre site WooCommerce. \\ Sur notre site on clique **Boutique**. |{{ Images_Cahier-101-08-250.png?400 }}| Sous //Chromecast//, on clique **Ajouter au panier**. |{{ Images_Cahier-101-08-251.png?400 }}| \\ **Voir Panier**. |{{ Images_Cahier-101-08-252.png?400 }}| \\ \\ \\ \\ **Valider la commande**. |{{ Images_Cahier-101-08-253.png?400 }}| - 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]].\\ - **Cliquez ici pour vous connecter**. |{{ Images_Cahier-101-08-254.png?400 }}| \\ \\ **Identifiant ou e-mail -> Mot de passe -> Connexion**. |{{ Images_Cahier-101-08-255.png?400 }}| \\ {{ 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**. \\ {{ 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. \\ \\ \\ \\ \\ \\ Le client est redirigé vers un site sécurisé. |{{ Images_Cahier-101-08-258.png?400 }}| \\ - Dans le cas de ce client particulier, nous lui avons déjà créé un usager dans le //Sandbox de PayPal//.\\ - On entre le **mot de passe** qu'on a donné à cet usager dans //Sandbox// **-> Log In**. |{{ Images_Cahier-101-08-259.png?400 }}| - 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]].\\ - On coche **Make this card my preferred way to pay**.\\ **-> Pay Now**. |{{ Images_Cahier-101-08-260.png?400 }}| \\ - Le paiement pour la commande a été accepté.\\ - **Return to Merchant**. De retour sur notre site, //acheteur-test// peut voir sa commande. |{{ Images_Cahier-101-08-261.png?400 }}| |{{ Images_Cahier-101-08-262.png?400 }}| \\ === 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. \\ {{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]]. \\ - Nous sommes sur un serveur LOCAL.\\ - 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.\\ - On change pour **En cours**. |{{ Images_Cahier-101-08-264.png?400 }}| |{{ Images_Cahier-101-08-265.png?400 }}| \\ **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. |{{ Images_Cahier-101-08-266.png?400 }}| |{{ Images_Cahier-101-08-267.png?400 }}| \\ **Mettre à jour** pour envoyer le courriel. |{{ Images_Cahier-101-08-268.png?400 }}| État de la commande __avant__ l'expédition. |{{ Images_Cahier-101-08-269.png?400 }}| État de la commande __après__ l'expédition. |{{ Images_Cahier-101-08-270.png?400 }}| \\ === 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//. Courriel //Nouvelle commande client// à l'administrateur du site //WooCommerce// avant l'expédition. |{{ Images_Cahier-101-08-271.png?400 }}| \\ Courriel de remerciement à l'a­che­teur __avant__ l'expédition. |{{ Images_Cahier-101-08-272.png?400 }}| \\ Courriel des détails de la facture à l'acheteur __après__ l'expédition. |{{ Images_Cahier-101-08-273.png?400 }}| \\ ==== Achat d'un produit téléchargeable ==== Si l'administrateur du site ou l'utilisateur //acheteur-test// est logué, __il se délogue__. - Sur le site, on clique **Boutique**.\\ - Sous l'image du PDF, on clique **Ajouter au panier**. |{{ Images_Cahier-101-08-274.png?400 }}| \\ \\ **Voir Panier**. |{{ Images_Cahier-101-08-275.png?400 }}| \\ \\ **Valider la commande**. |{{ Images_Cahier-101-08-276.png?400 }}| \\ - Vu que l'usager //acheteur-test// a déjà un compte sur notre site //WooCommerce//, il peut se connecter et ses coordonnées seront entrées automatiquement.\\ - **Cliquez ici pour vous connecter**. |{{ Images_Cahier-101-08-277.png?400 }}| \\ \\ \\ **Identifiant ou e-mail -> Mot de passe -> Connexion**. |{{ Images_Cahier-101-08-278.png?400 }}| \\ \\ \\ Les coordonnées du client sont entrées automatiquement par //WooCommerce//. |{{ Images_Cahier-101-08-279.png?400 }}| \\ === Paiement === \\ \\ - Cocher //J’ai lu et j’accepte les conditions générales//.\\ - **Payer avec PayPal**. |{{ Images_Cahier-101-08-280.png?400 }}| \\ \\ \\ L'adresse courriel est déjà entrée, on entre le **mot de passe -> Log In**. |{{ Images_Cahier-101-08-281.png?400 }}| - Quelque fois, //Sandbox// ne se souviens pas de notre choix de paiement préféré.\\ - Cette fois, on coche et on paie avec notre compte **PayPal Balance -> Payer maintenant**. |{{ Images_Cahier-101-08-282.png?400 }}| \\ - Les détails de la transaction sont affichés.\\ - **Return to Merchant**. |{{ Images_Cahier-101-08-283.png?400 }}| \\ === De retour à la Boutique === \\ \\ Les détails de la commande sont affichés. |{{ Images_Cahier-101-08-284.png?400 }}| 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 }}| - L'administrateur du site change l'//État de la commande// à **Terminée**.\\ - **Mettre à jour**. |{{ Images_Cahier-101-08-286.png?400 }}| |{{ Images_Cahier-101-08-287.png?400 }}| {{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 === - **Mon compte**.\\ - **Commandes -> Voir**. |{{ Images_Cahier-101-08-288.png?400 }}| |{{ Images_Cahier-101-08-289.png?400 }}| On clique **Cahier-04 Fichier PDF** pour télécharger le document. |{{ Images_Cahier-101-08-290.png?400 }}| \\ On sauvegarde le fichier PDF. |{{ Images_Cahier-101-08-291.png?400 }}| \\ - On rafraîchit la page.\\ - 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]]. |{{ Images_Cahier-101-08-292.png?400 }}| \\ == Nombre limite de téléchargements == \\ 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 }} - Au sixième téléchargement, le //nombre limite de téléchargements autorisé// a été déjà atteint.\\ - **Aller à la boutique**. |{{ Images_Cahier-101-08-294.png?400 }}| \\ - **Mon compte -> Téléchargements**.\\ - Le //nombre de téléchargements// pour ce fichier est épuisé. |{{ Images_Cahier-101-08-295.png?400 }}| \\ === Courriels de la nouvelle commande === \\ Courriel //Nouvelle commande client// à l'administrateur du site //WooCommerce//. |{{ Images_Cahier-101-08-296.png?400 }}| Courriel de //remerciement/facture// à l'acheteur contenant les liens de téléchargements ... |{{ Images_Cahier-101-08-297.png?400 }}| \\ \\ ... y sont inclus. |{{ Images_Cahier-101-08-298.png?400 }}| \\ === 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... \\ **Voilà, notre boutique WooCommerce fonctionne parfaitement en mode TEST de PayPal.** \\ ===== 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**// - **Tableau de bord WordPress | WooCommerce -> Réglages -> Expédition -> Zones d'expédition -> Canada -> Forfait -> Coût**. - **Ajuster le coût** le plus bas possible. - **Enregistrer les modifications**. |{{ Images_Cahier-101-08-300.png?400 }}| //**► Désactivation du bac à sable**// **Tableau de bord WordPress -> WooCommerce -> Réglages -> Paiement -> PayPal Gérer**. Décocher **Activer PayPal sandbox**. |{{ Images_Cahier-101-08-301.png?400 }}| //**► Informations d’identification API**// - On s'assure qu'on est bien en //Mode LIVE// et que nos //justificatifs API Live// sont tous présents. - **Enregistrer les modifications**. |{{ Images_Cahier-101-08-302.png?600 }}| === Prix des produits === //**► Cahier-04**// **Tableau de bord WordPress -> Produits -> NethServer-101, Cahier-04... -> Modifier -> Tarif régulier ($)**. Ajuster le coût à **0.99**. **Mettre à jour** et vérifier avec **Prévisualiser les modifications**. |{{ Images_Cahier-101-08-303.png?400 }}| //**► Lecteur HDMI**// **Tableau de bord WordPress -> Produits -> Lecteur média HDMI Chromecast -> Modifier -> Tarif régulier ($)**. Ajuster le coût à **0.99**. **Mettre à jour** et vérifier avec **Prévisualiser les modifications**. |{{ Images_Cahier-101-08-303.png?400 }}| //**► Nettoyage du Panier**// - On se logue sur notre site WooCommerce avec l'usager __acheteur__. - Si nous avons fait des tests d'achat, on supprime tous les articles qu'on pourrait avoir dans le Panier. |{{ Images_Cahier-101-08-305.png?400 }}| |{{ Images_Cahier-101-08-306.png?400 }}| \\ ==== Achat réel ==== 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**. |{{ Images_Cahier-101-08-307.png?600 }}| \\ - L'usager __acheteur__ est déjà logué, ses coordonnées sont automatiquement ajoutées. - **On coche** que //nous acceptons les conditions générales//.\\ - **Payer avec PayPal**. |{{ Images_Cahier-101-08-308.png?400 }}| |{{ Images_Cahier-101-08-309.png?400 }}| \\ === Paiement === - L'usager //acheteur// n'a pas de compte //PayPal//. Il va payer par carte de crédit.\\ - On entre les informations demandées. \\ \\ - On vérifie les informations affichées.\\ - On coche **Je confirme que j'accepte...** **-> Payer maintenant**. |{{ Images_Cahier-101-08-310.png?400 }}| |{{ Images_Cahier-101-08-311.png?400 }}| \\ **Pas maintenant**. |{{ Images_Cahier-101-08-312.png?400 }}| **Retourner chez le marchand**. |{{ Images_Cahier-101-08-313.png?400 }}| La commande est affichée. |{{ Images_Cahier-101-08-314.png?400 }}| \\ {{ 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**. \\ === Courriels au client === \\ De //PayPal// pour signaler le paie­ment. |{{ Images_Cahier-101-08-316.png?400 }}| De //WooCommerce// pour remercier le client de sa commande... |{{ Images_Cahier-101-08-317.png?400 }}| ... et lui fournir les liens de téléchargements. |{{ Images_Cahier-101-08-318.png?400 }}| \\ {{ 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**. \\ === Autres courriels === Notification au client que sa com­mande est terminée. |{{ Images_Cahier-101-08-320.png?400 }}| L'administrateur du site //WooCommerce// est notifié d'une //Nouvelle commande//... |{{ Images_Cahier-101-08-321.png?400 }}| ... puis, il reçoit la confirmation de //PayPal// du montant payé par le client. |{{ Images_Cahier-101-08-322.png?400 }}| **Notre WooCommerce fonctionne parfaitement avec les paiements PayPal, en Mode TEST et en Mode LIVE/Réel**. \\ ===== 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}} 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. ==== Fermeture de compte ==== On se logue chez //PayPal// **->** icône **Préférences -> Préférences et paramètres**. |{{ Images_Cahier-101-08-323.png?400 }}| \\ \\ **Mes paramètres -> Fermer le compte -> Continuer**. |{{ Images_Cahier-101-08-324.png?600 }}| |{{ Images_Cahier-101-08-325.png?600 }}| \\ - **Cocher** et donner une raison pour fermer le compte **-> Continuer**. \\ - **Continuer**. \\ - **Clore le compte**. |{{ Images_Cahier-101-08-326.png?400 }}| |{{ Images_Cahier-101-08-327.png?400 }}| |{{ Images_Cahier-101-08-328.png?400 }}| \\ - On est retourné à la page d'accueil de **PayPal**. \\ - On reçoit un courriel de confirmation de la fermeture du compte. |{{ Images_Cahier-101-08-329.png?400 }}| |{{ Images_Cahier-101-08-330.png?400 }}| {{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. **Voilà, le compte PayPal est fermé.** \\ ===== 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. \\ //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. \\ \\ ==== 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//. **Tableau de bord -> Extensions -> Ajouter**. |{{ Images_Cahier-101-08-334.png?400 }}| //**Mot-clé**// **WooCommerce Stripe Payment Gateway**. |{{ Images_Cahier-101-08-335.png?400 }}| \\ **Installer**. |{{ Images_Cahier-101-08-336.png?400 }}| **Activer**. |{{ Images_Cahier-101-08-337.png?400 }}| La version //4.1.14// de //WooCommerce Stripe Payment Gateway// est active. |{{ Images_Cahier-101-08-338.png?600 }}| **L'extension WooCommerce Stripe Payment Gateway est installée et activée.** \\ ==== 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]]. - En bas de la page, **Sign Up**. \\ - Entrer les informations demandées.\\ **-> Create you Stripe account**. |{{ Images_Cahier-101-08-339.png?400 }}| |{{ Images_Cahier-101-08-340.png?400 }}| === 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. - **Cliquer le lien** pour confirmer le compte //Stripe//. \\ \\ **►** Notre adresse courriel est entrée par défaut.\\ - On entre notre **mot de passe**.\\ - **Confirm your email**. |{{ Images_Cahier-101-08-341.png?400 }}| |{{ Images_Cahier-101-08-342.png?400 }}| 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é. |{{ Images_Cahier-101-08-343.png?400 }}| \\ **►** //**Activation du compte Stripe**// - **Activate Your Account**. - **Your account -> Activate Account...** |{{ Images_Cahier-101-08-344.png?400 }}| |{{ Images_Cahier-101-08-345.png?400 }}| \\ - Choisir le pays et donner une description. \\ \\ - **Individual / Sole Proprietorship** et entrer les informations demandées.\\ - L'URL de notre site est confirmé - //(Valid URL!)//. |{{ Images_Cahier-101-08-346.png?400 }}| |{{ Images_Cahier-101-08-347.png?400 }}| \\ **►** //**Your personal details**// 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é. |{{ Images_Cahier-101-08-348.png?400 }}| - Entrer les informations demandées.\\ - Ne rien enter pour SIN //(Tax ID)//. - Entrer les informations demandées. |{{ Images_Cahier-101-08-349.png?400 }}| |{{ Images_Cahier-101-08-350.png?400 }}| **►** //**Détails bancaires**// - Entrer les informations demandées.\\ - 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.__)// \\ - Lire //Terms of Service// et __si acceptés__ **-> Activate account**. |{{ Images_Cahier-101-08-351.png?400 }}| |{{ Images_Cahier-101-08-352.png?400 }}| \\ - Une page de remerciement s'affiche.\\ - Notre statut est Approuvé. \\ \\ - Le titulaire du compte reçoit un courriel de bienvenue. |{{ Images_Cahier-101-08-353.png?400 }}| |{{ Images_Cahier-101-08-354.png?400 }}| === Notifications === On veut recevoir toutes les notifications que //Stripe// pourrait nous envoyer. **Icône -> Profile**. |{{ Images_Cahier-101-08-355.png?300 }}| On coche tout et on clique l'**icône de retour**. |{{ Images_Cahier-101-08-356.png?600 }}| === Confirmation d'identité === **Business Settings**. |{{ Images_Cahier-101-08-357.png?600 }}| **Verifications**. |{{ Images_Cahier-101-08-358.png?400 }}| \\ \\ **Verify now**. |{{ Images_Cahier-101-08-359.png?400 }}| \\ **Start verification**. |{{ Images_Cahier-101-08-360.png?400 }}| Cliquer sous un des choix de pièce d'identité. |{{ Images_Cahier-101-08-361.png?400 }}| \\ **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 }}| Choisir le fichier de l'image du recto de notre pièce d'identité. |{{ Images_Cahier-101-08-363.png?400 }}| \\ **Continue**. |{{ Images_Cahier-101-08-364.png?400 }}| \\ **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 }}| Choisir le fichier de l'image du verso de notre pièce d'identité. |{{ Images_Cahier-101-08-366.png?400 }}| \\ **Confirm**. |{{ Images_Cahier-101-08-367.png?400 }}| \\ \\ \\ \\ \\ \\ Nos fichiers se font anlayser. |{{ Images_Cahier-101-08-368.png?400 }}| \\ \\ \\ \\ \\ **Done**. |{{ Images_Cahier-101-08-369.png?400 }}| - 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.\\ - On clique **Settings** pour retourner au tableau de bord. |{{ Images_Cahier-101-08-370.png?400 }}| \\ === 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. **Webhooks**. |{{ Images_Cahier-101-08-371.png?400 }}| **Settings -> Add endpoints...** |{{ Images_Cahier-101-08-372.png?400 }}| \\ **►** //**Mode Test**// - On entre le nom de notre domaine.\\ - Choisir le **Mode: Test**.\\ - **Send me all events**.\\ - **Create endpoint**. |{{ Images_Cahier-101-08-373.png?400 }}| \\ - __http://www.__ 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 }}| \\ **►** //**Mode LIVE**// - On entre le nom de notre domaine.\\ - Choisir le **Mode: Live**.\\ - **Send me all events**.\\ - **Create endpoint**. |{{ Images_Cahier-101-08-375.png?400 }}| \\ \\ - __http://www.__ est ajouté à notre nom de domaine.\\ - On clique **Send test webhook...** |{{ Images_Cahier-101-08-376.png?400 }}| \\ **►** //**Test de webhook**// - On choisit la dernière version.\\ - **Send test webhook**. |{{ Images_Cahier-101-08-377.png?400 }}| **-** On vérifie le succès de l'envoi\\ **-** **Cancel**. |{{ Images_Cahier-101-08-378.png?400 }}| === 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. - **Developers -> API keys**.\\ - Bouton __vers la droite__.\\ - Les clé API pour le //Mode TEST// s'affichent. |{{ Images_Cahier-101-08-379.png?400 }}| \\ - Bouton __vers la gauche__.\\ - Les clés API pour le //Mode Réel// s'affichent. |{{ Images_Cahier-101-08-380.png?400 }}| \\ \\ ==== 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**. \\ {{ 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 }} \\ ● //**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//. Un paiement via la société STRIPE se fait avec un chiffrement de 2048 bits et une certification PCI/DSS Service Provider Level 1. |{{ Images_Cahier-101-08-384.png?400 }}| \\ === 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}} On coche ce paramètre. **►** //**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//__. \\ 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. |{{ Images_Cahier-101-08-393.png?400 }}| |{{ Images_Cahier-101-08-394.png?400 }}| |{{ Images_Cahier-101-08-395.png?400 }}| |{{ Images_Cahier-101-08-396.png?400 }}| \\ === 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 128x128 pixels. //Exemple://\\ /Ut/Images/Logo/logo_Micronator_128x128_1200-1200_CarteBancaire.png. ● //**Description page de paiement Stripe**//\\ Affiche une description de votre boutique sur le formulaire de la caisse de sortie //Stripe// //(en dessous du Descripteur de déclaration)//. Nous entrons: **Créez votre propre commerce en ligne**. {{Images_Cahier-101-08-400.png?200}} \\ \\ \\ //Modale de paiement Stripe// - coché //(activé)//. |{{ Images_Cahier-101-08-401.png?400 }}| \\ 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 }}| - //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 }}| === Boutons de demande de paiement === {{ Images_Cahier-101-08-404.png?600}} Non-utilisé. \\ === 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__. === 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//. == 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**. \\ === Enregistrement des changements === {{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**. |{{ Images_Cahier-101-08-408.png?400 }}| |{{ Images_Cahier-101-08-409.png?400 }}| \\ === Ordre d'affichage des passerelles de paiement === **Tableau de bord WordPress -> WooCommerce -> Réglages ->** onglet **Paiements**. - On clique l'icône {{Images_Cahier-101-08-410-A.png?20}} à la gauche de la passerelle //Stripe//.\\ - La souris s'affiche alors différemment.\\ - On glisse le paragraphe //Stripe// au premier rang et //PayPal// au second rang des passerelles actives. **-> Enregistrer les modifications**. |{{ Images_Cahier-101-08-410.png?600 }}| {{ Images_Cahier-101-08-411.png?200 }} 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 }}| {{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 === 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**. |{{ Images_Cahier-101-08-413.png?400 }}| |{{ Images_Cahier-101-08-414.png?400 }}| **►** //**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]]. - Sur notre site //WooCommerce//, on se logue en tant que l'utilisateur __acheteur-test__.\\ - Faire des achats et se rendre à la page **Panier**.\\ - Cliquer **Procéder à la commande**. |{{ Images_Cahier-101-08-415.png?400 }}| - Choisir: **Payer via Stripe**.\\ - Entrer les informations demandées.\\ - Cochez si vous avez __lu et accepté__ les //conditions générales//.\\ - Cliquer: **Continuer pour le paiement**. |{{ Images_Cahier-101-08-416.png?400 }}| 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. Serveur branché directement à l'Internet. |{{ Images_Cahier-101-08-417.png?400 }}| Serveur LOCAL sans mandataire inversé. |{{ Images_Cahier-101-08-418.png?400 }}| \\ {{ 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é:\\ - nous expédions le //Lecteur média HDMI Chromecast//,\\ - nous changeons l'//État de la commande// à __Terminée__. **-> Mettre à jour**. \\ {{ Images_Cahier-101-08-420.png?600}} Le client clique **Mon compte -> Commandes** et le dernier achat //86// apparaît. \\ === 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. |{{ Images_Cahier-101-08-423.png?400 }}| |{{ Images_Cahier-101-08-421.png?400 }}| |{{ Images_Cahier-101-08-422.png?400 }}| **On est prêt pour un achat en Mode LIVE/Réel.** ==== 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//. - Nous avons un message.\\ - On le clique. - On clique **transfers page**. |{{ Images_Cahier-101-08-426.png?400 }}| |{{ Images_Cahier-101-08-427.png?400 }}| **►** //**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. **►** //**Paiements**// {{ Images_Cahier-101-08-429.png?600}} **Tableau de bord -> Payments ->** onglet **Payments**. On voit que la transaction a été enregistrée. **►** //**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)//. \\ {{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}} \\ {{Images_Cahier-101-03-006.png?25}} //**Rétablir les vraies valeurs des prix, des taux d'expédition et des autres paramètres.**// **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//.** \\ ===== 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. //Menu actuel// {{ Images_Cahier-101-08-432.png?800 }} //Menu souhaité// {{ Images_Cahier-101-08-433.png?800 }} \\ ==== Création du menu ==== **Tableau de bord WordPress -> Apparence -> Menus**. //**Nom du menu**// **-> Menu primaire -> Créer le menu**. |{{ Images_Cahier-101-08-434.png?400 }}| \\ === Éléments du menu === - Dans la colonne de gauche, sous //Liens personnalisés//, on clique l'icône triangulaire ▼ pour developper. - //**Adresse WEB**// **-> /** - //**Texte du lien**// **-> Accueil**. - **Ajouter au menu**. |{{ Images_Cahier-101-08-435.png?400 }}| \\ Sous// Pages//, on clique l'icône triangulaire ▼ pour developper. - **Afficher tout**. - On sélectionne les pages ci-contre. - **Ajouter au menu**. \\ \\ Sous //Terminaisons WooCommerce//, on clique l'icône triangulaire ▼ pour developper. - On coche **Commandes**. - **Ajouter au menu**. |{{ Images_Cahier-101-08-436.png?400 }}| |{{ Images_Cahier-101-08-437.png?400 }}| \\ - On organise l'ordre des éléments en les cliquant & glissant. - À la droite d'//**Afficher l'emplacement**//, on coche **Menu principal**. - **Enregistrer le menu**. |{{ Images_Cahier-101-08-438.png?400 }}| === Vérification === On se rend à la page d'accueil. //Voilà notre nouveau Menu.// {{ 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//. //Pied de page actuel.// {{ Images_Cahier-101-08-441.png?700 }} \\ //Pied de page désiré.// {{ Images_Cahier-101-08-442.png?700 }} \\ Code à ajouter au fichier ''wp-content/themes/storefront-enfant/footer.php'' pour la page //Conditions de vente//. Conditions de vente      Code à ajouter au fichier ''wp-content/themes/storefront-enfant/footer.php'' pour la page //Vie privée//. Vie privée On édite le fichier ''wp-content/themes/storefront-enfant/footer.php'', on y insère les lignes ci-dessus et on sauvegarde.

©                Conditions d'utilisation      Conditions de vente      Vie privée

Documentation GFDL & design GPL

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 === //Exemple de menu principal pour les explications ci-dessous.// {{ Images_Cahier-101-08-444.png?800 }} \\ Nous lançons le navigateur //Chrome// et nous nous rendons à notre page d'accueil. \\ Clac sur l'image d'en-tête **-> Inspecter**. |{{ Images_Cahier-101-08-445.png?400 }}| \\ Cliquer l'icône **Toggle device toolbar**. |{{ Images_Cahier-101-08-446.png?400 }}| Dérouler le menu et choisir **iPhone 6/7/8 Plus**. |{{ Images_Cahier-101-08-447.png?400 }}| \\ 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. |{{ Images_Cahier-101-08-448.png?400 }}| \\ 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//. 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. |{{ Images_Cahier-101-08-449.png?400 }}| |{{ Images_Cahier-101-08-450.png?400 }}| {{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 ==== Nous avons deux widgets de recherche; nous escamotons celui de l'en-tête //(en rouge)//. |{{ Images_Cahier-101-08-451.png?400 }}| \\ À l'aide de //WinSCP// et //NotePad++//, on ajoute le texte ci-dessous dans le fichier: ''wp-content/themes/storefront-enfant/functions.php'' juste __avant__ la dernière balise de fermeture ''?>'' de PHP. /* Enlever Rechercher dans l'en-tête du thème */ add_action( 'wp_enqueue_scripts', 'theme_name_parent_styles' ); add_action( 'init', 'jk_remove_storefront_header_search' ); function jk_remove_storefront_header_search() { remove_action( 'storefront_header', 'storefront_product_search', 40 ); } {{ Images_Cahier-101-08-452.png?600}} On sauvegarde le fichier et on quitte NotePad++. \\ === 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. \\ ==== 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// . /* COULEUR DE LA POLICE DU MENU - la couleur est mauve et en gras*/ .main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a { color: #96588a; font-weight: bold !important; } On remplace l'ancienne directive par celle ci-dessous qui: - 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. /* 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 */ } } {{ 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. === 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''. /* 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 */ } \\ {{ Images_Cahier-101-08-455.png?600}} Le menu et le Panier sont au même niveau. \\ **Notre site a tout ce qu'il faut pour nous lancer dans l'aventure du //Commerce en ligne//.** \\ ===== 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 ==== **Tableau de bord WordPress -> Mise à jour ->** on coche **Tout sélectionner -> Mise à jour des extensions**. |{{ Images_Cahier-101-08-456.png?400 }}| La mise à jour est terminée. On peut **afficher les détails**. |{{ Images_Cahier-101-08-457.png?400 }}| \\ {{ 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**. \\ {{ 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. \\ {{ 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**. \\ {{ Images_Cahier-101-08-461.png?600}} **Cliquez ici pour l'effectuer maintenant**. \\ {{ Images_Cahier-101-08-462.png?600}} **Rejeter** pour supprimer le message. \\ ==== 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. \\ ==== 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**. \\ {{ 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__)//. \\ === Mise à jour du Thème Storefront === {{Images_Cahier-101-08-466.png?400 }} \\ {{ Images_Cahier-101-08-467.png?600}} === Fichiers des courriels === \\ **Tableau de bord WordPress -> WooCommerce -> Réglages ->** onglet **E-mails -> Nouvelle commande -> Gérer**. **Supprimer le fichier modèle**. |{{ Images_Cahier-101-08-468.png?400 }}| **OK**. |{{ Images_Cahier-101-08-469.png?400 }}| **Copier le fichier dans le thème**. |{{ Images_Cahier-101-08-470.png?400 }}| 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//. \\ {{ 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. \\ \\ ===== 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é//. \\ ===== 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 ==== 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]]. {{Images_Cahier-101-08-474.png?100 }} \\ \\ {{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: E:\000_DocPourRF232_general\RF-232_NethServer\RF-232_Cours_NethServer-101_Cahier-08_WooC_Stripe_PayPal_2019-08-06_13h15.odt. Historique des modifications: ^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. \\ \\