> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Les boutons de paiement express ne sont pas cliquables dans Upcart

> Cet article explique comment résoudre les problèmes des boutons de paiement express Shopify lorsqu'ils ne fonctionnent pas dans Upcart

⚠️ **Avis important**

L'extrait de thème ci-dessous s'applique aux deux versions des modules de panier Upcart — il fait en sorte que Shopify affiche les boutons de paiement accéléré sur la page, ce dont Upcart a besoin quelle que soit la version du module.

Le sélecteur `.additional-checkout-buttons` ci-dessous est la classe propre à Shopify sur le conteneur de paiement accéléré, et non une classe de module Upcart, il est donc identique sur l'une ou l'autre version du panier.

<div id="overview">
  ## Aperçu
</div>

Il arrive que les boutons de paiement express ne soient pas cliquables ou n'apparaissent pas dans Upcart. C'est un problème courant causé par la façon dont **Shopify contrôle le rendu des boutons de paiement express** dans les thèmes.

Ce guide explique pourquoi cela se produit et ce que vous pouvez faire pour y remédier.

***

<div id="required-setup-for-the-new-module">
  ## Configuration requise pour le nouveau module
</div>

⚠️ **Important :** Ces étapes s'appliquent au **nouveau module Express Payments** d'Upcart, et non à la version héritée.

Pour que les boutons de paiement express fonctionnent correctement dans Upcart, vous devez ajouter un petit extrait de code à votre thème Shopify. Sans cet extrait, Shopify ne chargera pas correctement les boutons de paiement dans le tiroir de panier. Avant d'effectuer ces modifications, vérifiez que les méthodes de paiement pertinentes (par ex. Shop Pay, PayPal, Apple Pay, Google Pay) sont activées dans les paramètres de votre compte Shopify Admin. Sans l'activation de ces méthodes, les boutons ne seront pas visibles. De plus, assurez-vous que l'extrait est placé directement sous la balise d'ouverture `<body>` dans votre fichier de thème (par ex. `<body class="...">`). S'il est mal placé, par exemple après la balise de fermeture `</body>`, les boutons de paiement express risquent de ne pas fonctionner correctement.

***

<div id="how-to-fix">
  ## Comment corriger
</div>

1. Allez dans votre **interface administrateur Shopify**.
2. Naviguez vers **Online Store > Themes > Edit Code**.
3. Ouvrez **layout/theme.liquid**, trouvez la ligne `<body>` et ajoutez l'extrait ci-dessous sur une nouvelle ligne directement en dessous. Il doit être placé là — pas dans `cart-drawer.liquid` ni ailleurs — car les boutons doivent exister sur chaque page où le panier peut s'ouvrir.

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
{% if additional_checkout_buttons %} <div style="display: none !important">     {{ content_for_additional_checkout_buttons }} </div> {% endif %}
```

1. Enregistrez vos modifications et actualisez votre boutique en ligne.
2. Rouvrez le tiroir de panier pour vérifier que les boutons de paiement express (tels que Shop Pay, PayPal, Apple Pay ou Google Pay) apparaissent désormais et sont cliquables.

Consultez le **guide du** [**module Express Payments**](/fr/upcart/express_payments_module) pour les instructions de configuration complètes.

***

<div id="why-this-happens">
  ## Pourquoi cela se produit
</div>

Les boutons de paiement express sont entièrement gérés par **Shopify**, et non par Upcart. Cela signifie que :

* Upcart n'affiche pas ses propres boutons. Il **clone les boutons de paiement accéléré de Shopify** depuis la page vers le tiroir de panier, c'est pourquoi ils doivent être présents sur la page en premier lieu — c'est ce que garantit l'extrait de thème ci-dessus.
* **Apple Pay** ne s'affichera que sur les appareils Apple où Apple Pay est configuré.
* Upcart ne contrôle pas quels boutons express apparaissent, car le contenu et la fonctionnalité sont gérés par Shopify.

🎨 **Remarque :**\
Les boutons dans Upcart agissent comme des conteneurs visuels, tandis que Shopify contrôle leur affichage et leur comportement. Upcart ne peut pas modifier leur apparence ou leur fonctionnement.

***

<div id="common-problems-and-fixes">
  ## Problèmes courants et solutions
</div>

<div id="1-the-buttons-arent-rendered-on-the-page">
  ## 1. Les boutons ne sont pas affichés sur la page
</div>

C'est la cause la plus fréquente. Upcart clone les boutons de Shopify depuis la page, donc si la page ne les affiche pas, il n'y a rien à cloner et le panier affiche un espace vide.

**Que faire :**

* Ajoutez l'extrait de thème de la section **Comment corriger** ci-dessus, directement sous la ligne `<body>` dans `layout/theme.liquid`.

<Warning>
  **Ne supprimez pas les boutons express de votre thème pour « éviter un conflit ».** Upcart dépend de leur présence. Les supprimer du thème, ou les désactiver dans les paramètres du thème, supprime la source depuis laquelle Upcart les clone — ce qui aggrave ce problème au lieu de l'améliorer.
</Warning>

***

<div id="3-css-is-blocking-the-buttons">
  ## 3. Le CSS bloque les boutons
</div>

Certains thèmes masquent les boutons express par défaut à l'aide de CSS. Par exemple :

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.additional-checkout-buttons {   display: none !important; }
```

