Bubble.io

Découvrez comment sécuriser l'accès à votre application créée dans Bubble en la connectant à Easytools.

Dernière mise à jour
1 août 2025

Comment connecter Bubble à Easytools - guide étape par étape

Regardez le tutoriel sur la connexion de Bubble à Easytools, préparé par Chris Rapacz, fondateur de Sendby.io. Dans cette vidéo, Chris montre comment il a intégré son application Bubble à Easytools pour encaisser les paiements et gérer efficacement les abonnements et les accès utilisateurs.

Et voici aussi une transcription avec tous les liens et détails que Chris mentionne dans sa vidéo

1. Configurez votre base de données Bubble

Dans votre type de données User, vous aurez besoin de quelques champs personnalisés pour suivre les abonnements:

  • easytools_customer_id - attribué après une transaction réussie
  • renewal_date
  • subscribed - essentiel; c’est lui qui contrôle l’accès
  • subscription_date
  • subscription_one_time
  • subscription_type - par exemple “monthly”, “lifetime”
  • trial_ends_at

À noter: le champ le plus important est subscribed. S’il vaut yes, l’utilisateur peut générer du contenu. S’il vaut no, vous le redirigez vers Easytools pour qu’il s’abonne.

2. Comprendre les webhooks Easytools

Easytools envoie différents types de webhooks, notamment:

  • subscription_created ou single_product_bought
  • product_assigned

Chaque webhook arrive avec une structure JSON différente. Tous les événements sont envoyés vers une seule URL: vous devrez donc gérer l’aiguillage dans votre backend workflow Bubble.

La liste complète des événements webhook Easytools est disponible ici.

3. Configurer l’URL du webhook

Dans Easytools, allez dans API & Webhook settings et renseignez votre Webhook URL:

**https://your-app.bubbleapps.io/version-test/api/1.1/wf/easy\_payments?api\_token=YOUR\_API\_KEY **

  • easy_payments → le nom de votre backend workflow dans Bubble
  • api_token → généré dans Bubble sous Settings > API > Generate private key

Veillez à utiliser la bonne version dans l’URL:

  • Développement: l’URL contient version-test
  • Production: l’URL ne contient pas version-test

4. Ajouter la vérification du webhook (facultatif mais fortement recommandé)

Pour sécuriser votre webhook:

  1. Générez une Webhook Signing Key dans Easytools.
  2. Utilisez le plugin Toolbox dans Bubble.
  3. Dans votre backend workflow (easy_payments), ajoutez une étape Server Script.
  4. Collez-y votre clé de signature et comparez le hash calculé avec le x-webhook-signature envoyé par Easytools.

S’ils correspondent, poursuivez le workflow. Sinon, arrêtez-le immédiatement.

À noter: vous ne pourrez plus consulter la clé de signature après l’avoir générée, alors conservez-la en lieu sûr.

5. Aiguiller les événements webhook vers des sous-workflows

Utilisez votre webhook principal (easy_payments) comme routeur. Selon le type d’événement, redirigez vers des backend workflows spécifiques:

Exemples:

  • process_product_assigned
  • process_subscription_expired

Seul le webhook principal doit être public. Ces sous-workflows doivent rester privés.

6. Configurer les sous-workflows

Pour process_product_assigned:

  • Activez “Ignore privacy rules”
  • Définissez manuellement les paramètres à recevoir du webhook:
    • subscription_type
    • subscription_one_time
    • is_subscription
    • price
    • custom_id
    • etc.

Étapes:

  1. (Facultatif) Envoyez-vous un email pour tester.
  2. Modifiez l’utilisateur correspondant dans votre base de données:
    • Mettez subscribed = yes si un abonnement valide est actif.
    • Mettez à jour les autres champs comme subscription_type, renewal_date, trial_ends_at, etc.
  3. Utilisez une logique conditionnelle:
    • Si subscription_one_time = yes → subscribed = yes
    • Si subscription_one_time et is_subscription valent tous les deux no → subscribed = no

Pour process_subscription_expired:

  • Modifiez l’utilisateur:
    • Mettez subscribed = no
    • Mettez access_expired = yes
  • Envoyez-vous éventuellement un email de notification

7. Gérer plusieurs formats JSON

Bubble attend une structure JSON cohérente, mais Easytools en envoie plusieurs selon l’événement.

Pour résoudre cela:

  1. Copiez tous les exemples JSON de la documentation Easytools.
  2. Fusionnez-les en un seul JSON unifié
  3. Allez dans votre workflow easy_payments dans Bubble et cliquez sur “Detect data”.
  4. Utilisez Postman pour envoyer votre JSON fusionné:
    • Méthode: POST
    • Collez l’URL du webhook
    • Body: raw JSON
  5. Bubble reconnaîtra la structure. Vérifiez bien le type de chaque champ (nombre, texte, date, etc.).

Fichier JSON fusionné fourni

Voici un schéma JSON combiné, généré par Chris, qui reprend toutes les clés utiles de l’ensemble des événements webhook Easytools. Ce fichier peut servir pendant la détection dans Bubble pour initialiser correctement le point de terminaison du webhook.

Téléchargez le fichier JSON combiné.

Pensez à utiliser ce fichier quand vous envoyez la requête de test à Bubble avec Postman, pendant l’étape “Detect data”. Vous êtes ainsi sûr que Bubble capte tous les champs possibles utilisés par les différents événements webhook Easytools.

Pour utiliser le fichier:

  1. Ouvrez le fichier easytools_merged_webhook.json joint.
  2. Copiez son contenu dans le raw body de votre requête dans Postman.
  3. Envoyez la requête POST vers votre URL de détection de webhook dans Bubble.

Après l’envoi:

  • Bubble affiche tous les champs détectés.
  • Passez-les en revue et confirmez que les types de données sont corrects:
    • Les dates doivent être en date.
    • Les nombres doivent être en number.
    • Les champs texte doivent être en text.

Quand tout est bon, cliquez sur Save dans Bubble pour finaliser la configuration du webhook.

8. Faire correspondre les utilisateurs par email

Pour rattacher le webhook au bon utilisateur:

  • Demandez d’abord aux utilisateurs de créer un compte dans votre application.
  • Préremplissez le formulaire de paiement Easytools avec Current User’s email.
  • Dans votre workflow webhook, retrouvez l’utilisateur avec:

**Search for Users where email = request.body.customer_email **

Si l’email ne correspond pas, Bubble ne peut pas rattacher l’achat à un utilisateur. Imposez donc la cohérence des emails dès le départ.

9. Tester le parcours complet

  1. Mettez le champ subscribed d’un utilisateur de test sur no dans la base Bubble.
  2. Essayez d’accéder à une fonctionnalité protégée → l’utilisateur est redirigé vers la page de paiement Easytools.
  3. Effectuez un paiement de test.
  4. De retour dans Bubble:
    • Le webhook est reçu et vérifié
    • Le champ subscribed de l’utilisateur est mis à jour
    • L’application le détecte et débloque l’accès

À noter: le traitement du webhook prend généralement 8 à 10 secondes.

Vous pouvez au choix:

  • Ajouter un délai de 20 secondes dans la redirection Easytools
  • Afficher un écran “processing” pendant que vous vérifiez si subscribed = yes

Remarques finales

  • Les backend workflows dans Bubble ne sont disponibles que sur les formules payantes.
  • Testez toujours les achats uniques et les abonnements récurrents.
  • Veillez à ce que la logique de votre webhook soit sécurisée, surtout quand elle traite des paiements.
Vous n'avez pas trouvé ce que vous cherchiez? Contactez-nous

Sommaire