Frontend

Intégrer NaabigaPay en Vue

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 Vue : 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

Vue · BoutonPayer.vue

<script setup>
import { ref } from 'vue';

const props = defineProps({ commande: String, montant: Number });
const chargement = ref(false);

async function payer() {
  chargement.value = 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: props.commande, amount: props.montant }),
  });
  const { url } = await r.json();

  // 2) Ouvrir la page de paiement NaabigaPay.
  window.location.href = url;
}
</script>

<template>
  <button :disabled="chargement" @click="payer">
    {{ chargement ? 'Redirection…' : 'Payer' }}
  </button>
</template>

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é.

Vue · PageMerci.vue

<script setup>
import { ref, onMounted } from 'vue';

const statut = ref('pending');

onMounted(async () => {
  const ref_ = new URLSearchParams(location.search).get('ref');
  // Relire le statut chez VOUS ; votre backend fait foi (webhook signé).
  const r = await fetch(`/api/commandes/${ref_}/statut`);
  statut.value = (await r.json()).statut; // pending | success | failed | cancelled
});
</script>

<template>
  <p v-if="statut === 'success'">Paiement reçu, merci !</p>
  <p v-else-if="statut === 'failed'">Paiement échoué.</p>
  <p v-else>Vérification du paiement…</p>
</template>

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.