CinetPay Javascript

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

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

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

Before proceeding to the integration, you need to link the seamless SDK to your page :


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

Creating the payment form

CinetPay's payment form includes:
amount : The payment amount
currency : The payment currency, in FCFA
trans_id : The unique transaction ID
designation : The payment label
notify_url : the silent notification link (IPN) after the payment

You can optionally add the following elements:
cel_phone_num : Predefined customer phone number
cpm_phone_prefixe : Country code (for instance 225)
Example :


    <p id="payment_result">
    <form id="info_paiement">
        <input type="hidden"  id="amount" value="10">

        <input type="hidden" id="currency" value="CFA">
        
        <input type="hidden" id="trans_id" value="">
        
        <input type="hidden" id="cpm_custom" value="">

        <input type="hidden" id="designation" value="Achat de chaussure noir">
        
        <button type="submit" id="process_payment">Proceder au Paiement</button>    
    </form>
                

NB: Before displaying the form, you need to register the transaction data in your data base in order to verify their conformity with the customer payment.

SDK Javascript

When the button 'Proceed to Payment' is pushed, we will collect the transaction amount, ID, currency, label and the URL notification in order to initiate the seamless payment on CinetPay. For instance (file payment.js):


    <script>
        CinetPay.setConfig({
                apikey: '174323661757617531bf99c9.80613927',
                site_id: 393509,
                notify_url: 'http://mondomaine.com/notify/'
            });
        var process_payment = document.getElementById('process_payment');
            process_payment.addEventListener('click', function () {
                CinetPay.setSignatureData({
                    amount: parseInt(document.getElementById('amount').value),
                    trans_id: document.getElementById('trans_id').value,
                    currency: document.getElementById('currency').value,
                    designation: document.getElementById('designation').value,
                    custom: document.getElementById('cpm_custom').value
                });
                CinetPay.getSignature();
            });
    </script>

Consult the seamless payment

When the client reach CinetPay gateway, you can consult the progress of the client on CinetPay thanks to the following events:
error : An error occured, the ajax requests or the payment have failed,
paymentPending : Payment is pending
paymentSuccessfull : Payment is complete, valid or cancelled


    <script>
        var result_div = document.getElementById('payment_result');
        CinetPay.on('error', function (e) {
             result_div.innerHTML = '';
             result_div.innerHTML += 'Error code:' + e.code + '
Message::' + e.message; }); CinetPay.on('paymentPending', function (e) { result_div.innerHTML = ''; result_div.innerHTML = 'Paiement en cours
'; result_div.innerHTML += 'code:' + e.code + '
Message::' + e.message; }); CinetPay.on('signatureCreated', function () {}) CinetPay.on('paymentSuccessfull', function (paymentInfo) { if(typeof paymentInfo.lastTime != 'undefined'){ result_div.innerHTML = ''; if(paymentInfo.cpm_result == '00'){ result_div.innerHTML = 'Votre paiement a été validé avec succès :
Montant payé :'+paymentInfo.cpm_amount+'
'; }else{ result_div.innerHTML = 'Une erreur est survenue :'+paymentInfo.cpm_error_message; } } }); </script>

Example

Example of usage of SDK Javascript

Find out more