Bubble

À savoir avant de commencer

• Bubble est le seul app-builder du lot avec une vraie exécution serveur : l'API Connector exécute les appels côté serveur, la clé marquée « Private » n'est jamais exposée au navigateur. Bubble peut donc créer le lien de paiement lui-même.
• En revanche, Bubble normalise le corps brut des webhooks entrants (espaces et sauts de ligne supprimés) : la vérification de la signature HMAC y est infiabilisable. Les webhooks Mobupay passent par votre backend Xano (guide validé de bout en bout), qui vérifie puis relaie un événement de confiance.
• Les backend workflows en production demandent un plan Starter ou supérieur. Prévoir aussi un jeton partagé long et aléatoire (généré par vous), stocké en variable d'environnement Xano et comparé dans le workflow Bubble.

1. Créer le lien de paiement (Bubble natif)

1. 1API Connector : nouvelle API « Mobupay », authentification Private key in header (Authorization: Bearer sk_…).
2. 2Call create_payment_link, Use as: Action, POST https://api.mobupay.nc/api/v1/payments/links, body JSON avec order (référence, montant en unité mineure, devise), redirectUrl (page Bubble de retour), notificationUrl (l'endpoint Xano, pas une URL Bubble) et externalId (votre identifiant de commande).
3. 3Workflow du bouton Payer : action create_payment_link puis Open an external website avec le linkUrl renvoyé. Un call en Action avec header part toujours du serveur Bubble.

2. Recevoir l'état payé (relais Xano, jeton partagé)

1. 1Bubble : Settings, API, activer les backend workflows. Créer un workflow mobupay-paid exposé en POST avec paramètres externalId, type, token. Première action : Terminate this workflow si token ne correspond pas au jeton partagé. Ensuite : marquer la commande selon type.
2. 2Xano : dans la stack du webhook (signature Mobupay déjà vérifiée), ajouter le relais :

api.request {
  url = "https://VOTRE-APP.bubbleapps.io/api/1.1/wf/mobupay-paid"
  method = "POST"
  params = {externalId: $event.data.externalId, type: $event.type, token: $env.BUBBLE_RELAY_TOKEN}
  headers = []|push:"Content-Type: application/json"
} as $bubble_relay

Bubble compare le jeton par simple égalité : la cryptographie (HMAC, anti-rejeu) est déjà faite par Xano sur le corps brut authentique.

Variante sans intermédiaire (dégradée) : pointer notificationUrl sur un backend workflow Bubble, ignorer le contenu (invérifiable) et l'utiliser comme simple réveil : relire l'état de vérité via GET /api/v1/payments/{paymentId} (API Connector, côté serveur) avant de marquer la commande. Moins robuste que le relais.

Pièges connus

• Ne jamais tenter la vérification HMAC en Bubble pur : le « raw body » exposé par Bubble est réécrit, la signature ne correspondra jamais.
• L'appel de création reste en Action (jamais en Data côté navigateur).
• Un backend workflow exposé a une URL publique : toujours le jeton partagé en première action.
• data.reference est la référence interne Mobupay : le rapprochement se fait sur externalId / orderReference.

Tester

Avec une clé sk_test_… (cartes de test) : paiement réussi = relais reçu par mobupay-paid et commande marquée payée ; POST forgé sans jeton = workflow terminé sans effet ; aucune clé visible côté navigateur. Voir le guide Xano et le pattern no-code général.