# Étendre le bloc Paiement WooCommerce avec un slot et l’Interactivity API

> Tutoriel pas à pas pour ajouter un emplacement personnalisé au bloc Paiement stable de WooCommerce en s'appuyant sur l'Interactivity API de WordPress 6.5.

- Auteur : Clément Hadrot
- Publié le : 2024-01-16
- Mis à jour le : 2024-01-16
- Catégorie : E-commerce
- URL : https://wpmoderne.dev.wordpress-developpement.fr/ecommerce/etendre-bloc-paiement-woocommerce-slot-interactivity-api/

## L’essentiel

- Un slot enregistré côté serveur et rempli côté client
- Un store d'interactivité isolé du reste du thème
- Zéro jQuery dans toute la personnalisation

Depuis que le bloc Paiement de WooCommerce est passé en stable, personnaliser le tunnel de commande ne se fait plus en surchargeant un template PHP mais en peuplant des emplacements dédiés, les *slots*, exposés par le bloc lui-même. Ce tutoriel construit un cas concret : une case à cocher facultative « Ajouter un emballage cadeau », affichée juste avant le récapitulatif de commande, dont l'état conditionne l'affichage d'un champ de message.

L'Interactivity API, arrivée avec WordPress 6.5, est le complément naturel de cette architecture par blocs : elle permet de gérer l'état d'une interface directement en HTML annoté par des directives, sans écrire de composant React à la main ni charger de bibliothèque supplémentaire. C'est cette approche que nous allons suivre plutôt qu'un enregistrement classique via `@wordpress/element`.

## Étape 1 : déclarer le bloc et son point de montage

La personnalisation prend la forme d'un petit plugin dédié, indépendant du thème, ce qui garantit qu'elle survivra à un futur changement d'habillage graphique. On commence par enregistrer un bloc simple destiné à occuper le slot `woocommerce/checkout-additional-information-block`, l'un des emplacements exposés par défaut dans le flux du paiement :

> L'essentiel à retenir : Un slot enregistré côté serveur et rempli côté client ; Un store d'interactivité isolé du reste du thème ; Zéro jQuery dans toute la personnalisation