Comment créer un formulaire de paiement Stripe avec un calculateur de prix

Ta page de tarifs présente les offres et les fonctionnalités, mais les prospects ne savent toujours pas combien ils paieront réellement. Ils ont 15 utilisateurs, ont besoin de deux intégrations, veulent une facturation annuelle et nécessitent le module de conformité. Ils envoient donc un e-mail à ton équipe commerciale et attendent un jour une réponse qui aurait dû prendre cinq secondes.

La solution : crée avec involve.me un calculateur de prix interactif qui permet aux prospects de configurer précisément leur formule, de voir le prix calculé en temps réel et de payer directement via un formulaire de paiement Stripe. Le calculateur effectue les calculs, affiche le total et transmet le paiement à Stripe, sans appel commercial, devis par e-mail ni facture manuelle.

Voici comment créer le parcours complet.

Fonctionnement De L'intégration Du Formulaire De Paiement Stripe

Lorsqu'un prospect termine ton calculateur de prix involve.me et passe au paiement, l'intégration effectue automatiquement les actions suivantes :

• Calcule le prix total selon la configuration choisie par le prospect (offre, utilisateurs, modules complémentaires, période de facturation)

• Affiche le prix calculé sur la page de résultat avec une ventilation complète des coûts

• Ouvre la page de paiement Stripe correspondant au montant calculé lorsque le prospect clique sur « Payer »

• Crée un client Stripe avec l'e-mail et le nom de l'acheteur, ainsi que les métadonnées du calculateur

• Enregistre la transaction et conserve toutes les réponses du calculateur sous forme de métadonnées dans tes dossiers

Le prospect passe de « Combien cela coûterait-il ? » à client ayant payé en une seule session.

Prérequis

Dans Stripe :

• Un compte Stripe (utilise le mode test pour le développement et le mode actif pour la production)

• Des produits et des prix configurés dans ton tableau de bord Stripe, ou créés dynamiquement lors du paiement

• Un point de terminaison webhook Stripe configuré pour confirmer les paiements

Dans involve.me :

• Une offre involve.me (Starter ou supérieure) est requise pour publier un funnel qui collecte des paiements. Tu peux tester les formules du calculateur en mode brouillon avec l'offre gratuite, mais la publication d'un formulaire de paiement Stripe actif nécessite une offre payante. Voir les tarifs d'involve.me.

• Stripe se connecte via app.involve.me/payment-accounts, et non dans les paramètres de l'organisation. Consulte l'étape 2 ci-dessous pour connaître la procédure exacte.

• Un funnel avec calculateur dont la logique tarifaire est configurée à l'aide de l'éditeur de formules

Étape 1 : Concevoir La Logique Du Calculateur

Définir Tes Variables Tarifaires

Associe ton modèle tarifaire aux champs du calculateur avant d'ouvrir l'éditeur. Voici un exemple pour un produit SaaS :

Créer Des Formules Dans involve.me

Voici comment fonctionnent réellement les formules involve.me : Chaque question de ton funnel reçoit un identifiant (Q1, Q2, Q3, etc.). Pour les questions à choix unique ou multiple, tu attribues une valeur numérique à chaque option de réponse en activant « Puntuación y cálculo individuales » pour cette question. Ta formule fait ensuite référence aux questions par leur identifiant, et non par des variables textuelles nommées.

Étape 1 : Pour la question sur ton offre (par exemple, Q1), active « Puntuación y cálculo individuales » et attribue le prix mensuel comme valeur à chaque réponse :

• Starter = 29

• Pro = 79

• Business = 129

Q1 renvoie maintenant directement le prix de base, sans instruction IF.

Étape 2 : Pour ton nombre d'utilisateurs (par exemple, Q2, un élément Curseur), utilise cette formule de dépassement qui s'appuie sur Q1 pour identifier l'offre :

IF(Q1=79, MAX(0, Q2-5)*10, IF(Q1=129, MAX(0, Q2-15)*8, 0))

Étape 3 : Pour les modules complémentaires à choix multiple (par exemple, Q3), attribue à chacun son coût mensuel comme valeur numérique. involve.me additionne automatiquement les valeurs lorsque plusieurs options sont sélectionnées. Q3 renvoie directement le total des modules complémentaires.

Étape 4 : Pour la période de facturation (par exemple, Q4), attribue les valeurs Mensuelle = 1 et Annuelle = 2. Formule de remise annuelle :

IF(Q4=2, (Q1 + overage + Q3 + compliance) 12 0.8, Q1 + overage + Q3 + compliance)

