Frontend

Intégrer NaabigaPay en Angular

Un service appelle votre backend pour obtenir le lien, 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 Angular : elle serait lisible dans les sources du navigateur. L'app appelle votre backend, et c'est lui qui appelle NaabigaPay avec la clé.

Le principe

Le service 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, l'app relit le statut chez vous (votre backend a reçu le webhook signé).

Le service : appeler votre backend

Le service utilise HttpClient pour appeler votre backend (jamais NaabigaPay directement) et récupérer l'url.

paiement.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class PaiementService {
  constructor(private http: HttpClient) {}

  // Appelle VOTRE backend (lui seul détient la clé secrète).
  creerLien(commande: string, montant: number): Observable<{ url: string }> {
    return this.http.post<{ url: string }>('/api/pay', {
      commande,
      amount: montant,
    });
  }

  // Relit le statut chez VOUS ; votre backend fait foi (webhook signé).
  statut(ref: string): Observable<{ statut: string }> {
    return this.http.get<{ statut: string }>(`/api/commandes/${ref}/statut`);
  }
}

Le bouton : rediriger vers le paiement

Le composant appelle le service, récupère l'url, puis redirige le navigateur vers la page de paiement NaabigaPay.

bouton-payer.component.ts

import { Component } from '@angular/core';
import { PaiementService } from './paiement.service';

@Component({
  selector: 'app-bouton-payer',
  standalone: true,
  template: `
    <button (click)="payer()" [disabled]="chargement">
      {{ chargement ? 'Redirection…' : 'Payer' }}
    </button>
  `,
})
export class BoutonPayerComponent {
  chargement = false;

  constructor(private paiement: PaiementService) {}

  payer() {
    this.chargement = true;
    // 1) Demander le lien à votre backend.
    this.paiement.creerLien('CMD-1042', 5000).subscribe(({ url }) => {
      // 2) Ouvrir la page de paiement NaabigaPay.
      window.location.href = url;
    });
  }
}

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

page-merci.component.ts

import { Component, OnInit } from '@angular/core';
import { PaiementService } from './paiement.service';

// Composant affiché sur votre return_url (ex. /merci?ref=CMD-1042).
@Component({
  selector: 'app-page-merci',
  standalone: true,
  template: `
    <p *ngIf="statut === 'success'">Paiement reçu, merci !</p>
    <p *ngIf="statut === 'failed'">Paiement échoué.</p>
    <p *ngIf="statut === 'pending'">Vérification du paiement…</p>
  `,
})
export class PageMerciComponent implements OnInit {
  statut = 'pending'; // pending | success | failed | cancelled

  constructor(private paiement: PaiementService) {}

  ngOnInit() {
    const ref = new URLSearchParams(window.location.search).get('ref') ?? '';
    // Le backend fait foi : il a reçu le webhook signé.
    this.paiement.statut(ref).subscribe((d) => (this.statut = d.statut));
  }
}

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.