[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"footer-db":22,"$fKnz2vuX4bZz1LbUTiuFsvSZ3e07l5_5fqNYp4Tzdhi8":42,"$fwkUe-5_iDlB4nTK0s4sDTbbP1lxFby1GRhYtJ60TW1o":122,"header-db":165,"megamenu":176,"$fqpg3CjNjsMv3mWbzD-0m25u0CDoucmJ0fNd5bZZswXM":231},{"theme":4},{"colors":5,"typography":13,"ui":17,"defaultColorMode":21},{"primary":6,"secondary":7,"background":8,"foreground":9,"muted":10,"headerBg":11,"footerBg":12,"topBarBg":9,"topBarText":11},"#4F46E5","#0D9488","#F9FAFB","#111827","#6B7280","#ffffff","#020617",{"fontFamily":14,"fontUrl":15,"baseFontSize":16},"Inter, system-ui, sans-serif","https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;0,800;0,900;1,400;1,700&display=swap","16px",{"borderRadius":18,"contentWidth":19,"shadow":20},"lg","7xl",true,"light",{"footer":23},{"theme":24,"description":25,"hours":25,"logo":26,"contact":30,"social":31,"bottomBar":41},"dark",null,{"src":27,"href":28,"alt":29},"\u002Flogo-ac.svg","\u002F","Alexandre Carette",{"email":25,"phone":25,"address":25,"cta":25},[32,35,38],{"platform":33,"href":34,"label":33},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Falexandre-carette\u002F",{"platform":36,"href":37,"label":36},"malt","https:\u002F\u002Fwww.malt.fr\u002Fprofile\u002Falexandrecarette",{"platform":39,"href":40,"label":39},"github","https:\u002F\u002Fgithub.com\u002Fprest4cafe",{"copyright":25},{"columns":43},[44,60,90,111],{"title":45,"links":46},"Plateforme",[47,51,54,57],{"label":48,"href":49,"external":50},"Offre Starter (2 500 €)","\u002Foffre-starter",false,{"label":52,"href":53,"external":50},"Devenir Ambassadeur","\u002Fambassadeur",{"label":55,"href":56,"external":50},"Modules PrestaShop","\u002Fmodules",{"label":58,"href":59,"external":20},"CodeMyShop.com","https:\u002F\u002Fcodemyshop.com",{"title":61,"links":62},"Le Synedre",[63,66,69,72,75,78,81,84,87],{"label":64,"href":65,"external":50},"L'histoire","\u002Fsynedre",{"label":67,"href":68,"external":50},"Constitution","\u002Fsynedre\u002Fconstitution",{"label":70,"href":71,"external":50},"L'équipe","\u002Fequipe",{"label":73,"href":74,"external":50},"Le réacteur en direct","\u002Freacteur",{"label":76,"href":77,"external":50},"Le Drill (entraînement)","\u002Fdrill",{"label":79,"href":80,"external":50},"Protocole de réunion","\u002Fsynedre\u002Freunion",{"label":82,"href":83,"external":50},"Les agents IA","\u002Fagents-ia",{"label":85,"href":86,"external":50},"La Conduite","\u002Fsynedre\u002Fconduite",{"label":88,"href":89,"external":50},"Charte plateforme","\u002Fsynedre\u002Fcharte",{"title":91,"links":92},"Ressources",[93,96,99,102,105,108],{"label":94,"href":95,"external":50},"Blog","\u002Fblog",{"label":97,"href":98,"external":50},"Academy","\u002Facademy",{"label":100,"href":101,"external":50},"Dictionnaire","\u002Fdictionnaire",{"label":103,"href":104,"external":50},"Expertise PrestaShop","\u002Fexpertise",{"label":106,"href":107,"external":50},"Flywheel","\u002Fflywheel",{"label":109,"href":110,"external":50},"Manifeste","\u002Fmanifeste",{"title":112,"links":113},"À propos",[114,116,119],{"label":29,"href":115,"external":50},"\u002Fa-propos",{"label":117,"href":118,"external":50},"Dossier de presse","\u002Fpresse",{"label":120,"href":121,"external":50},"Contact","\u002Fcontact",{"title":123,"slug":124,"metaDescription":125,"category":126,"tags":127,"difficulty":133,"psVersions":134,"content":137,"faq":138,"tldr":160,"readingTime":161,"generatedAt":162,"publishDate":162,"relatedArticles":163,"sourceCategory":164},"Intégrer Stripe à PrestaShop : résoudre les conflits JavaScript et checkout","integrer-stripe-prestashop-conflits-javascript-checkout","Guide complet pour intégrer Stripe à PrestaShop sans conflits JS. Résolution des problèmes de minification, compatibilité modules et checkout one-page.","paiement",[128,129,130,131,132,126],"stripe","javascript","checkout","minification","performance","intermediaire",[135,136],"1.7","8.x","\u003Ch2>Pourquoi l'intégration de Stripe peut poser problème sur PrestaShop\u003C\u002Fh2>\n\u003Cp>Stripe est devenu l'un des prestataires de paiement les plus populaires pour le e-commerce, et son intégration à PrestaShop est en théorie simple grâce aux modules disponibles. En pratique, les conflits JavaScript, les incompatibilités entre modules de checkout et les réglages de performance du back-office peuvent transformer cette intégration en véritable casse-tête.\u003C\u002Fp>\n\u003Cp>Après plus de dix ans d'interventions sur des boutiques PrestaShop, je constate que la majorité des échecs d'intégration Stripe ne viennent pas du module de paiement lui-même, mais de son environnement : un module de checkout tiers incompatible, une minification JS trop agressive ou un conflit de scripts mal diagnostiqué.\u003C\u002Fp>\n\u003Ch2>Identifier la source du problème : méthodologie de diagnostic\u003C\u002Fh2>\n\u003Ch3>Étape 1 — Désactiver la minification JavaScript\u003C\u002Fh3>\n\u003Cp>Le premier réflexe lorsque Stripe ne fonctionne pas sur votre tunnel de commande est de vérifier les réglages de performance. PrestaShop minifie et concatène les fichiers JavaScript par défaut en production, ce qui peut casser le SDK Stripe.\u003C\u002Fp>\n\u003Cp>Rendez-vous dans :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-\">\nBack-office → Paramètres avancés → Performance\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Dans la section \u003Cstrong>CCC (Combine, Compress, Cache)\u003C\u002Fstrong>, passez temporairement toutes les options à \u003Cstrong>Non\u003C\u002Fstrong> :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Concaténation CSS → Non\u003C\u002Fli>\n\u003Cli>Concaténation JavaScript → Non\u003C\u002Fli>\n\u003Cli>Minification CSS → Non\u003C\u002Fli>\n\u003Cli>Minification JavaScript → Non\u003C\u002Fli>\n\u003Cli>Compression Apache → Non\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Si Stripe fonctionne après cette manipulation, le problème vient de la minification. Dans ce cas, la solution pérenne consiste à exclure le script Stripe de la concaténation plutôt que de tout désactiver.\u003C\u002Fp>\n\u003Ch3>Sur PrestaShop 1.7\u003C\u002Fh3>\n\u003Cp>Dans votre module ou thème, enregistrez le script Stripe avec l'option \u003Ccode>server\u003C\u002Fcode> pour éviter qu'il soit concaténé :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">\n$this->context->controller->registerJavascript(\n    'stripe-sdk',\n    'https:\u002F\u002Fjs.stripe.com\u002Fv3\u002F',\n    [\n        'server' => 'remote',\n        'position' => 'head',\n        'priority' => 10\n    ]\n);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Sur PrestaShop 8.x\u003C\u002Fh3>\n\u003Cp>Le mécanisme est identique, mais vérifiez que votre module utilise bien la méthode \u003Ccode>registerJavascript\u003C\u002Fcode> et non l'ancien \u003Ccode>addJS()\u003C\u002Fcode> hérité de la version 1.6, qui ne gère pas correctement l'exclusion de la concaténation.\u003C\u002Fp>\n\u003Ch2>Le piège des modules de checkout one-page\u003C\u002Fh2>\n\u003Cp>Les modules de checkout alternatifs (SuperCheckout, One Page Checkout, The Checkout, etc.) remplacent le tunnel de commande natif par leur propre logique JavaScript. Or, les modules de paiement comme Stripe s'attendent à interagir avec le DOM standard de PrestaShop.\u003C\u002Fp>\n\u003Ch3>Vérifier la compatibilité\u003C\u002Fh3>\n\u003Cp>Avant toute investigation poussée, posez-vous cette question : \u003Cstrong>votre module de checkout est-il compatible avec votre version exacte de PrestaShop ?\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>Un module de checkout conçu pour PrestaShop 1.7.6 ne fonctionnera pas nécessairement sur la 1.7.8 ou la 8.x. Les hooks de paiement ont évolué, et un décalage de version peut provoquer des comportements imprévisibles : formulaire Stripe qui ne s'affiche pas, bouton de paiement inactif ou erreur JavaScript silencieuse.\u003C\u002Fp>\n\u003Ch3>Diagnostic concret\u003C\u002Fh3>\n\u003Col>\n\u003Cli>**Ouvrez la console du navigateur** (F12 → onglet Console) sur la page de paiement\u003C\u002Fli>\n\u003Cli>Recherchez les erreurs JavaScript, en particulier celles mentionnant `Stripe`, `stripe.js` ou `IntegrationError`\u003C\u002Fli>\n\u003Cli>**Désactivez temporairement** le module de checkout tiers pour revenir au tunnel natif\u003C\u002Fli>\n\u003Cli>Testez le paiement Stripe sur le tunnel natif\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Si Stripe fonctionne sur le tunnel natif mais pas avec votre module de checkout, vous avez identifié l'incompatibilité. Contactez le développeur du module de checkout pour obtenir un correctif ou une mise à jour.\u003C\u002Fp>\n\u003Ch2>Mettre à jour le module Stripe : la solution la plus simple\u003C\u002Fh2>\n\u003Cp>Cela paraît évident, mais une version obsolète du module Stripe est la cause numéro un des dysfonctionnements. Stripe fait évoluer régulièrement son API (passage de Charges à Payment Intents, puis à Checkout Sessions), et un module qui n'a pas été mis à jour depuis un an peut utiliser des endpoints dépréciés.\u003C\u002Fp>\n\u003Ch3>Procédure de mise à jour sécurisée\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-bash\">\n# 1. Sauvegardez le module actuel\ncp -r modules\u002Fstripe_official modules\u002Fstripe_official_backup\n\n# 2. Sauvegardez la base de données\nmysqldump -u root -p prestashop ps_stripe_* > stripe_backup.sql\n\n# 3. Installez la nouvelle version via le back-office\n#    Modules → Module Manager → Mettre à jour\n\n# 4. Videz le cache\nrm -rf var\u002Fcache\u002Fprod\u002F* var\u002Fcache\u002Fdev\u002F*\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Sur PrestaShop 8.x, privilégiez la mise à jour via l'interface d'administration ou Composer si le module le supporte :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">\ncomposer update prestashop\u002Fstripe_official\nphp bin\u002Fconsole cache:clear\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Optimiser les images : un faux problème fréquent\u003C\u002Fh2>\n\u003Cp>Il arrive que des marchands confondent un problème de performance globale (page lente, timeout) avec un problème Stripe. Si votre page de checkout met plus de 5 secondes à charger à cause d'images non optimisées, le SDK Stripe peut ne pas s'initialiser correctement avant que l'utilisateur interagisse.\u003C\u002Fp>\n\u003Ch3>Bonnes pratiques\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>Redimensionnez vos images produits aux dimensions exactes attendues par votre thème\u003C\u002Fli>\n\u003Cli>Utilisez le format **WebP** (supporté nativement depuis PrestaShop 8.0)\u003C\u002Fli>\n\u003Cli>Compressez avec des outils comme **Squoosh**, **TinyPNG** ou directement via un module PrestaShop d'optimisation d'images\u003C\u002Fli>\n\u003Cli>Activez le lazy loading pour les images hors écran\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Configuration Stripe recommandée pour PrestaShop 8.x\u003C\u002Fh2>\n\u003Cp>Voici les réglages que je recommande pour une intégration Stripe robuste :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-yaml\">\n# Configuration module Stripe\nMode: Production (après tests en Sandbox)\nCapture: Automatique (sauf besoin spécifique de capture manuelle)\nWebhooks: Activés et configurés (payment_intent.succeeded, charge.refunded)\n3D Secure: Toujours demander (conformité DSP2\u002FSCA)\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>N'oubliez pas de configurer le \u003Cstrong>webhook endpoint\u003C\u002Fstrong> dans votre dashboard Stripe :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-\">\nhttps:\u002F\u002Fvotre-boutique.com\u002Fmodule\u002Fstripe_official\u002Fwebhook\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Vérifiez que ce endpoint est accessible (pas bloqué par un WAF ou un \u003Ccode>.htaccess\u003C\u002Fcode> trop restrictif) en testant avec :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">\ncurl -I https:\u002F\u002Fvotre-boutique.com\u002Fmodule\u002Fstripe_official\u002Fwebhook\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Checklist de dépannage rapide\u003C\u002Fh2>\n\u003Ctr>\u003Cth>Symptôme\u003C\u002Fth>\u003Cth>Cause probable\u003C\u002Fth>\u003Cth>Solution\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>Formulaire Stripe invisible\u003C\u002Fth>\u003Cth>Conflit JS \u002F minification\u003C\u002Fth>\u003Cth>Désactiver CCC, vérifier console\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>Erreur 500 au paiement\u003C\u002Fth>\u003Cth>Module obsolète ou hook manquant\u003C\u002Fth>\u003Cth>Mettre à jour le module\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>Paiement accepté mais commande absente\u003C\u002Fth>\u003Cth>Webhook non configuré\u003C\u002Fth>\u003Cth>Vérifier endpoint webhook\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>Stripe OK en natif, KO avec checkout tiers\u003C\u002Fth>\u003Cth>Incompatibilité module\u003C\u002Fth>\u003Cth>Contacter le développeur du checkout\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>Page checkout trop lente\u003C\u002Fth>\u003Cth>Images non optimisées\u003C\u002Fth>\u003Cth>Compresser et redimensionner\u003C\u002Fth>\u003C\u002Ftr>",[139,142,145,148,151,154,157],{"q":140,"a":141},"Pourquoi le formulaire de paiement Stripe ne s'affiche pas sur ma boutique PrestaShop ?","Dans la majorité des cas, c'est un conflit JavaScript causé par la minification. Rendez-vous dans Paramètres avancés → Performance et désactivez temporairement la concaténation et la minification JS. Si le formulaire réapparaît, excluez le script Stripe de la concaténation plutôt que de tout désactiver.",{"q":143,"a":144},"Mon module de checkout one-page est-il compatible avec Stripe sur PrestaShop 8 ?","Pas nécessairement. Les modules de checkout tiers (SuperCheckout, One Page Checkout, etc.) remplacent le tunnel natif et peuvent entrer en conflit avec le SDK Stripe. Vérifiez que votre module de checkout est explicitement compatible avec votre version de PrestaShop et avec le module Stripe que vous utilisez. En cas de doute, testez sur le tunnel natif pour isoler le problème.",{"q":146,"a":147},"Comment mettre à jour le module Stripe sans perdre ma configuration ?","Sauvegardez d'abord le dossier du module et les tables SQL associées (ps_stripe_*). Ensuite, installez la mise à jour via le back-office ou Composer. La configuration est stockée en base de données et sera conservée. Pensez à vider le cache après la mise à jour.",{"q":149,"a":150},"Stripe est-il conforme à la DSP2 sur PrestaShop ?","Oui, à condition d'utiliser une version récente du module qui supporte le 3D Secure 2 (SCA). Les anciennes versions utilisant l'API Charges ne gèrent pas correctement l'authentification forte. Passez à Payment Intents et activez l'option 3D Secure systématique dans la configuration du module.",{"q":152,"a":153},"Les webhooks Stripe sont-ils indispensables sur PrestaShop ?","Absolument. Sans webhooks, PrestaShop ne sera pas notifié des événements asynchrones comme les remboursements, les litiges ou les paiements différés. Configurez au minimum les événements payment_intent.succeeded et charge.refunded dans votre dashboard Stripe, et vérifiez que l'URL du webhook est accessible publiquement.",{"q":155,"a":156},"Comment diagnostiquer une erreur Stripe en ligne de commande ?","Ouvrez la console du navigateur (F12) sur la page de paiement et filtrez par erreurs JavaScript. Côté serveur, consultez les logs PrestaShop dans var\u002Flogs\u002F et les logs Stripe dans votre dashboard. Pour tester la connectivité du webhook, utilisez curl -I suivi de l'URL du endpoint.",{"q":158,"a":159},"Peut-on utiliser Stripe et PayPal simultanément sur PrestaShop 8 ?","Oui, les deux modules de paiement coexistent sans problème sur le tunnel natif. En revanche, avec un module de checkout tiers, des conflits JavaScript peuvent survenir si les deux SDK tentent de s'injecter au même endroit. Testez toujours les deux moyens de paiement ensemble après toute modification du tunnel de commande.","Les problèmes d'intégration Stripe sur PrestaShop viennent rarement du module lui-même : la minification JavaScript, les modules de checkout tiers incompatibles et les versions obsolètes sont les trois causes principales à investiguer en priorité.",5,"2026-03-21T14:16:17.000Z",[],"PrestaShop pour les développeurs",{"header":166},{"logo":167,"topBar":170,"contactEmail":173,"features":174,"navBar":25},{"src":27,"alt":168,"text":29,"href":28,"class":169},"Alexandre Carette — Architecte E-commerce Souverain","h-10 w-10",{"message":25,"showLanguages":50,"align":171,"languages":172},"left",[],"contact@alexandrecarette.fr",{"showSearch":50,"showWishlist":50,"showLogin":20,"showContact":50,"showCart":50,"stickyHeader":20,"headerLayout":175},"inline",{"items":177},[178,186,192,198,206,214,219,225],{"id":179,"type":180,"label":181,"href":104,"icon":25,"description":25,"badge":25,"groupTitle":25,"style":25,"gridColumns":25,"cssClass":25,"psCategoryId":25,"showPsChildren":50,"position":183,"children":184,"psChildren":185},41,"link",{"fr":182},"Expertise",0,[],[],{"id":187,"type":180,"label":188,"href":95,"icon":25,"description":25,"badge":25,"groupTitle":25,"style":25,"gridColumns":25,"cssClass":25,"psCategoryId":25,"showPsChildren":50,"position":189,"children":190,"psChildren":191},42,{"fr":94},1,[],[],{"id":193,"type":180,"label":194,"href":56,"icon":25,"description":25,"badge":25,"groupTitle":25,"style":25,"gridColumns":25,"cssClass":25,"psCategoryId":25,"showPsChildren":50,"position":195,"children":196,"psChildren":197},43,{"fr":55},2,[],[],{"id":199,"type":180,"label":200,"href":202,"icon":25,"description":25,"badge":25,"groupTitle":25,"style":25,"gridColumns":25,"cssClass":25,"psCategoryId":25,"showPsChildren":50,"position":203,"children":204,"psChildren":205},44,{"fr":201},"Outils IA","\u002Foutils-ia",3,[],[],{"id":207,"type":180,"label":208,"href":49,"icon":25,"description":25,"badge":25,"groupTitle":25,"style":210,"gridColumns":25,"cssClass":25,"psCategoryId":25,"showPsChildren":50,"position":211,"children":212,"psChildren":213},45,{"fr":209},"Offre Starter ✨",{"highlight":20},4,[],[],{"id":215,"type":180,"label":216,"href":98,"icon":25,"description":25,"badge":25,"groupTitle":25,"style":25,"gridColumns":25,"cssClass":25,"psCategoryId":25,"showPsChildren":50,"position":161,"children":217,"psChildren":218},46,{"fr":97},[],[],{"id":220,"type":180,"label":221,"href":115,"icon":25,"description":25,"badge":25,"groupTitle":25,"style":25,"gridColumns":25,"cssClass":25,"psCategoryId":25,"showPsChildren":50,"position":222,"children":223,"psChildren":224},47,{"fr":112},6,[],[],{"id":226,"type":180,"label":227,"href":121,"icon":25,"description":25,"badge":25,"groupTitle":25,"style":25,"gridColumns":25,"cssClass":25,"psCategoryId":25,"showPsChildren":50,"position":228,"children":229,"psChildren":230},48,{"fr":120},7,[],[],{"academy":232,"blog":233,"expertise":244},[],[234,238,241],{"title":235,"url":236,"score":189,"type":237},"PrestaShop headless avec Nuxt 3 : pourquoi séparer back et front","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-separation-front-back","blog",{"title":239,"url":240,"score":189,"type":237},"PrestaShop headless : Nuxt 3, pas Next.js — le choix souverain","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-nextjs-souverainete",{"title":242,"url":243,"score":189,"type":237},"Sylius rachète PrestaShop : ce que ça change pour vous","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fsylius-rachat-prestashop-headless-souverainete",[]]