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

# Bloc Checkout button

> Le bloc Checkout button de l'Aftersell Cart : le CTA obligatoire du pied de page qui envoie les acheteurs vers le paiement.

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

<div id="behavior">
  ## Comportement
</div>

* 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`](/fr/aftersell/cart/sdk-events) du SDK, auquel vous pouvez vous abonner.

<div id="settings">
  ## Paramètres
</div>

| Paramètre                               | Ce qu'il contrôle                                                                      | Par défaut                   |
| --------------------------------------- | -------------------------------------------------------------------------------------- | ---------------------------- |
| **Button label**                        | Libellé en texte brut saisi dans une zone de texte. Prend en charge `{{total_price}}`. | `Checkout • {{total_price}}` |
| **Go to cart page instead of checkout** | Envoie les acheteurs vers votre page `/cart` au lieu du checkout directement.          | Désactivé                    |

<div id="placement-and-limits">
  ## Placement et limites
</div>

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

<div id="custom-template">
  ## Modèle personnalisé
</div>

Prend en charge un [modèle personnalisé](/fr/aftersell/cart/custom-templates) depuis son onglet Code, qui remplace le rendu intégré de ce bloc par votre JSX. Voici les props qu'il reçoit.

| Prop        | Type                  | À quoi elle sert                                                                                                                         |
| ----------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `label`     | `string`              | Le libellé du bouton en HTML assaini, avec `{{total_price}}` résolu.                                                                     |
| `href`      | `string \| undefined` | L'URL de paiement. `undefined` dans l'aperçu de l'éditeur, où il n'y a rien vers quoi naviguer.                                          |
| `isLoading` | `boolean`             | Toujours `false` ici : le bloc affiche son squelette intégré pendant le chargement et n'appelle votre modèle qu'une fois le panier prêt. |

<Warning>
  **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`](/fr/aftersell/cart/sdk-events#checkout) du SDK et enregistre la conversion pour les [analyses du panier](/fr/aftersell/cart/analytics). 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](/fr/aftersell/cart/design-settings) ou le [CSS personnalisé](/fr/aftersell/cart/custom-css), sauf si vous avez vraiment besoin d'un balisage différent.
</Warning>

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.

<div id="design">
  ## Design
</div>

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](/fr/aftersell/cart/design-settings).