# Checkout Simple & Élégant (dfsimplecheckout) — Guide complet > Présentation DataFirefly Simple Checkout remplace le checkout 5 étapes natif de PrestaShop par un tunnel d'achat one-page moderne, inspiré des checkouts Shopify et Stripe. Le module monte son contrôleur au… - Page: - Langue: fr - Mis à jour le: 2026-07-02 - Autres langues: [en](https://www.datafirefly.com/en/documentation/dfsimplecheckout/index.md), [es](https://www.datafirefly.com/es/documentation/dfsimplecheckout/index.md), [de](https://www.datafirefly.com/de/documentation/dfsimplecheckout/index.md), [it](https://www.datafirefly.com/it/documentation/dfsimplecheckout/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfsimplecheckout/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfsimplecheckout/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfsimplecheckout/index.md) - Index: ## Présentation DataFirefly Simple Checkout remplace le checkout 5 étapes natif de PrestaShop par un tunnel d'achat one-page moderne, inspiré des checkouts Shopify et Stripe. Le module monte son contrôleur au runtime via le hook `actionDispatcher` — aucun fichier override n'est écrit sur disque, et vos overrides tiers existants sur `OrderController` sont hérités proprement. Fonctionnalités principales : layout deux colonnes avec récapitulatif permanent, connexion sociale Google et Facebook, auto-complétion d'adresse Google Places, formulaire d'adresse adaptatif par pays, code promo AJAX, trois couleurs personnalisables, mode distraction-free. ## Installation 1. Dans votre back-office PrestaShop, allez dans **Modules → Gestionnaire de modules → Installer un module**. 2. Sélectionnez le fichier `dfsimplecheckout.zip` téléchargé depuis votre compte DataFirefly. 3. Cliquez sur **Installer** puis sur **Configurer**. 4. Videz le cache PrestaShop (**Paramètres avancés → Performance → Vider le cache**). 5. Visitez la page `/order` de votre boutique avec un produit au panier : le nouveau checkout s'affiche immédiatement. Le module est compatible PrestaShop 8.0 → 9.x. Aucune modification de thème n'est requise. La désinstallation restaure automatiquement le checkout natif. ## Configuration générale ### Couleurs Trois couleurs sont configurables dans l'onglet réglages du module : - **Couleur principale** — boutons, liens, états actifs, radios sélectionnées (défaut `#1a73e8`). - **Couleur hover des boutons** — état survol des boutons primaires « Continuer », « Commander » (défaut `#1559b8`). - **Couleur accent / succès** — indicateurs d'étape complétée, pill de code promo appliqué, label « Gratuit » du transporteur, messages de succès (défaut `#008060`). Les trois valeurs sont injectées comme variables CSS (`--dfsc-primary`, `--dfsc-primary-hover`, `--dfsc-success`) et validées par regex hexadécimal strict. ### Logo Renseignez l'URL d'un logo personnalisé pour l'en-tête du checkout ; à défaut, le logo de la boutique est utilisé. Dimensions rendues : 190×42 px maximum. ### Mode distraction-free L'option **Masquer le header et le footer du thème** (activée par défaut) supprime l'en-tête complet du thème (menu, recherche, panier) et son pied de page sur la page `/order` uniquement. L'implémentation surcharge les blocs Smarty `header` et `footer` dans notre template : sur un thème qui n'utilise pas ces blocs standards, l'option est simplement sans effet — jamais de page blanche. ### Autres options - Champ note vendeur (on/off) - Champ code promo (on/off) - Badges de confiance — HTML libre affiché sous le récapitulatif - Liens légaux en pied de checkout (CGV, confidentialité, retours — détectés via les rôles CMS natifs) ## Connexion sociale Google ### Créer les identifiants 1. Rendez-vous sur [Google Cloud Console](https://console.cloud.google.com/) et créez (ou sélectionnez) un projet. 2. Dans **APIs & Services → Credentials**, créez un **OAuth client ID** de type **Web application**. 3. Dans **Authorized JavaScript origins**, ajoutez l'URL de votre boutique (ex. `https://www.maboutique.fr`) — sans chemin, avec le protocole https. 4. Copiez le **Client ID** généré (se termine par `.apps.googleusercontent.com`). ### Configurer le module 1. Dans les réglages du module, activez **Google Sign-In** et collez le Client ID. 2. Enregistrez puis videz le cache. 3. Sur `/order`, le bouton Google apparaît au-dessus des onglets « Je suis un nouveau client / J'ai déjà un compte ». Le flux : le client clique, sélectionne son compte Google, le module reçoit un jeton JWT qu'il valide côté serveur via le endpoint officiel `tokeninfo` (vérification de l'audience, de l'émetteur, de l'expiration et de l'email vérifié). Si un compte client existe avec cet email, il est connecté ; sinon un compte est créé automatiquement avec le nom et prénom du profil Google. ## Connexion sociale Facebook ### Créer l'application 1. Sur [Meta for Developers](https://developers.facebook.com/), créez une application de type **Consumer**. 2. Ajoutez le produit **Facebook Login** et déclarez votre domaine dans les paramètres. 3. Récupérez l'**App ID** et l'**App Secret** dans **Settings → Basic**. ### Configurer le module Activez **Facebook Login** dans les réglages, collez App ID et App Secret, enregistrez. La validation serveur est en deux étapes : `debug_token` (vérifie que le jeton appartient bien à votre application) puis récupération du profil avec signature `appsecret_proof` (HMAC-SHA256). L'App Secret ne quitte jamais votre serveur. ## Auto-complétion d'adresse Google Places 1. Dans Google Cloud Console, activez les APIs **Places API** et **Maps JavaScript API**. 2. Créez une clé API et restreignez-la à votre domaine (recommandé). 3. Dans le module, activez **Auto-complétion d'adresse** et collez la clé. Le champ « Adresse » du formulaire propose alors des suggestions pendant la frappe. La sélection d'une suggestion pré-remplit rue, complément, ville, code postal, pays et région le cas échéant. Les suggestions sont limitées aux pays actifs de votre boutique (jusqu'à 5 pays — limite de l'API Google). L'API Places est facturée par Google au-delà du quota gratuit mensuel. Pour une boutique française à volume modéré, le quota gratuit est généralement suffisant. ## Formulaire d'adresse adaptatif par pays Le formulaire d'adresse s'adapte automatiquement au pays sélectionné : - Le pays par défaut du dropdown est celui configuré dans **International → Localisation** de votre back-office (et non le premier pays alphabétique). - Le champ **État/Région** n'apparaît que pour les pays qui en comportent (USA, Espagne, Italie…) et son dropdown liste uniquement les régions actives du pays sélectionné. - Le champ **DNI** apparaît pour les pays qui l'exigent (Espagne). - La validation du code postal utilise le format du pays. - Au changement de pays, la page se recharge avec le formulaire restructuré pour le nouveau pays. ### Édition d'adresse Chaque adresse enregistrée affiche une icône crayon. Le clic ouvre le formulaire inline pré-rempli avec toutes les valeurs de l'adresse (chargées côté serveur avec contrôle de propriété — un client ne peut jamais consulter l'adresse d'un autre). La sauvegarde met à jour l'adresse existante, sans créer de doublon. ## Code promo Le champ code promo (activable) fonctionne en AJAX : application et suppression sans rechargement, mise à jour instantanée du récapitulatif. Les opérations sont déléguées au contrôleur natif `CartController` de PrestaShop, donc toutes les règles panier (dates, montant minimum, restrictions transporteur, cumul) sont respectées à l'identique. Les messages d'erreur natifs (« Ce code a expiré », « Montant minimum non atteint »…) sont restitués tels quels. ## Compatibilité transporteurs et Colissimo Le contenu extra des transporteurs (carte de points relais Colissimo, widget Mondial Relay…) est rendu via `{$carrier.extraContent}` comme dans le template natif. Pour Colissimo Points Relais, le module injecte automatiquement les informations du point sélectionné (identifiant, téléphone mobile) dans les requêtes de validation, ce qui élimine le faux message « Veuillez sélectionner un point de retrait » que le module Colissimo pouvait afficher sur les checkouts one-page. ## Hooks développeur - `displayDfsimplecheckoutExpress` — slot en haut du checkout pour les paiements express (Apple Pay, Google Pay, PayPal Express). - `displayDfsimplecheckoutSidebarTop` / `displayDfsimplecheckoutSidebarBottom` — zones d'injection dans la colonne récapitulatif. - `actionDfscSocialLogin` — déclenché après une connexion sociale réussie, avec les paramètres `customer` et `dfsc_social_provider` (`google` ou `facebook`). Utile pour du tagging CRM. ## Dépannage ### Le bouton Google ne s'affiche pas - Vérifiez que le Client ID est bien renseigné et l'option activée. - Vérifiez dans la console navigateur qu'il n'y a pas d'erreur « origin not allowed » — dans ce cas, ajoutez l'URL exacte de votre boutique (avec https, sans slash final) dans les Authorized JavaScript origins de Google Cloud Console. ### La connexion sociale ne persiste pas Videz le cache PrestaShop et le cache navigateur. Si le problème persiste, vérifiez qu'aucun module de sécurité tiers n'invalide les cookies de session après login. ### Le champ État affiche les mauvaises régions Assurez-vous d'utiliser la version 1.2.20 ou supérieure du module, qui résout la structure du formulaire côté serveur pour chaque pays. ### Page blanche sur /order Activez le mode debug PrestaShop (`_PS_MODE_DEV_`) pour afficher l'erreur, ou consultez `var/logs`. Vérifiez qu'aucun autre module de checkout one-page n'est actif simultanément. ## Désinstallation Désinstallez le module depuis le Gestionnaire de modules. L'environnement runtime est libéré immédiatement et le checkout natif 5 étapes est restauré. Aucun fichier résiduel, aucune donnée orpheline.