CinetPay Ionic Framework

Etape 1

Pré-requis

Vous devez avoir un compte et un service valide sur CinetPay
Sinon, Veuillez Créer votre compte et votre premier service marchand.
Une fois cela fait, vous devez récupérer votre APIKEY et votre SITE ID dans votre interface une fois connecté avant de continuer votre intégration.

Vous êtes prêts ? c'est parti !

Etape 2

Si votre service ne neccessite pas un traitement des notifications de paiement de CinetPay, vous pouvez passer directement à l'etape 3, par exemple les services de don.
page de notification

A chaque paiement, CinetPay vous notifie via un lien de notification, nous vous conseillons de toujours le traiter côté serveur. Nous allons utiliser PHP dans ce cas de figure : Script index.php dans http://mondomaine.com/notify/ (le script doit se trouver dans le repertoire de votre url notify_url) ;


    <?php
    if (isset($_POST['cpm_trans_id'])) {
        // SDK PHP de CinetPay 
        require_once __DIR__ . '/cinetPay.php';
        require_once __DIR__ . '/commande.php';
    
        //La classe commande correspond à votre colonne qui gère les transactions dans votre base de données
        $commande = new Commande();
        try {
            // Initialisation de CinetPay et Identification du paiement
            $id_transaction = $_POST['cpm_trans_id'];
            $apiKey = _VOTRE_APIKEY_;
            $site_id = _VOTRE_SITEID_;
            $plateform = "TEST"; // Valorisé à PROD si vous êtes en production
            $CinetPay = new CinetPay($site_id, $apiKey, $plateform);
            // Reprise exacte des bonnes données chez CinetPay
            $CinetPay->setTransId($id_transaction)->getPayStatus();
            $cpm_site_id = $CinetPay->_cpm_site_id;
            $signature = $CinetPay->_signature;
            $cpm_amount = $CinetPay->_cpm_amount;
            $cpm_trans_id = $CinetPay->_cpm_trans_id;
            $cpm_custom = $CinetPay->_cpm_custom;
            $cpm_currency = $CinetPay->_cpm_currency;
            $cpm_payid = $CinetPay->_cpm_payid;
            $cpm_payment_date = $CinetPay->_cpm_payment_date;
            $cpm_payment_time = $CinetPay->_cpm_payment_time;
            $cpm_error_message = $CinetPay->_cpm_error_message;
            $payment_method = $CinetPay->_payment_method;
            $cpm_phone_prefixe = $CinetPay->_cpm_phone_prefixe;
            $cel_phone_num = $CinetPay->_cel_phone_num;
            $cpm_ipn_ack = $CinetPay->_cpm_ipn_ack;
            $created_at = $CinetPay->_created_at;
            $updated_at = $CinetPay->_updated_at;
            $cpm_result = $CinetPay->_cpm_result;
            $cpm_trans_status = $CinetPay->_cpm_trans_status;
            $cpm_designation = $CinetPay->_cpm_designation;
            $buyer_name = $CinetPay->_buyer_name;
    
            // Recuperation de la ligne de la transaction dans votre base de données
            $commande->setTransId($id_transaction);
            $commande->getCommandeByTransId();
            // Verification de l'etat du traitement de la commande
            if ($commande->getStatut() == '00') {
                // La commande a été déjà traité
                // Arret du script
                die();
            }
            // Dans le cas contrait, on remplit notre ligne des nouvelles données acquise en cas de tentative de paiement sur CinetPay
            $commande->setMethode($payment_method);
            $commande->setPayId($cpm_payid);
            $commande->setBuyerName($buyer_name);
            $commande->setSignature($signature);
            $commande->setPhone($cel_phone_num);
            $commande->setDatePaiement($cpm_payment_date . ' ' . $cpm_payment_time);
    
            // On verifie que le montant payé chez CinetPay correspond à notre montant en base de données pour cette transaction
            if ($commande->getMontant() == $cpm_amount) {
                // C'est OK : On continue le remplissage des nouvelles données
                $commande->setErrorMessage($cpm_error_message);
                $commande->setStatut($cpm_result);
                $commande->setTransStatus($cpm_trans_status);
                if($cpm_result == '00'){
                    //Le paiement est bon
                    // Traitez et delivrez le service au client
                }else{
                    //Le paiement a échoué
                }
            } else {
                //Fraude : montant payé ' . $cpm_amount . ' ne correspond pas au montant de la commande
                $commande->setStatut('-1');
                $commande->setTransStatus('REFUSED');
            }
            // On met à jour notre ligne
            $commande->update();
        } catch (Exception $e) {
            echo "Erreur :" . $e->getMessage();
            // Une erreur s'est produite
        }
    } else {
        // Tentative d'accès direct au lien IPN
    }
    ?>

