CinetPay Ionic Framework

Step 1

Prerequisites

You need an account and an active service on CinetPay
Otherwise, please Open a merchant account and create a new service.
Once achieved, please login in your backoffice to find your APIKEY and SITE ID in order to proceed to integration.

Are you ready? Let's integrate!

Step 2

If you do not need to process CinetPay's payment notifications you can jump to the step 3.
Notification page

After each payment, CinetPay notifies you with a link that should be processed on the server side. We will use PHP in the example below: Script index.php in http://mondomaine.com/notify/ (the script must be stored in the url directory 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
    }
    ?>

Step 3

Integration

Add in 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

Create a service with :


    ionic generate service services/cinetpay    

Add in 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();  
      
          });
        }

    }

Payment form

In the payment page : 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>

In the payment page : 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);
    }

Example

Example of usage of SDK Ionic

Find out more