Intégration CinetPay SDK-SEAMLESS


Contexte

Aujourd’hui, CinetPay met à disposition de ses marchands un guichet de paiement fonctionnant par appel API. Cependant, pour élargir son pôle d’intégration marchand, elle donne la possibilité d’une intégration spéciale relativement à chaque langage de programmation. En effet, le SDK Seamless est l’un de ses outils propre au Javascript, facilitant l’intégration du guichet.

Ainsi, le marchand pourra utiliser celui-ci dans du code Javascript, lui permettant de faire appel au guichet de CinetPay.
La suite du document, montrera les différentes étapes d’utilisation du SDK Seamless dans un projet.

LES ETAPES

L'intégration du seamless se fait en 5 étapes:

seamless

1) IMPORTATION DU SDK SEAMLESS

Avant de commencer, il faut lier le seamless SDK à votre page. Cela se fait dans la balise head de votre page web :

<head>

    <script src="https://cdn.cinetpay.com/seamless/main.js" type="text/javascript"></script>

</head>

2) CREATION DU FORMULAIRE

Le formulaire de paiement CinetPay est constiué des éléments disponibles dans la section API DE PAIEMENT. Cliquer pour accéder.

3) INITIALISATION DES PARAMETRES

En vue d’invoquer le guichet, certains éléments sont nécessaires à la reconnaissance du marchand :

  • apikey : L’identifiant du marchand
  • site_id: L'identifiant du service
  • mode: PRODUCTION ou SANDBOX (Facultatif - Par défaut PRODUCTION)
  • type: WEB ou MOBILE (Facultatif - Par défaut WEB)
  • notify_url: URL de notification de paiement valide
 CinetPay.setConfig({
    apikey: 'YOUR_API_KEY',
    site_id: YOUR_SITE_ID,
    mode: 'PRODUCTION',
    notify_url: 'https://mondomaine.com/notify/'
});

4) ENVOI DES DONNEES

Pour que le guichet puisse se charger et s’afficher chez l’acheteur, il suffit de passer au SDK les données du paiement. En effet, sur une action de l’acheteur, vous fournirez les données du formulaire :

CinetPay.getCheckout({
    transaction_id: 'YOUR_TRANSACTION_ID',
    amount: 100,
    currency: 'XOF',
    channels: 'ALL',
    description: 'YOUR_PAYMENT_DESCRIPTION',
    //Fournir ces variables pour le paiements par carte bancaire
    customer_name:"Joe",//Le nom du client
    customer_surname:"Down",//Le prenom du client
    customer_email: "[email protected]",//l'email du client
    customer_phone_number: "088767611",//l'email du client
    customer_address : "BP 0024",//addresse du client
    customer_city: "Antananarivo",// La ville du client
    customer_country : "CM",// le code ISO du pays
    customer_state : "CM",// le code ISO l'état
    customer_zip_code : "06510", // code postal
});

5) ATTENTE DU RETOUR DE PAIEMENT

Format de données retourner au marchand dans l’intégration après chaque paiement :

{
          "amount": "100", 
          "currency": "XOF", 
          "status": "ACCEPTED", 
          "payment_method": "FLOOZ", 
          "description": "Description", 
          "metadata": "ABIDJAN", 
          "operator_id": "8211027064102", 
         "payment_date": "2021-10-27 09:47:09"
}


APERCU

APERCU DU SEAMLESS VERSION WEB

seamless


FERMETURE DU SEAMLESS

A la fermeture un guichet, un message est affiché au bout de 3 secondes puis la fermeture du guichet s'ensuit.

seamless


HORS CONNEXION

Lorsque le seamless détecte un problème de connexion internet à l’initialisation, un message est affiché au bout de 3 secondes puis la fermeture du guichet s'ensuit.

seamless


EXEMPLE D'INTEGRATION

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.cinetpay.com/seamless/main.js"></script>
    <style>
        .sdk {
            display: block;
            position: absolute;
            background-position: center;
            text-align: center;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
    <script>
        function checkout() {
            CinetPay.setConfig({
                apikey: '',//   YOUR APIKEY
                site_id: '',//YOUR_SITE_ID
                notify_url: 'http://mondomaine.com/notify/',
                mode: 'PRODUCTION'
            });
            CinetPay.getCheckout({
                transaction_id: Math.floor(Math.random() * 100000000).toString(),
                amount: 100,
                currency: 'XOF',
                channels: 'ALL',
                description: 'Test de paiement',   
                 //Fournir ces variables pour le paiements par carte bancaire
                customer_name:"Joe",//Le nom du client
                customer_surname:"Down",//Le prenom du client
                customer_email: "[email protected]",//l'email du client
                customer_phone_number: "088767611",//l'email du client
                customer_address : "BP 0024",//addresse du client
                customer_city: "Antananarivo",// La ville du client
                customer_country : "CM",// le code ISO du pays
                customer_state : "CM",// le code ISO l'état
                customer_zip_code : "06510", // code postal

            });
            CinetPay.waitResponse(function(data) {
                if (data.status == "REFUSED") {
                    if (alert("Votre paiement a échoué")) {
                        window.location.reload();
                    }
                } else if (data.status == "ACCEPTED") {
                    if (alert("Votre paiement a été effectué avec succès")) {
                        window.location.reload();
                    }
                }
            });
            CinetPay.onError(function(data) {
                console.log(data);
            });
        }
    </script>
</head>
<body>
    </head>
    <body>
        <div class="sdk">
            <h1>SDK SEAMLESS</h1>
            <button onclick="checkout()">Checkout</button>
        </div>
    </body>
</html>