Intégrer Stripe à PrestaShop : résoudre les conflits JavaScript et checkout

Pourquoi l'intégration de Stripe peut poser problème sur PrestaShop

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.

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é.

Identifier la source du problème : méthodologie de diagnostic

Étape 1 — Désactiver la minification JavaScript

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.

Rendez-vous dans :

Back-office → Paramètres avancés → Performance

Dans la section CCC (Combine, Compress, Cache), passez temporairement toutes les options à Non :

• Concaténation CSS → Non
• Concaténation JavaScript → Non
• Minification CSS → Non
• Minification JavaScript → Non
• Compression Apache → Non

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.

Sur PrestaShop 1.7

Dans votre module ou thème, enregistrez le script Stripe avec l'option server pour éviter qu'il soit concaténé :

$this->context->controller->registerJavascript(
    'stripe-sdk',
    'https://js.stripe.com/v3/',
    [
        'server' => 'remote',
        'position' => 'head',
        'priority' => 10
    ]
);

Sur PrestaShop 8.x

Le mécanisme est identique, mais vérifiez que votre module utilise bien la méthode registerJavascript et non l'ancien addJS() hérité de la version 1.6, qui ne gère pas correctement l'exclusion de la concaténation.

Le piège des modules de checkout one-page

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.

Vérifier la compatibilité

Avant toute investigation poussée, posez-vous cette question : votre module de checkout est-il compatible avec votre version exacte de PrestaShop ?

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.

Diagnostic concret

1. **Ouvrez la console du navigateur** (F12 → onglet Console) sur la page de paiement
2. Recherchez les erreurs JavaScript, en particulier celles mentionnant `Stripe`, `stripe.js` ou `IntegrationError`
3. **Désactivez temporairement** le module de checkout tiers pour revenir au tunnel natif
4. Testez le paiement Stripe sur le tunnel natif

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.

Mettre à jour le module Stripe : la solution la plus simple

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.

Procédure de mise à jour sécurisée

# 1. Sauvegardez le module actuel
cp -r modules/stripe_official modules/stripe_official_backup

# 2. Sauvegardez la base de données
mysqldump -u root -p prestashop ps_stripe_* > stripe_backup.sql

# 3. Installez la nouvelle version via le back-office
#    Modules → Module Manager → Mettre à jour

# 4. Videz le cache
rm -rf var/cache/prod/* var/cache/dev/*

Sur PrestaShop 8.x, privilégiez la mise à jour via l'interface d'administration ou Composer si le module le supporte :

composer update prestashop/stripe_official
php bin/console cache:clear

Optimiser les images : un faux problème fréquent

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.

Bonnes pratiques

• Redimensionnez vos images produits aux dimensions exactes attendues par votre thème
• Utilisez le format **WebP** (supporté nativement depuis PrestaShop 8.0)
• Compressez avec des outils comme **Squoosh**, **TinyPNG** ou directement via un module PrestaShop d'optimisation d'images
• Activez le lazy loading pour les images hors écran

Configuration Stripe recommandée pour PrestaShop 8.x

Voici les réglages que je recommande pour une intégration Stripe robuste :

# Configuration module Stripe
Mode: Production (après tests en Sandbox)
Capture: Automatique (sauf besoin spécifique de capture manuelle)
Webhooks: Activés et configurés (payment_intent.succeeded, charge.refunded)
3D Secure: Toujours demander (conformité DSP2/SCA)

N'oubliez pas de configurer le webhook endpoint dans votre dashboard Stripe :

https://votre-boutique.com/module/stripe_official/webhook

Vérifiez que ce endpoint est accessible (pas bloqué par un WAF ou un .htaccess trop restrictif) en testant avec :

curl -I https://votre-boutique.com/module/stripe_official/webhook

Checklist de dépannage rapide

SymptômeCause probableSolution Formulaire Stripe invisibleConflit JS / minificationDésactiver CCC, vérifier console Erreur 500 au paiementModule obsolète ou hook manquantMettre à jour le module Paiement accepté mais commande absenteWebhook non configuréVérifier endpoint webhook Stripe OK en natif, KO avec checkout tiersIncompatibilité moduleContacter le développeur du checkout Page checkout trop lenteImages non optimiséesCompresser et redimensionner