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.
Attention
Assurez-vous d’avoir un peu d’argent sur votre Mobile Money car vous en aurez besoin tout au long de 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);
}