involve.me prend en charge VLOOKUP, les instructions IF imbriquées, MAX, MIN, ROUND et d'autres fonctions avancées. Pour consulter la liste complète, lis le guide des fonctions avancées.

Afficher La Ventilation Du Prix

Les résultats du calculateur ne s'affichent pas en saisissant {{variable_name}} dans un élément de texte. Voici comment cela fonctionne réellement :

1. Ajoute l'élément Calculateur à ta page de résultat ou de remerciement en le faisant glisser depuis le panneau des éléments de contenu. Remarque : l'élément Calculateur peut uniquement être placé sur les pages de résultat ou de remerciement. L'icône sera grisée sur les autres types de pages.

2. Le résultat du calculateur s'affiche automatiquement une fois l'élément ajouté.

3. Pour faire référence à la valeur calculée dans un bloc de texte (par exemple, « Ton total est de [amount] »), clique dans l'élément de texte et utilise le sélecteur d'insertion des réponses pour insérer le libellé du calculateur comme variable. Ne saisis pas manuellement le nom de la variable.

Active le texte IA personnalisé sur la page de résultat afin de générer un récapitulatif tarifaire unique pour chaque prospect. Il explique ce qu'inclut sa configuration précise et ce qu'il obtient à ce niveau de prix, au lieu d'afficher la même confirmation générique à tout le monde.

Étape 2 : Configurer Ton Formulaire De Paiement Stripe

Connecter Stripe à involve.me

1. Accède à app.involve.me/payment-accounts

2. Choisis « Comptes de paiement test » pour le développement ou « Comptes de paiement actifs » pour la production

3. Clique sur « Connecter un compte test » ou « Connecter un compte » et sélectionne Stripe dans le menu déroulant

4. Suis les instructions pour connecter un compte Stripe existant ou en créer un

5. Une fois connecté, le nom de ton compte Stripe apparaît dans la liste. Tu peux désormais le sélectionner lorsque tu configures la collecte des paiements dans n'importe quel funnel

Ajouter L'élément Collecter Les Paiements

1. Dans l'éditeur involve.me, accède à ta page de résultat

2. Ajoute l'élément « Collecter les paiements » depuis le panneau des éléments de contenu

3. Dans les paramètres de l'élément, sélectionne ton modèle de paiement : paiement unique ou abonnement/paiements récurrents

4. Pour le montant du paiement, utilise le sélecteur du champ de montant dans les paramètres de l'élément afin de le relier au résultat de la formule de ton calculateur. Ne saisis pas directement {{annual_total}} ni une syntaxe similaire

5. Sélectionne ton compte Stripe connecté dans le menu déroulant

6. Définis ta devise (USD, EUR, GBP, etc.)

Configurer Les Détails Du Paiement

Dans les paramètres de l'élément Collecter les paiements, configure les éléments suivants :

• Montant : Relié au résultat de la formule de tes widgets de calcul interactifs pour sites web (comme ci-dessus)

• Devise : Ta devise par défaut

• Description du paiement : Inclus le nom de l'offre et un récapitulatif de la configuration. Ces informations apparaissent sur la page de paiement hébergée par Stripe

• Page de confirmation : Une page de remerciement personnalisée avec les prochaines étapes de l'intégration client

Pour accepter des paiements d'un public plus large, Stripe prend également en charge des moyens de paiement locaux, comme iDEAL (Pays-Bas), le prélèvement SEPA (Europe) et EPS (Autriche), pour les paiements uniques. Active les moyens de paiement locaux dans les paramètres de ton compte Stripe. Ils apparaîtront automatiquement sur la page hébergée par Stripe pour les clients éligibles. Remarque : les moyens de paiement locaux sont disponibles uniquement pour les paiements uniques. Ils ne sont pas pris en charge pour les abonnements récurrents via l'intégration involve.me.

Tu peux également activer Stripe Tax sur ton compte Stripe afin de calculer et collecter automatiquement le montant de taxe approprié lors du paiement. Lorsque Stripe Tax est actif, il s'applique aux transactions traitées via le parcours de paiement hébergé par Stripe. Tu n'as pas besoin de configurer la logique fiscale dans involve.me.

Collecter Les Coordonnées Avant Le Paiement

Ajoute une page de formulaire de contact avant la page de paiement pour recueillir :

