Frontend

Intégrer NaabigaPay en React Native

L'app demande un lien à votre backend, l'ouvre avec Linking, puis capte le retour par deep link.

À lire en premier. La clé secrète (sk_live_…) ne doit jamais être embarquée dans l'app : un binaire se décompile et la clé fuiterait. L'app appelle votre backend, et c'est lui qui appelle NaabigaPay avec la clé.

Le principe

L'écran appelle votre backend pour obtenir un lien de paiement.
Il ouvre l'url avec Linking.openURL (navigateur ou Mobile Money).
Au retour par deep link, l'app relit le statut chez vous.

Appeler votre backend et ouvrir l'URL

React Native · BoutonPayer.jsx

import { useState } from 'react';
import { Button, Linking, Alert } from 'react-native';

export function BoutonPayer({ commande, montant }) {
  const [chargement, setChargement] = useState(false);

  async function payer() {
    setChargement(true);
    try {
      // 1) Votre backend crée le lien (il détient la clé) et renvoie l'URL.
      const r = await fetch('https://monsite.com/api/pay', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          commande,
          amount: montant,
          return_url: 'monapp://paiement/retour', // deep link de retour vers l'app
        }),
      });
      const { url } = await r.json();

      // 2) Ouvrir la page de paiement NaabigaPay.
      await Linking.openURL(url);
    } catch (e) {
      Alert.alert('Erreur', String(e));
    } finally {
      setChargement(false);
    }
  }

  return <Button title="Payer" onPress={payer} disabled={chargement} />;
}

Capter le retour (deep link)

À la fin du paiement, NaabigaPay renvoie vers votre return_url (monapp://…). Écoutez ce deep link, puis relisez le statut auprès de votre backend, seul juge du paiement.

React Native · useRetourPaiement.js

import { useEffect } from 'react';
import { Linking } from 'react-native';

// Écoute le retour de paiement (deep link monapp://paiement/retour).
export function useRetourPaiement(onPaye) {
  useEffect(() => {
    const sub = Linking.addEventListener('url', async ({ url }) => {
      if (!url.startsWith('monapp://paiement')) return;
      // Relire le statut chez VOUS (backend informé par le webhook signé).
      const r = await fetch('https://monsite.com/api/commandes/derniere/statut');
      const { statut } = await r.json();
      if (statut === 'success') onPaye(); // pending | success | failed | cancelled
    });
    return () => sub.remove();
  }, [onPaye]);
}

Astuce. Déclarez le schéma monapp:// dans AndroidManifest.xml (intent-filter) et Info.plist (CFBundleURLSchemes). Ne validez jamais le paiement depuis l'app : seul le webhook signé reçu par votre backend fait foi.

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.