Intégrer Tchin dans Bubble (no-code)

Tchin propose un plugin officiel sur le marketplace Bubble : vos clients paient par Mobile Money via une popup directement sur votre app Bubble, sans écrire de code. Deux approches existent — le plugin (recommandé) ou l'API Connector (manuel).

Prérequis

Un compte Tchin vérifié, et une application créée dans votre tableau de bord (menu API) pour obtenir vos clés publique et privée.
Une app Bubble.

A. Avec le plugin officiel (recommandé)

1. Installer le plugin

Dans votre app Bubble : Plugins → Add plugins → cherchez « Tchin » → Install.

2. Renseigner vos clés

Onglet Plugins → Tchin → collez vos clés :

TCHIN-PUBLIC-KEY = votre clé publique tchin_pk_…
TCHIN-PRIVATE-KEY = votre clé privée tchin_sk_…

⚠️ Ces appels partent côté serveur Bubble : votre clé privée n'est jamais exposée dans le navigateur.

3. Poser l'élément « Tchin Checkout »

Dans Design, déposez l'élément Tchin Checkout sur la page. C'est un contrôleur invisible qui ouvre la popup et remonte le résultat. (Laissez-le présent sur la page pour qu'il s'initialise.)

4. Le workflow du bouton « Payer »

Étape 1 — action Tchin → create_payment :
- amount = le montant en FCFA (ex. 5000)
- env = test ou live
- return_url (optionnel) et callback_url (votre webhook)
Étape 2 — action Tchin Checkout → Ouvrir le paiement Tchin :
- payment_url = Result of step 1's body payment_url

La popup Tchin s'ouvre sur votre page ; le client choisit pays + opérateur, paie, et la popup se ferme automatiquement.

5. Réagir au résultat

L'élément expose des événements et des états :

Événement	Quand
`payment_success`	Paiement effectué (ou en attente) — pour l'affichage.
`payment_closed`	Le client a fermé / annulé la popup.

État	Valeur
`payment_status`	`success` / `cancel` / `pending`
`payment_token`	La référence du paiement.

Exemple : When Tchin Checkout's payment_success → afficher « Merci ».

⚠️ L'événement sert à l'affichage. Pour valider et livrer la commande, fiez-vous au webhook (ci-dessous).

Exemple de corps pour create_payment

JSON

{
  "amount": 5000,
  "description": "Commande #1234",
  "env": "live",
  "return_url": "https://monapp.com/merci",
  "callback_url": "https://monapp.com/version-live/api/1.1/wf/tchin_webhook"
}

Le webhook (source de vérité) — Backend Workflow

C'est lui qui confirme réellement le paiement, serveur à serveur.

Settings → API → activez « Enable Workflow API » (Backend workflows).
Créez un API Workflow nommé tchin_webhook : cochez « Detect request data » et « This endpoint can be triggered without authentication ».
Tchin y envoie un POST avec les données sous la clé data :

Webhook (form-urlencoded)

# Tchin POST (application/x-www-form-urlencoded), données sous la clé "data" :
data[status]      = completed        # ou failed / cancelled / pending
data[reference]   = ab12cd34ef       # = le token du paiement
data[hash]        = 7f3b…            # SHA-512 de VOTRE clé privée
data[amount]      = 5000
data[net]         = 4750             # montant crédité (après 5%)
data[country]     = SN
data[method]      = wave-senegal
data[mode]        = live             # ou test
data[customer][name]  = Awa Diop
data[customer][email] = awa@exemple.com
data[customer][phone] = 771111111

Vérifiez le hash : c'est le SHA-512 de votre clé privée — recalculez-le et comparez pour authentifier l'origine.
Si data status = completed → retrouvez la commande via data reference (le token) et marquez-la payée.
L'URL de ce endpoint = https://votre-app/version-live/api/1.1/wf/tchin_webhook → c'est la valeur de callback_url à l'étape 1.

Mode test

Passez env = test et payez avec le compte test de votre tableau de bord (menu API → « Compte test »). Aucun argent réel n'est déplacé. Un webhook de test est tout de même envoyé pour valider votre intégration.

B. Sans plugin (API Connector)

Si vous préférez tout configurer à la main :

Plugins → API Connector → Add another API (nom « Tchin »). Authentification : 2 shared headers TCHIN-PUBLIC-KEY et TCHIN-PRIVATE-KEY (en Private), plus Content-Type: application/json.
Ajoutez un call create_payment : POST https://tchin.tech/api/v1/payments, body JSON (voir plus haut) → renvoie payment_url.
Workflow du bouton : action create_payment, puis « Open an external website » avec le payment_url (le client est redirigé vers la page Tchin, puis revient sur votre return_url).
Configurez le même webhook (Backend Workflow) qu'à la section A.

→ Le plugin officiel reste plus simple (popup intégrée + événements), mais l'API Connector fonctionne tout aussi bien en redirection.

Récapitulatif

Installez le plugin → entrez vos clés → au clic « Payer », appelez create_payment puis « Ouvrir le paiement Tchin » → réagissez à payment_success → et validez la commande via le webhook. Détails de l'API sur Encaissement et Webhooks.