• E-mail (obligatoire, il sert d'identifiant client Stripe)

• Nom complet

• Nom de l'entreprise

• Téléphone (facultatif)

Ces données créent la fiche client Stripe et te permettent de relancer le prospect même s'il abandonne avant de terminer le paiement.

E-mail du client : La vérification de l'e-mail par OTP est disponible uniquement avec l'offre Business ou supérieure. Pour l'activer, sélectionne le champ d'e-mail dans ton élément Formulaire de contact, puis active « Vérification de l'e-mail par OTP » dans le panneau de paramètres à droite. Les utilisateurs des offres Starter et Pro n'ont pas accès à cette fonctionnalité.

Transmettre Les Données D'attribution Avec Des Champs Masqués

Utilise des champs masqués dans l'URL d'intégration du calculateur pour transmettre les paramètres UTM, la source de recommandation et le contexte de la campagne dans les données envoyées. Ainsi, chaque transaction Stripe et chaque soumission involve.me incluent le canal marketing à l'origine de la conversion.

Pour obtenir ton véritable code d'intégration :

1. Ouvre ton funnel dans l'éditeur involve.me

2. Accède à l'onglet Partager.

3. Clique sur « Intégrer dans une page web » pour obtenir l'extrait de code d'intégration propre à ton organisation, avec l'URL de ton funnel préremplie

4. Pour transmettre les valeurs des champs masqués, ajoute des paramètres à l'URL du funnel dans l'extrait de code d'intégration : ?utm_source=facebook&utm_medium=paid&utm_campaign=product_launch

Associe ces champs masqués aux métadonnées de soumission pour afficher l'attribution dans tes analyses et tes rapports de revenus.

Étape 3 : Créer Des Workflows Après L'achat

Événements Webhook Stripe à Surveiller

Configure des webhooks dans ton tableau de bord Stripe pour ces événements :

• checkout.session.completed : paiement réussi, déclenche l'activation du compte

• payment_intent.payment_failed : échec du paiement, déclenche un parcours de nouvelle tentative

• customer.created : nouvelle fiche client créée, synchronise-la avec ton CRM

Les métadonnées Stripe transmises depuis les soumissions involve.me incluent : les réponses du calculateur (offre, utilisateurs, modules complémentaires, période de facturation), les coordonnées (e-mail, nom, entreprise), les totaux calculés et les données d'attribution (source UTM, campagne, landing page).

Récupération Des Calculateurs Abandonnés

Tous les prospects qui démarrent le calculateur ne termineront pas leur paiement. Utilise les données des soumissions partielles d'involve.me pour récupérer les sessions abandonnées :

Pour les prospects qui ont terminé le calculateur sans payer :

• Tu disposes de leur e-mail (obtenu à l'étape du formulaire de contact), de la configuration choisie et du prix calculé

• Déclenche un e-mail de suivi : « Ton devis personnalisé pour [Plan] avec [X] utilisateurs est prêt. Termine ton achat »

• Inclus le prix exact qu'ils ont vu et un lien direct vers le calculateur

Pour les prospects qui ont démarré le calculateur sans le terminer :

• involve.me recueille les soumissions partielles. Tu peux voir à quelle étape ils ont abandonné et ce qu'ils avaient sélectionné jusque-là

• Utilise ces données pour identifier les points d'abandon fréquents et simplifier le parcours

Tu peux également utiliser l'automatisation des workflows (disponible à partir du plan Starter) pour déclencher des séquences d'e-mails conditionnelles directement depuis le calculateur, sans outil d'e-mail externe pour le suivi initial. Les prospects qui ont finalisé le paiement reçoivent des instructions d'intégration adaptées au plan sélectionné. Ceux qui ont effectué le calcul sans payer reçoivent un message de suivi avec leur devis exact.

Étape 3.5 : Personnaliser L'expérience De Paiement

Vérification OTP Pour Des Transactions Fiables

Vérification de l'e-mail par OTP (plan Business ou supérieur) confirme que l'adresse e-mail saisie est réelle et active avant le traitement du paiement. Pour l'activer, sélectionne le champ d'e-mail dans ton élément Contact Form, puis active « Vérification de l'e-mail par OTP » dans le panneau de droite.

Avantages :

• Filtre les adresses e-mail fictives ou mal saisies avant qu'elles n'atteignent Stripe

• Réduit les litiges de paiement (l'acheteur a confirmé son e-mail avant le paiement)

• Crée un signe de confiance visible pendant le processus de paiement

Texte Personnalisé Pour Le Résultat Et Le Reçu

Une fois le paiement traité, affiche un reçu personnalisé sur la page de remerciement avec :

• La configuration exacte achetée (plan, nombre d'utilisateurs, options sélectionnées)

• Le détail du prix (base, par utilisateur, options, total)

• Les prochaines étapes adaptées au plan choisi

Activer le texte personnalisé par IA sur la page de résultat après paiement pour générer un message de confirmation unique pour chaque client selon sa configuration précise, au lieu d'un message générique « Commande confirmée ».

Étape 4 : Vérifier Le Parcours Du Formulaire De Paiement Stripe

Liste De Vérification Des Tests

Avant la mise en ligne, effectue ces tests dans le mode test de Stripe :

1. Remplis le calculateur avec plusieurs configurations différentes

2. Vérifie le calcul du prix : le prix affiché correspond-il exactement à ton modèle tarifaire ?

3. Teste le paiement avec la carte de test Stripe : 4242 4242 4242 4242 (n'importe quelle date d'expiration future et n'importe quel CVC à 3 chiffres)

4. Vérifie ton tableau de bord Stripe : le client a-t-il été créé ? Le paiement a-t-il été enregistré ? Les métadonnées contiennent-elles les réponses du calculateur ?

5. Vérifie les soumissions involve.me : le statut du paiement est-il enregistré avec les réponses du calculateur ?

6. Teste les cas limites : configuration minimale (1 utilisateur, aucune option), configuration maximale et valeurs limites

7. Teste la gestion des échecs avec la carte de test de refus Stripe : 4000 0000 0000 0002 : vérifie que le message d'erreur s'affiche correctement

8. Teste les soumissions partielles : abandonne à l'étape du paiement et confirme qu'involve.me enregistre les données saisies avant le paiement

Problèmes Courants

« Le prix sur la page de résultat ne correspond pas au montant attendu » Vérifie attentivement la logique du générateur de formules, en particulier les conditions et le calcul des remises. Utilise le mode de test des formules (disponible dans le générateur de formules) pour simuler différentes combinaisons de réponses. Des erreurs d'arrondi peuvent survenir avec les remises en pourcentage. Utilise ROUND() dans tes formules.

« L'élément Collect Payments affiche un montant incorrect » Vérifie que le champ du montant dans l'élément Collect Payments est associé au bon résultat de la formule du calculateur. Si tu as des formules mensuelles et annuelles distinctes, confirme que l'élément fait référence à la bonne formule.

« Le client Stripe n'a pas été créé » Vérifie que la connexion Stripe est active sur app.involve.me/payment-accounts et que le champ d'e-mail de ton Contact Form est présent et correctement associé.

« Les métadonnées n'apparaissent pas dans Stripe » Vérifie que l'association des champs d'involve.me inclut toutes les réponses du calculateur que tu veux stocker dans Stripe. Remarque : les clés des métadonnées Stripe sont limitées à 40 caractères et leurs valeurs à 500 caractères.

Abonnement Ou Paiement Unique : Quel Modèle Choisir ?

Modèle De Paiement Unique

Idéal pour : licences logicielles, formations, prestations à périmètre défini, produits physiques et frais de mise en service.

Fonctionnement dans involve.me : Le client répond aux questions du calculateur → le calculateur affiche le total → il paie une seule fois via la page de paiement Stripe → il reçoit l'accès ou le livrable.

Exemple : Une agence de design utilise un calculateur pour établir le devis d'un projet d'identité de marque. Le client répond à 5 questions, voit un devis de $15,000 sur la page de résultat et paie via le formulaire de paiement Stripe. Le projet commence immédiatement.

Modèle D'abonnement Ou De Paiement Récurrent

Idéal pour : plateformes SaaS, communautés sur abonnement et services récurrents sous contrat.

L'élément « Collect Payments » d'involve.me prend nativement en charge les abonnements récurrents, mensuels ou annuels, via Stripe. Aucun webhook ni contournement avec Zapier n'est nécessaire pour configurer la facturation récurrente.

involve.me prend nativement en charge les abonnements récurrents. Dans l'élément « Collect Payments », sélectionne « Abonnements et paiements récurrents » comme modèle de paiement et connecte ton compte Stripe. Stripe gère automatiquement tous les cycles de facturation suivants.

Exemple : Une entreprise SaaS affiche un calculateur basé sur la taille de l'équipe et l'utilisation. Le client sélectionne 5 membres, voit $299/month, choisit la facturation annuelle et paie via la page de paiement hébergée par Stripe. Stripe gère automatiquement le renouvellement chaque année.

Modèle Hybride : Paiement Unique + Récurrent

Certaines entreprises combinent les deux :

• Frais de mise en service uniques couvrant l'implémentation

• Abonnement mensuel pour un accès continu

Affiche les deux sur la page de résultat :

• Premier mois : $1,000 de mise en service + $299 d'abonnement = $1,299

• Mois 2+ : $299/month

Remarque sur les changements de fréquence de facturation : Les passages à un abonnement supérieur ou inférieur et le calcul au prorata sont gérés directement dans Stripe après le paiement initial, et non dans involve.me. Stripe calcule automatiquement les crédits au prorata lorsqu'un client change de fréquence de facturation. Cette opération s'effectue dans ton tableau de bord Stripe ou via l'API Stripe.

Optimisation : Tests Et Itérations

Tester Ton Calculateur Avec Des Tests A/B

1. Duplique ton funnel de calculateur dans le tableau de bord

2. Apporte tes modifications à la copie (autre titre, tarifs par défaut, ordre des questions, etc.)

3. Publie les deux funnels

4. Accède à l'onglet « Tests A/B » de ton tableau de bord et clique sur « + Créer un nouveau test A/B »

5. Donne un nom descriptif au test et sélectionne les deux funnels

6. Partage l'URL du test A/B, et non les URL individuelles des funnels, afin de répartir équitablement le trafic entre les deux versions

7. Suis les visites, démarrages, leads, soumissions et le taux de complétion de chaque variante dans le tableau de bord du test

Idées de tests à lancer :

Test 1 : présentation des tarifs

• Contrôle : « Tu paieras $5,000 »

• Variante : « Investissement : $5,000 »

Test 2 : montant de la remise

• Contrôle : 15% de remise avec la facturation annuelle

• Variante : 20% de remise avec la facturation annuelle

Test 3 : regroupement des fonctionnalités

• Contrôle : tarif détaillé affiché sous la forme prix de base + options = total

• Variante : message groupé « L'offre Pro inclut les fonctionnalités A, B et C »

Test 4 : ancrage tarifaire

• Contrôle : afficher d'abord l'offre Starter, puis Pro

• Variante : afficher d'abord l'offre Pro, puis Starter

Poursuis chaque test jusqu'à disposer de suffisamment de données pour tirer une conclusion pertinente. involve.me affiche directement le taux de complétion de chaque variante dans le tableau de bord du test A/B.

Optimisation Après L'achat

Utilise l'automatisation des workflows pour envoyer des séquences d'e-mails utiles après le paiement. Comme la configuration du calculateur de chaque client est stockée dans involve.me, tu peux injecter les réponses pour personnaliser chaque e-mail :

• Jour 1 : « Récapitulatif de ta configuration » : récapitule exactement ce que le client a acheté à partir du plan et des options qu'il a sélectionnés

• Jour 3 : « Guide de démarrage » : adapte-le au plan et aux fonctionnalités sélectionnés

• Jour 7 : « Étape clé atteinte » : invite le client à consulter ses résultats

• Jour 30 : « Développe ton offre » : présente les options que le client n'a pas sélectionnées lors du paiement

Commencer

Pour la plupart des entreprises, créer un formulaire de paiement Stripe dans involve.me prend moins d'une semaine, de la planification à la première transaction en ligne. L'association d'involve.me et de Stripe te permet d'accepter les paiements directement dans un parcours de funnel personnalisé, sans redirection vers un site de paiement distinct, sans devis manuel et sans perdre de prospects en attente d'une réponse commerciale.

Les analyses intégrées d'involve.me suivent les visites, les démarrages, les leads, les soumissions et les taux de complétion de ton funnel de calculateur. Tu peux consulter chaque soumission pour voir la configuration sélectionnée et le statut de paiement de chaque prospect. Pour analyser le chiffre d'affaires par configuration, exporte les données de soumission ou connecte ton CRM grâce à l'une des 50+ intégrations natives d'involve.me.

Conclusion : Pourquoi Cette Méthode Fonctionne

Un formulaire de paiement Stripe intégré à un calculateur de prix élimine le principal frein aux achats B2B : « Je ne sais pas combien cela coûte. »

Les clients qui configurent eux-mêmes leur plan et voient leur prix en temps réel arrivent sur la page de paiement Stripe déjà convaincus. Ils se sentent :

• Informés : ils comprennent exactement ce qu'ils paient

• Aux commandes : ils ont eux-mêmes établi le prix

• En confiance : ils peuvent justifier l'achat en interne

Ce client est plus susceptible d'acheter sans négocier, de conserver l'abonnement pour lequel il a calculé le ROI et d'étendre son utilisation lorsqu'il comprend ce que chaque offre inclut.

Le calculateur n'a pas pour but de compliquer les tarifs. Il les rend transparents, personnalisés et immédiats, puis laisse le parcours de paiement hébergé par Stripe conclure la vente dès que le prospect est prêt.