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.
Attention
Please ensure that your Mobile Money wallet has a positive balance, as you will need to use it during 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);
}