Etape 3

Intégration

Ajouter dans ionicApp/src/index.html


    <script charset="utf-8" src="https://www.cinetpay.com/cdn/seamless_sdk/latest/cinetpay.prod.min.js" type="text/javascript"></script>

Service CinetPay

Créer un service avec :


    ionic generate service services/cinetpay    

Ajouter dans ionicApp/src/app/services/cinetpay.service.ts


    import { Injectable } from '@angular/core';

    declare var CinetPay;
    
    @Injectable({
        providedIn: 'root'
    })   
    export class CinetpayService {

        private CinetPay: any;

        private apikey: string = 'YOUR_API_KEY';
        private site_id: number = YOUR_SITE_ID;
        private notify_url: string = 'https://YOUR_NOTIFY_URL';
      
        private trans_id: any; //Your transaction id
        private cpm_custom: any;
        private designation: any;
        private currency: string = 'CFA';

        constructor() {}

        seamless(amount : number){
          return new Promise(resolve => {

            //Generation d'une id de transaction
            this.trans_id = window.performance && window.performance.now && window.performance.timing && window.performance.timing.navigationStart ? window.performance.now() + window.performance.timing.navigationStart : Date.now();


            CinetPay.setConfig({
              apikey: this.apikey,
              site_id: this.site_id,
              notify_url: this.notify_url
            });
            //Lorsque la signature est généré
            CinetPay.on('signatureCreated', function (token) {
                //console.log('Tocken généré: ' + token);
            });
            CinetPay.on('paymentPending', function (e) {
                //console.log('code:' + e.code + 'Message::' + e.message);
            });
            CinetPay.on('error', function (e) {
                //console.log('Error code:' + e.code + 'Message::' + e.message);
            });
            CinetPay.on('paymentSuccessfull', function (paymentInfo) {
              resolve(paymentInfo);
              /*
                //if payment is successfull paymentInfo.cpm_result == '00'
                  if (typeof paymentInfo.lastTime != 'undefined') {
                    if (paymentInfo.cpm_result == '00') {
                    }
                  }
              */ 
      
            });
      
            CinetPay.setSignatureData({
              amount: parseInt(amount),
              trans_id: this.trans_id,
              currency: this.currency,
              designation: this.designation,
              custom: this.cpm_custom
            });
      
            CinetPay.getSignature();  
      
          });
        }

    }

Formulaire de paiement

Dans la page de paiement : Ex : ionicApp/src/app/home/home.page.html


    <ion-item>
        <ion-label position="floating">Montant à payer</ion-label>
        <ion-input type="number" placeholder="Ex : 200" [(ngModel)]="amount" color="success" min="100"></ion-input>
    </ion-item >
    <ion-button color="success" expand="block" shape="round" mode="ios" (click)="pay()">Payer</ion-button>

Dans la page de paiement : Ex : ionicApp/src/app/home/home.page.ts


    
    amount : number;

    constructor(private cinetpay : CinetpayService) {}

    private async pay(){
        var result = await this.cinetpay.seamless(this.amount);
        console.log(result);
    }

Exemple

Exemple d'utilisation du SDK Ionic

En savoir plus