Frontend

Intégrer NaabigaPay en Flutter Web

L'app web demande un lien à votre backend, ouvre la page de paiement, puis relit le statut au retour.

À lire en premier. La clé secrète (sk_live_…) ne doit jamais se trouver dans le code Flutter Web : il est compilé en JavaScript et lisible dans le navigateur. L'app appelle votre backend, et c'est lui qui appelle NaabigaPay avec la clé.

Le principe

L'app web appelle votre backend pour obtenir un lien de paiement.
Elle ouvre l'URL renvoyée (page de paiement NaabigaPay).
De retour sur votre return_url (une route de votre app web), elle relit le statut chez vous (votre backend a reçu le webhook signé).

Appeler votre backend et ouvrir l'URL

L'app demande le lien à votre backend, puis ouvre l'url. Sur le web, url_launcher fonctionne comme sur mobile.

Dart · payer()

// pubspec.yaml : http, url_launcher
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:url_launcher/url_launcher.dart';

// Appelle VOTRE backend (lui seul détient la clé secrète), puis ouvre le lien.
Future<void> payer(String commande, int montant) async {
  // 1) Demander le lien à votre backend.
  final res = await http.post(
    Uri.parse('https://monsite.com/api/pay'),
    headers: {'Content-Type': 'application/json'},
    body: jsonEncode({'commande': commande, 'amount': montant}),
  );
  final data = jsonDecode(res.body) as Map<String, dynamic>;

  // 2) Ouvrir la page de paiement NaabigaPay (url_launcher fonctionne sur le web).
  await launchUrl(
    Uri.parse(data['url'] as String),
    webOnlyWindowName: '_self', // même onglet ; '_blank' pour un nouvel onglet
  );
}

La réponse contient url (ex. https://pay.naabiga.com/link/9f3c…) : la page où le client paie. Pour un montant libre, votre backend envoie amount_min, amount_max et une description au lieu de amount.

Variante sans url_launcher

Sur le web, vous pouvez aussi rediriger directement avec dart:html :

Dart · dart:html

import 'dart:html' as html;

// Redirection dans le même onglet.
void ouvrirPaiement(String url) {
  html.window.location.href = url;
  // ou, dans un nouvel onglet : html.window.open(url, '_blank');
}

Gérer le retour

Votre return_url pointe vers une route de votre app web (ex. https://monsite.com/merci?ref=CMD-1042). Lisez la référence dans l'URL courante, puis relisez le statut auprès de votre backend : lui seul fait foi, car il a reçu le webhook signé.

Dart · retour + vérification

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<String> statutAuRetour() async {
  // Lire la référence dans l'URL courante de l'app web.
  final ref = Uri.base.queryParameters['ref'] ?? '';

  // Relire le statut chez VOUS (votre backend a reçu le webhook signé).
  final res = await http.get(Uri.parse('https://monsite.com/api/commandes/$ref/statut'));
  final data = jsonDecode(res.body) as Map<String, dynamic>;
  return data['statut'] as String; // pending | success | failed | cancelled
}

Astuce. Ne créditez rien depuis l'app : le retour navigateur peut être manqué ou rejoué. Seul le webhook signé reçu par votre backend confirme le paiement.

Référence rapide

Méthode	Endpoint	Rôle
POST	`/v1/payment-links`	Créer un lien de paiement
GET	`/v1/payments/{reference}`	Statut d'un paiement

Base : https://api.pay.naabiga.com/api/v1 · Auth : Authorization: Bearer sk_…. Voir la documentation complète et le format des webhooks.