NgxBinoxusPay

Description

Cette bibliothèque vous permet de collecter le paiement par différents moyens : Carte de paiement [ Débit | Crédit. ], Bin-Wallet , Mobile Money. Vous devez avoir un compte marchand dans https://pay.binoxus.com, Où vous trouverez vos coordonnées d'authentification.

Installation

  npm install ngx-binoxus-pay

Les étapes

L'utilisation de la bibliothèque est très simple, il suffit de suivre les étapes suivantes :

• L'initialiser le paiement du côté serveur
• Récupérer le systemRef et le token
• Faire passer ces informations dans le composant NgxBin-ngx-binoxuspay
• Mettre votre logique en attendant le callback de retour de paiement
• Le callback de retour peut être de type IBinoxusPayOnResponse ou IBinoxusPayOnError en cas d'erreurs inattendue

Initialisation de paiement

Pour commencer, initialiser le paiement du côté serveur, vous aurez la réponse contenant des données telles que :

• bin_status| Type EApiResponseStatusCode | Le status de l'opération d'initialisation, si c'est BIN000, l'opération a réussi, sinon, quelque chose s'est mal passée;
• system_ref | L'identifiant du paiement dans le système;
• customer_ref | L'identifiant de votre paiement;
• • token | Le token à utiliser lors de l'appel du composant [ NgxBin-ngx-binoxuspay ] de paiement;

Callback de retour de paiement

Lorsque le paiement est enclenché, la bibliothèque reste en attente du statut final du paiement-ci. Ainsi, à la fin du paiement la bibliothèque retourne un callback du type IBinoxusPayOnResponse:

• amount | Type : Double | Montant du paiement;
• currency | Type : String | Devise du paiement;
• binStatus | Statut de l'opération de paiement (BIN000 : l'opération a réussi, mais il faut vérifier le paymentStatus afin de s'assurer que le paiement a réussi , à partir de : BIN001, l'opération à échoué ) | Chaîne de caractère
• • paymentStatus | type : IPaymentStatus | Statut de l'opération de paiement (APPROVED ou FAIL) | Chaîne de caractère
• customRef| Types : String | L'identifiant de votre paiement;
• title | Types : String | Le titre correspondant au status de paiement;
• systemRef | Types : String | L'identifiant du paiement dans Binoxus Pay;

Callback d'erreur de traitement

Lors du traitement, il peut survenir certains types d'erreurs telles que, certains paramètres pour le paiement manquantes. Le format de retour attendu est le suivant :

• message | Chaîne de caractère : décrivant la raison de l'échec;
• title | Chaîne de caractère : le titre de l'échec;

Utilisation

En resumé, la bibliothèque s'utilise par le biais d'un appel appel du composant angular [ NgxBin-ngx-binoxuspay ] :

      // app.component.ts
      import { Component, } from '@angular/core';
      import { IBinoxusPayResponse, NgxBinoxuspayComponent,EApiResponseStatusCode,
      IBinoxusPayBody,IBinoxusPayConfigs } from 'ngx-binoxus-pay';


      @Component({
        selector: 'app-root',
        standalone: true,
        imports: [
          NgxBinoxuspayComponent
        ],
        templateUrl: './app.component.html',
        styleUrl: './app.component.css'
      })
      export class AppComponent {

        paymentBody:IBinoxusPayBody = {
          systemRef: ""
        };

        paymentConfig:IBinoxusPayConfigs = {
          token:'token here'
        }

        canPay:boolean = false;
        startPayment() {

          // INITIALISATION DU PAIEMENT


          // À PARTIR DE LA REPONSE, RECUPÉRER systemRef et token
          // PASSER CES INFORMATION DANS paymentBody et paymentConfig
          this.paymentBody  = {
            systemRef:'systemRef here !'
          };
          this.paymentConfig  = {
            token:'token here !'
          };

          // OUVREZ MAINTENANT LE COMPOSANT DE PAIEMENT
          this.canPay = true;
        }

        paymentResponseFx(response:IBinoxusPayResponse){
          console.log('Payment Response:', response)
          if((response as IBinoxusPayResponse).onResponse) {
            if(response.onResponse.bin_status == EApiResponseStatusCode.BIN000
                && response.onResponse.payment_status == 'APPROVED') {
                // PAYMENT SUCCEED

            } else {
              // PAYMENT FAIL

            }
          } else if((response as IBinoxusPayResponse).onError) {
            // PAYMENT FAIL

          } else {
            // UN HANDLED OPERATION
          }

        }

  <!-- app.component.html -->

  @if(canPay) {
    <NgxBin-ngx-binoxuspay 
        (paymentResponse)="paymentResponseFx($event)" 
          [paymentConfig]="paymentConfig" 
            [paymentBody]="paymentBody"></NgxBin-ngx-binoxuspay>
  }