@bjpay/angular

Widget de paiement BjPay pour Angular.

npm install @bjpay/angular

Angular ≥ 16 est une dépendance de pair — la version où les signaux sont apparus.

Usage

Déclarez le fournisseur une fois :

import { provideBjPay } from "@bjpay/angular";

bootstrapApplication(AppComponent, {
  providers: [
    provideBjPay({ baseUrl: "https://bjpay-staging.service-public.bj/widget/v2" }),
  ],
});

Puis injectez-le où vous en avez besoin :

import { Component, inject } from "@angular/core";
import { BJPAY } from "@bjpay/angular";

@Component({
  selector: "bouton-payer",
  template: `
    @if (bjpay.status() === "error") {
      <p>Paiement indisponible : {{ bjpay.error()?.message }}</p>
    } @else {
      <button [disabled]="bjpay.status() !== 'ready'" (click)="payer()">
        {{ bjpay.status() === "ready" ? "Payer" : "Chargement…" }}
      </button>
    }
  `,
})
export class BoutonPayer {
  readonly bjpay = inject(BJPAY);

  payer() {
    this.bjpay.pay({
      token: this.token,
      merchant: "Direction Générale des Impôts",
      title: "Quittance — Impôt foncier 2026",
      ref: "BJ-2026-00482",
      amount: 5000,
      currency: "XOF",
      onSuccess: ({ transaction }) => this.confirmerCoteServeur(transaction),
      onError: ({ reason }) => this.afficher(reason),
    });
  }
}

Ce que le service rend

| | | |---|---| | pay(config) | Ouvre le widget. Silencieux tant que le loader n'est pas prêt | | close() | Ferme la modale depuis votre code | | status() | Signal — "loading" · "ready" · "error" | | error() | Signal — Error \| null |

Pourquoi un signal plutôt qu'un @Injectable

Ce paquet est écrit en JavaScript, comme le reste du SDK. Un service décoré aurait imposé TypeScript et un compilateur ; signal() s'appelle hors de tout contexte d'injection, et provideBjPay câble la fabrique pour vous.

Vous pouvez aussi appeler createBjPay({ baseUrl }) directement, sans passer par l'injection de dépendances.

baseUrl n'a pas de valeur par défaut

C'est cette valeur qui décide vers quel déploiement part le paiement. Un défaut sur la production ferait engager de vrais débits à une intégration de recette qui l'aurait oubliée. C'est tout ce qui précède /bjpay.min.js, préfixe de chemin compris.

Angular Universal

Le fournisseur est différé : rien n'est chargé tant qu'Angular n'a pas besoin du service. Injectez-le dans un composant rendu côté client.

onSuccess ne vaut pas preuve de paiement

C'est un événement de navigateur, émis par une page que vous ne contrôlez pas. Confirmez toute transaction côté serveur auprès de TresorPay avant de livrer un service ou de marquer une commande comme réglée.

Licence

MIT