**Que faire :**

* Vérifiez le CSS de votre thème.
* Demandez au développeur de votre thème de s'assurer qu'aucune règle CSS ne masque ni ne désactive les boutons dans le tiroir Upcart.

***

<div id="4-legacy-settings-are-interfering">
  ## 4. Des paramètres hérités interfèrent
</div>

Si vous avez utilisé l'ancienne version du module Express Payments, des paramètres enregistrés peuvent entrer en conflit avec la nouvelle configuration.

**Que faire :**

* Ouvrez l'ancien module Express Payments (s'il est encore visible).
* Décochez toutes les options précédentes et enregistrez.
* Testez à nouveau en utilisant le nouveau module.

***

<div id="still-having-issues">
  ## Vous rencontrez toujours des problèmes ?
</div>

<div id="disable-shadow-dom-in-upcart">
  ## Désactiver le Shadow DOM dans Upcart
</div>

Dans certains cas, les boutons de paiement express peuvent ne pas se charger ou se mettre à jour parce que le **Shadow DOM** est activé dans Upcart.

**Qu'est-ce que le Shadow DOM ?**\
Le Shadow DOM isole Upcart du reste du code de votre boutique afin d'améliorer la stabilité. Cependant, dans de rares cas, cette séparation peut empêcher les boutons express de Shopify de se mettre à jour correctement.

**Comment désactiver le Shadow DOM :**

1. Allez dans **Upcart > Cart Editor > Settings > Cart settings**, puis développez **Advanced Settings**.
2. Décochez **Render Cart in Shadow DOM**.
3. Enregistrez et testez à nouveau.

⚠️ **Important :**\
Testez toujours votre panier après avoir désactivé le Shadow DOM, car cela peut affecter la façon dont d'autres applications ou éléments du thème interagissent avec Upcart.

💡 **Remarque :** Désactiver le Shadow DOM peut résoudre ce problème mais peut introduire des conflits CSS avec votre thème. Consultez la documentation sur le [paramètre Shadow DOM](/fr/upcart/render_cart_in_shadow_dom_setting) pour connaître le compromis complet.

***

<div id="need-more-help">
  ## Besoin d'aide supplémentaire ?
</div>

Si le problème persiste après avoir suivi ces étapes :

* Contactez le **développeur de votre thème** pour vous aider à supprimer le code ou les paramètres en conflit.
* Vous pouvez également contacter un [**Shopify Expert**](https://www.shopify.com/partners/directory) pour des modifications de thème avancées ou une assistance à l'intégration.

***

<div id="references">
  ## Références
</div>

* Aide Shopify – Paiements accélérés
* Documentation développeur Shopify – Boutons de paiement express
