Le WordPress d'aujourd'hui, décodé pour les développeurs

Blocs Gutenberg

Un bloc de don Stripe pour une association : Elements sans WooCommerce

Retour sur un bloc dynamique intégrant Stripe Elements pour collecter des dons, sans installer WooCommerce ni sa complexité de boutique en ligne.

Par WordPress Développement • 30 septembre 2026 • 4 min de lecture • Aucun commentaire
Un bloc de don Stripe pour une association : Elements sans WooCommerce

150 euros de licence annuelle pour une extension de dons, quand l’association ne collecte que quelques centaines d’euros par mois : le calcul ne tient pas. Le besoin réel tient en une phrase — un formulaire, un montant libre, un paiement carte sécurisé, un reçu envoyé par e-mail. Stripe Elements couvre la partie paiement ; un bloc Gutenberg dynamique couvre le reste, sans installer WooCommerce pour une seule transaction par-ci par-là.

Ce choix demande un peu plus de code au départ qu’une extension clé en main, mais il donne un contrôle total sur ce qui est affiché, ce qui est stocké, et ce qui ne l’est pas — un point qui compte particulièrement pour une structure associative soumise à des obligations de transparence financière.

Ce que Stripe Elements apporte par rapport à un simple lien de paiement

Un lien Stripe Checkout externe fonctionne, mais il sort le visiteur du site : perte de cohérence visuelle, parfois perte de conversion. Stripe Elements, à l’inverse, s’intègre directement dans la page : le champ carte bancaire est un composant JavaScript fourni par Stripe, rendu dans un conteneur du bloc, avec une tokenisation qui ne fait jamais transiter le numéro de carte par le serveur WordPress.

C’est un point de conformité PCI-DSS important : le serveur WordPress ne voit jamais la carte en clair, seulement un identifiant de paiement (PaymentIntent) créé côté Stripe.

Structure du bloc et attributs

Le bloc expose deux attributs simples en édition : un montant par défaut suggéré et un intitulé de campagne, utile si l’association mène plusieurs collectes en parallèle.

{
  "apiVersion": 2,
  "name": "wpmoderne/don-stripe",
  "title": "Don Stripe",
  "attributes": {
    "montantSuggere": { "type": "number", "default": 20 },
    "campagne": { "type": "string", "default": "" }
  },
  "render_callback": "wpmoderne_render_don_stripe"
}
L'essentiel à retenir : Stripe Elements intégré dans un bloc sur mesure ; Aucune dépendance à WooCommerce ; Montant libre saisi par le donateur

Créer le PaymentIntent côté serveur

Le montant saisi par le donateur ne doit jamais être transmis tel quel depuis le JavaScript sans validation côté serveur — sinon rien n’empêche une requête forgée de fixer un montant à un centime. La création du PaymentIntent passe donc par une route REST dédiée :

add_action( 'rest_api_init', function () {
    register_rest_route( 'wpmoderne/v1', '/creer-intention', array(
        'methods'             => 'POST',
        'callback'            => 'wpmoderne_creer_intention_don',
        'permission_callback' => '__return_true',
    ) );
} );

function wpmoderne_creer_intention_don( WP_REST_Request $request ) {
    $montant_centimes = absint( $request->get_param( 'montant' ) ) * 100;
    if ( $montant_centimes < 100 ) {
        return new WP_Error( 'montant_invalide', 'Le montant minimum est de 1 euro.', array( 'status' => 400 ) );
    }
    \Stripe\Stripe::setApiKey( STRIPE_SECRET_KEY );
    $intention = \Stripe\PaymentIntent::create( array(
        'amount'   => $montant_centimes,
        'currency' => 'eur',
    ) );
    return array( 'clientSecret' => $intention->client_secret );
}

Le formulaire côté front

Le bloc rend un conteneur vide, un champ de montant, et un bouton de validation. Le script front appelle la route REST, récupère le client_secret, puis confirme le paiement avec stripe.confirmCardPayment(). Aucune bibliothèque de paiement générique n’est nécessaire, seul le SDK Stripe.js chargé depuis le CDN officiel de Stripe.

  • Le montant est ressaisi et revalidé côté serveur avant toute création d’intention.
  • Le champ carte de Stripe Elements est chargé dans un iframe géré par Stripe lui-même, isolé du reste de la page.
  • Un webhook Stripe (payment_intent.succeeded) déclenche l’envoi du reçu par e-mail, plutôt qu’une confirmation uniquement côté navigateur, plus fiable en cas de fermeture prématurée de l’onglet.

Ce que ce bloc ne couvre pas

Les dons récurrents (prélèvement mensuel) demandent l’API Stripe Billing avec gestion d’abonnements, ce qui change la nature du projet et sort du cadre d’un simple bloc de don ponctuel. De même, la génération de reçus fiscaux (Cerfa 11580) pour la déduction d’impôt est un sujet à part entière, traité séparément, qui touche à des règles fiscales précises et à un format de document normé.

Notre verdict

Pour une petite association qui collecte des dons ponctuels, un bloc Stripe Elements sur mesure est plus léger et plus lisible qu’une installation WooCommerce complète détournée de son usage premier. Le code à maintenir tient sur quelques fichiers, et chaque ligne a une raison d’être — ce qui, pour une équipe bénévole qui reprendra peut-être le site dans deux ans, vaut largement l’effort initial.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Partager :

À propos de l'auteur

WordPress Développement

Développeur WordPress, passionné par Elementor, le FSE et l’automatisation par IA.

Voir tous ses articles

Dans la même veine

À lire aussi