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

Elementor

Un don récurrent léger sous Elementor avec Stripe Elements, sans WooCommerce

Intégration de Stripe Billing dans un widget HTML dédié pour gérer un don récurrent simple sous Elementor, quand WooCommerce serait disproportionné.

Par WordPress Développement • 12 avril 2024 • 4 min de lecture • Aucun commentaire
Un don récurrent léger sous Elementor avec Stripe Elements, sans WooCommerce

Un don mensuel de 15 € rapporte, sur une année, davantage qu’un don ponctuel moyen constaté sur ce projet associatif, et surtout il stabilise les rentrées d’argent d’un mois sur l’autre. C’est ce constat, partagé par l’équipe de collecte de fonds d’une petite association, qui a motivé l’ajout d’une option de don récurrent au formulaire existant, jusque-là limité au don ponctuel via Stripe Checkout.

Le même choix qu’auparavant s’est reposé : WooCommerce, même avec ses extensions d’abonnement, représentait un poids de maintenance disproportionné pour un unique produit récurrent (le don mensuel), sans catalogue ni logique de commande classique à gérer. Stripe Billing, la brique d’abonnements de Stripe, couvrait exactement le besoin sans dépendance supplémentaire.

Le choix de Stripe Elements plutôt que Checkout

Contrairement au don ponctuel, où une redirection vers Stripe Checkout suffisait, l’équipe souhaitait garder le donateur sur le site pour l’étape de saisie de carte, avec un habillage visuel proche du reste du formulaire Elementor. Stripe Elements, un composant de formulaire de carte embarqué directement dans la page via le SDK JavaScript de Stripe, répondait à ce besoin sans jamais faire transiter le numéro de carte par le serveur WordPress.

Étape 1 : créer le client et l’intention d’abonnement côté serveur

add_action('rest_api_init', function () {
    register_rest_route('dons/v1', '/creer-abonnement', [
        'methods'  => 'POST',
        'callback' => 'creer_abonnement_stripe',
        'permission_callback' => '__return_true',
    ]);
});

function creer_abonnement_stripe(\WP_REST_Request $request) {
    \Stripe\Stripe::setApiKey(getenv('STRIPE_SECRET_KEY'));
    $email = sanitize_email($request->get_param('email'));

    $client = \Stripe\Customer::create(['email' => $email]);

    $abonnement = \Stripe\Subscription::create([
        'customer' => $client->id,
        'items' => [['price' => 'price_don_mensuel_15euros']],
        'payment_behavior' => 'default_incomplete',
        'payment_settings' => ['save_default_payment_method' => 'on_subscription'],
        'expand' => ['latest_invoice.payment_intent'],
    ]);

    return new \WP_REST_Response([
        'client_secret' => $abonnement->latest_invoice->payment_intent->client_secret,
    ]);
}
L'essentiel à retenir : Abonnement Stripe Billing créé en deux appels API ; Formulaire de carte géré par Stripe Elements, jamais par le serveur ; Gestion d'annulation via un lien client Stripe natif

Étape 2 : confirmer le paiement avec Stripe Elements côté client

const { error } = await stripe.confirmCardPayment(clientSecret, {
  payment_method: { card: cardElement }
});

if (error) {
  document.getElementById('erreur-don').textContent = error.message;
} else {
  window.location.href = '/merci-don-mensuel/';
}

Le paramètre payment_behavior: 'default_incomplete' est le point le plus facile à oublier : sans lui, Stripe tente de facturer immédiatement l’abonnement avant même que le donateur n’ait saisi sa carte, ce qui échoue systématiquement. Cette option crée l’abonnement en attente, prêt à être confirmé une fois la carte validée côté client.

Laisser le donateur gérer son propre abonnement

Plutôt que de construire une interface de gestion d’abonnement personnalisée, coûteuse à sécuriser correctement, le choix a été de générer un lien vers le portail client natif de Stripe (Customer Portal), qui permet au donateur d’annuler ou de modifier son moyen de paiement lui-même, sans sollicitation de l’association à chaque demande.

  • Aucune donnée de carte ne transite jamais par le serveur WordPress
  • Le donateur gère lui-même l’annulation via le portail client Stripe
  • Un webhook invoice.payment_failed permet d’alerter l’association en cas d’échec de prélèvement récurrent

Cet article ne traite ni la génération des reçus fiscaux liés à ces dons récurrents, sujet distinct déjà couvert par ailleurs pour les dons ponctuels de cette association, ni la comptabilité associative complète, qui reste gérée par l’équipe de trésorerie indépendamment de cette intégration.

Un don récurrent qui échoue silencieusement au bout de trois mois fait perdre plus de confiance qu’un don ponctuel refusé une fois : le webhook d’échec de paiement n’est pas une option secondaire, il est le cœur du dispositif.

En résumé

Ajouter une option de don récurrent à un formulaire Elementor existant ne demande pas de migrer vers WooCommerce : Stripe Billing couplé à Stripe Elements suffit pour un besoin ponctuel de ce type, à condition de bien gérer l’état intermédiaire de l’abonnement et de surveiller les échecs de prélèvement via les webhooks appropriés.

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