Frontend

Intégrer NaabigaPay en React

Le composant demande un lien à votre backend, redirige vers la page de paiement, puis relit le statut.

À lire en premier. La clé secrète (sk_live_…) ne doit jamais se trouver dans le code React : elle serait lisible dans les sources du navigateur. Le front appelle votre backend, et c'est lui qui appelle NaabigaPay avec la clé.

Le principe

Le composant appelle votre backend pour obtenir un lien de paiement.
Il redirige le navigateur vers l'url renvoyée (page de paiement NaabigaPay).
De retour sur votre return_url, le front relit le statut chez vous (votre backend a reçu le webhook signé).

Appeler votre backend et ouvrir l'URL

React · BoutonPayer.jsx

import { useState } from 'react';

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

  async function payer() {
    setChargement(true);
    // 1) Demander le lien à VOTRE backend (lui seul détient la clé secrète).
    const r = await fetch('/api/pay', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ commande, amount: montant }),
    });
    const { url } = await r.json();

    // 2) Ouvrir la page de paiement NaabigaPay.
    window.location.href = url;              // ou window.open(url, '_blank')
  }

  return (
    <button onClick={payer} disabled={chargement}>
      {chargement ? 'Redirection…' : 'Payer'}
    </button>
  );
}

Confirmer au retour

Sur la page de votre return_url, relisez le statut auprès de votre backend : lui seul fait foi, car il a reçu le webhook signé.

React · PageMerci.jsx

import { useEffect, useState } from 'react';

// Page affichée sur votre return_url (ex. /merci?ref=CMD-1042).
export function PageMerci() {
  const [statut, setStatut] = useState('pending');

  useEffect(() => {
    const ref = new URLSearchParams(window.location.search).get('ref');
    // Relire le statut chez VOUS ; votre backend fait foi (webhook signé).
    fetch(`/api/commandes/${ref}/statut`)
      .then((r) => r.json())
      .then((d) => setStatut(d.statut)); // pending | success | failed | cancelled
  }, []);

  if (statut === 'success') return <p>Paiement reçu, merci !</p>;
  if (statut === 'failed') return <p>Paiement échoué.</p>;
  return <p>Vérification du paiement…</p>;
}

Astuce. Ne créditez rien depuis le front : 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.