Simplifier la collecte des coordonnées bancaires SEPA : une approche serverless avec Stripe et Cloudflare Workers

Débloquer de nouveaux flux de paiement est un levier de croissance puissant. Les outils low-code et no-code permettent aux équipes de gérer des workflows de paiement directement sur la plateforme Stripe, par exemple en envoyant aux clients des liens pour saisir leurs coordonnées de carte et en débitant automatiquement les factures - sans quitter le dashboard.

Pour les transactions de montant plus élevé, beaucoup d'entreprises préfèrent des moyens de paiement autres que la carte, en raison des frais. En Europe, SEPA est le schéma bancaire de référence, et son traitement diffère de celui des cartes. Stripe permet aujourd'hui d'enregistrer les coordonnées SEPA via les Checkout sessions, qui sont des sessions à durée de vie courte et à usage unique, initiées par du code. Le client doit donner son accord au prélèvement de son compte bancaire - une exigence de conformité incontournable pour SEPA.

Générer des Checkout sessions implique généralement qu'un développeur ajoute du code sur le site et crée des pages dédiées. Pour les petites équipes sans capacité de développement importante, ce type de modification est souvent un frein.

Une solution consiste à combiner les Checkout sessions de Stripe avec Cloudflare Workers, ce qui permet de générer des liens partageables capturant les coordonnées SEPA pour un débit ultérieur. Cette approche serverless tourne entièrement chez Cloudflare, sans serveur supplémentaire ni modification du site.

Cloudflare et Cloudflare Workers, qu'est-ce que c'est ?

Cloudflare est un acteur majeur de la sécurité et de la performance web, qui opère une part significative de l'infrastructure d'Internet. Il propose la gestion DNS, le chiffrement SSL/TLS, des CDN et des solutions qui renforcent la sécurité, la performance et la fiabilité des sites.

Les Cloudflare Workers sont des fonctions JavaScript qui s'exécutent directement sur l'infrastructure de Cloudflare - entre les serveurs et les utilisateurs finaux. Le code est ainsi positionné en bordure du réseau, et peut transformer les requêtes avant qu'elles n'atteignent le backend. Cela autorise des stratégies de cache fines et de la personnalisation de contenu.

Les Workers offrent aussi une expérience serverless complète : ils peuvent traiter de bout en bout les requêtes utilisateur, sans aucun serveur, en s'appuyant entièrement sur le réseau Cloudflare pour héberger et servir le contenu.

Créer un Cloudflare Worker pour collecter les coordonnées SEPA

Il est possible d'éditer les Workers directement dans l'interface Cloudflare, mais cet exemple utilise une édition locale puis un déploiement.

Cloudflare met à disposition Wrangler, un outil basé sur Node.js qui gère la création de projet et le déploiement. Une version récente de Node.js et de npm est requise.

Installer Wrangler

Une fois Wrangler installé, reliez votre installation locale à votre compte Cloudflare :

wrangler login

Cette commande lance un processus d'autorisation avec Cloudflare. Une fenêtre dans le navigateur explique les permissions accordées à l'application Wrangler. Après autorisation, revenez dans la console pour finaliser la connexion. Si plusieurs comptes Cloudflare sont liés à votre identifiant, il vous sera demandé de sélectionner le compte à utiliser via le clavier.

Créer le projet

Créez un projet et installez la librairie Stripe Node :

npm init cloudflare sepa-details-example

Cet assistant guide la configuration de base. Choisissez « Hello World » pour partir d'un squelette minimal. Le support TypeScript vous sera proposé (optionnel), ainsi qu'un déploiement immédiat. En choisissant le déploiement, l'exemple « Hello World » sera mis en ligne à une URL basée sur le nom du projet et celui du compte - par exemple sepa-details-example.square1.workers.dev.

Une fois la configuration de base terminée, ajoutez la librairie Stripe :

npm i --save stripe

Stocker la clé secrète Stripe

La création de Checkout sessions nécessite une clé secrète Stripe issue du dashboard. Information sensible, elle ne doit pas être stockée dans le code. Utilisez plutôt le coffre à secrets de Cloudflare :

wrangler secret put STRIPE_API_KEY

Cette commande demande la saisie de la clé et l'enregistre sous le nom STRIPE_API_KEY. Vérifiez les secrets enregistrés avec wrangler secret list.

Créer une checkout session

Ouvrez src/worker.js et remplacez son contenu par le code suivant, qui charge la librairie Stripe, crée une checkout session pour les coordonnées SEPA et redirige l'utilisateur :

const Stripe = require("stripe");

export default {
  fetch: handleRequest
};

async function handleRequest(request, env, ctx) {
  const stripe = Stripe(env.STRIPE_API_KEY, {
    httpClient: Stripe.createFetchHttpClient()
  });

  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['sepa_debit'],
    mode: 'setup',
    customer_creation: 'always',
    success_url: 'https://www.example.com/?success=1',
    cancel_url: 'https://www.example.com/?retry=1'
  });

  return Response.redirect(session.url, 303);
}

En lançant Wrangler localement et en visitant l'URL fournie, vous serez redirigé vers une URL checkout.stripe.com. Avec des clés Stripe en test mode, un badge « TEST MODE » s'affiche et vous pouvez tester avec les IBAN de test fournis par Stripe. Après saisie des coordonnées et acceptation du mandat de prélèvement, le dashboard Stripe affiche le client avec ses coordonnées SEPA enregistrées, prêt à être débité ultérieurement.

Gérer les messages post-enregistrement

Jusqu'ici, success_url et cancel_url renvoyaient vers example.com sans aucun message informatif. On peut traiter cela depuis le Worker en analysant les paramètres d'URL :

async function handleRequest(request, env, ctx) {
  const url = new URL(request.url);

  if (url.searchParams.get('success') === '1') {
    return showSuccess();
  } else if (url.searchParams.get('retry') === '1') {
    return showRetry();
  } else {
    return redirectToCheckout(env.STRIPE_API_KEY, url);
  }
}

Stripe redirige l'utilisateur avec ?success=1 en cas de réussite, ou ?retry=1 en cas d'annulation. Chaque branche renvoie sa propre Response avec un message adapté.

Déployer le Worker sur Cloudflare

Une fois le code prêt, déployez-le sur Cloudflare :

wrangler deploy

À la fin du déploiement, le Worker apparaît dans Cloudflare. Pour le servir sur votre propre domaine, associez-lui une Workers Route dans la zone correspondante.

Préparation côté Stripe

SEPA est disponible en test mode dès la création du compte. Avant de passer en production, activez SEPA Direct Debit sur votre compte live depuis les Payment Methods. Une vérification supplémentaire peut être demandée, qui peut prendre du temps - ne tardez pas sur cette étape.

Attention aux limites de compte. Par défaut, les transactions SEPA sont plafonnées à 10 000 € par transaction, et les nouveaux comptes ont une limite hebdomadaire de 10 000 € sur l'ensemble du compte (qui augmente avec le temps). Pour traiter plus de 10 000 € dans les premières semaines, contactez le support Stripe en amont pour relever ces limites.

Au-delà des Checkout sessions

La librairie incluse est la librairie Stripe Node.js complète, ce qui rend l'ensemble de l'API Stripe disponible. Que ce soit pour valider les signatures de webhook, lister les produits du compte Stripe ou rediriger les clients vers le Billing Portal, vous n'êtes pas limité aux Checkout sessions.

Autre option : si vous vendez des articles spécifiques (livres, cours, etc.), considérez Payment Links de Stripe. Vous indiquez les détails du produit et obtenez une URL hébergée par Stripe à partager.