Ajoutez une case à cocher sous le bouton de paiement et empêchez le client de continuer tant qu’il ne l’a pas cochée. Utile pour l’acceptation des conditions, les contrôles d’âge et les confirmations de fabrication sur commande.
L’événement checkout ne peut pas annuler le paiement. Il se déclenche comme une notification juste avant que le navigateur ne navigue, donc renvoyer false ou appeler preventDefault ne fait rien. La seule façon de conditionner le paiement est d’empêcher le bouton de répondre aux clics avant qu’il ne soit pressé, ce que montre cette page.Considérez cela comme un frein d’interface, pas comme une garantie juridique. Un client déterminé peut toujours atteindre le paiement directement.
- Un bloc de code personnalisé sous le bouton de paiement affiche la case à cocher.
- Tant que la case n’est pas cochée, le bloc ajoute une classe aux boutons de paiement et de paiement express du panier via le shadow root.
- Le CSS personnalisé fait en sorte que cette classe désactive les clics.
Étape 1 : Ajouter le bloc de case à cocher
props.cart est importante : elle réapplique la classe après un nouveau rendu du panier, qui l’effacerait sinon.
Dans Cart settings → Custom CSS :
pointer-events: none est ce qui bloque réellement le clic ; l’opacité montre simplement au client pourquoi.
Dans l’aperçu, confirmez que :
- Le bouton de paiement est grisé et ne répond pas aux clics au chargement.
- Cocher la case l’active ; la décocher désactive à nouveau le bouton.
- Les boutons de paiement express sont également conditionnés.
- Ajouter ou retirer un article ne réactive pas le bouton tant que la case n’est pas cochée.
Ce dernier point est l’échec le plus courant. Si le bouton se réactive après un changement du panier, l’effet ne se réexécute pas. Vérifiez que props.cart figure dans le tableau de dépendances.
La case à cocher est un état limité au navigateur ; elle n’atteint jamais la commande. Pour enregistrer l’acceptation, apposez-la sur chaque ligne comme propriété au moment de l’ajout au panier :
Ajoutez ceci à votre formulaire produit dans le thème. Shopify lit properties[...] directement depuis le formulaire, donc la valeur parvient à la commande quel que soit celui qui effectue l’ajout : Aftersell, le thème ou une autre application.
Une propriété préfixée par _ reste invisible sur la ligne côté acheteur mais atteint quand même Shopify, elle apparaît donc sur la commande. Cela enregistre quelle version des conditions était en vigueur, pas que le client a coché la case.
- Ne ciblez que les classes
cart-external-*. Les jumelles cart-internal-* sont la tuyauterie interne du panier, pas une prise pour votre code. Voir CSS personnalisé.
- Vérifiez que
shadowRoot existe avant de l’utiliser. Il vaut undefined jusqu’au démarrage du panier.
- Le bloc n’affiche rien tant que le panier n’est pas chargé, donc le bouton de paiement n’est jamais brièvement actif avant l’application du verrou.
- Un bloc React qui lève une exception n’affiche rien et le reste du panier continue, ce qui signifie ici un bouton de paiement non protégé. Testez dans l’aperçu avant de publier.
