Skip to main content
Le bloc Checkout button est l’appel à l’action principal du pied de page du panier qui emmène les acheteurs vers le paiement, leur offrant un chemin clair et bien visible du panier vers le checkout. C’est un bloc obligatoire.

​
Comportement

  • Le bouton résout une URL de paiement localisée et adaptée au marché, de sorte que les acheteurs arrivent dans le checkout du bon marché. Si celle-ci ne peut pas être résolue, il revient au lien /checkout standard.
  • Avec Go to cart page instead of checkout activé, le bouton renvoie vers /cart à la place.
  • Le clic navigue via JavaScript afin que la gestion de panier propre au thème ne puisse pas l’intercepter, tout en respectant les intentions d’ouverture dans un nouvel onglet (Cmd/Ctrl-clic, clic molette).
  • Le clic émet l’événement checkout du SDK, auquel vous pouvez vous abonner.

​
Paramètres

​
Placement et limites

  • Région : bas.
  • Maximum : 1 par état de panier.
  • État : panier rempli uniquement.
  • Verrouillé et ajouté par défaut. Le Checkout button ne peut être ni supprimé ni masqué, seulement repositionné dans le pied de page.

​
Modèle personnalisé

Prend en charge un modèle personnalisé depuis son onglet Code, qui remplace le rendu intégré de ce bloc par votre JSX. Voici les props qu’il reçoit.
Un bouton de paiement personnalisé perd le suivi du checkout. Le bouton intégré attache un gestionnaire de clic qui émet l’événement checkout du SDK et enregistre la conversion pour les analyses du panier. Ce gestionnaire n’est pas transmis aux modèles personnalisés, donc naviguer via href seul contourne les deux.Si vous avez besoin de l’événement, émettez-le vous-même depuis un onClick avant la navigation. Le reporting d’attribution ne peut toujours pas être récupéré de cette façon, alors préférez restyliser le bouton intégré avec les paramètres de design ou le CSS personnalisé, sauf si vous avez vraiment besoin d’un balisage différent.
Affichez href tel quel plutôt que de lui donner une valeur par défaut. Un <a> sans href est inerte, ce qui est le comportement correct dans l’éditeur.

​
Design

Stylisez ce bloc avec sa section Design dans le panneau de paramètres. Il s’agit de remplacements par bloc qui se superposent à votre design global et y reviennent lorsqu’ils sont vides. Que sont les paramètres de design ? En savoir plus ici : Paramètres de design.