La solution INO Pay permet entre autres le paiement par un utilisateur via un formulaire disponible sur le web. Ce formulaire peut être directement intégré dans un site internet déjà existant et met à disposition des options de personnalisation. Voici ci-dessous les étapes d’installation du plugin web INO Pay, ainsi que ses diverses options et leur utilisation.
I. Téléchargement du plugin
1) Se connecter au Maker et ouvrir la page Paramètres du module de paiement interne concerné.
2) Passer en mode édition, activer le canal de paiement « Web » et sauvegarder.
3) Un bouton « Ouvrir le manuel d’intégration » apparaît dans le bloc du canal « Web ». Cliquer sur ce bouton.
4) Sélectionner ensuite le code source et le copier.
II. Installation sur un site internet
Une fois le plugin JavaScript copié,
1) Coller le code source copié au bas de la page HTML destinée à accueillir le formulaire de paiement – juste avant la balise fermante .
2) Créer une div avec un id unique dans la page HTML destinée à accueillir le formulaire de paiement.
Exemple :
<div id=« pay« >div>
3) Paramétrer le module de paiement en modifiant le code source collé :
3.a) Tout à la fin du code source collé, remplacer « pay » par l’id de votre div définie en 2). Requis. Doit être une chaîne de caractères.
var div = « pay« ;
3.b) Juste avant « var div = « pay »; », remplacer « #### » par l’id de la transaction à payer. Requis. Doit être une chaîne de caractères.
var transactionId = « 7a35bdb0-1f01-492e-9e84-0af77445397c »;
3.c) Modifier ensuite les options de personnalisation du formulaire de paiement (Facultatif). Doit être un objet JavaScript. Pour cela, suivre les instructions de la partie III.
var options = {
title: {
fr: ‘Abonnement Collecte IN’,
en: ‘IN Collect Subscription’
},
mainColor: ‘blue’
};
III. Options de personnalisation
1) Synthèse de la liste des options de personnalisation
Toutes les options sont facultatives et peuvent être combinées.
|
Options |
Description |
| lang | Définit la langue à utiliser par le module de paiement |
| mainColor | Définit la couleur principale du module de paiement. |
| title | Définit le titre du module de paiement. |
| editableAmount | Définit si l’utilisateur peut modifier ou non le montant de la transaction. |
| logoUrl | Définit l’url du logo à afficher dans le module de paiement. |
| onSuccessCb | Fonction JavaScript de callback à appeler en cas de réussite du paiement. |
| onCancelCb | Fonction JavaScript de callback à appeler en cas d’annulation du paiement par l’utilisateur. |
| onErrorCb | Fonction JavaScript de callback à appeler en cas d’échec du paiement. |
2) Langue
lang : Définit la langue à utiliser par le module de paiement.
Valeurs possibles : Une des deux chaînes de caractères suivantes
- « fr » : Français (valeur par défaut)
- « en » : Anglais
Exemple :
var options = {
lang: ‘fr’
};
3) Couleur principale
mainColor : Définit la couleur principale du module de paiement.
Valeurs possibles : En chaîne de caractères, une couleur CSS (code RGB, hexadécimal, etc…).
Valeur par défaut (rouge ino cx) : « rgb(253, 106, 94)«
Exemple :
var options = {
mainColor: ‘rgb(253, 106, 94)’
};
4) Titre
title : Définit le titre du module de paiement.
Valeurs possibles : Un objet JavaScript avec une ou bien deux des propriétés suivantes
{
fr: « Titre du module en français »,
en: « Module title in English »
}
Exemple :
var options = {
title: {
fr: ‘Abonnement mensuel’,
en: ‘Monthly Subscription’}
};
5) Montant éditable
editableAmount : Définit si l’utilisateur peut ou non modifier le montant de la transaction.
Valeurs possibles : Un Booléen (true, false)
Valeur par défaut (non) : false
Exemple :
var options = {
editableAmount: true
};
6) URL du logo
logoUrl : Définit l’URL du logo à afficher dans le module de paiement.
Valeurs possibles : En chaîne de caractères, l’adresse de l’image, en chemin relatif ou absolu.
« https://ino.global/styles/images/logos/ino-telecom-logo.png«
Exemple :
var options = {
logoUrl: ‘./styles/images/eko.png’
};
7) Callback en cas de succès du paiement
onSuccessCb : Fonction JavaScript de callback à appeler en cas de réussite du paiement par l’utilisateur.
Valeurs possibles : Une fonction JavaScript préalablement définie.
Exemple :
var goToSuccessPage = function () {
location.href = ‘http://ino.global’;
}; var options = {
onCancelCb: goToSuccessPage
};
8) Callback en cas d’annulation du paiement
onCancelCb : Fonction JavaScript de callback à appeler en cas d’annulation du paiement par l’utilisateur. À tout moment pendant le paiement, l’utilisateur peut cliquer sur le bouton annuler.
Valeurs possibles : Une fonction JavaScript préalablement définie.
Exemple :
var returnToHomePage = function () {
location.href = ‘http://ino.global’;
}; var options = {
onCancelCb: returnToHomePage
};
9) Callback en cas d’échec du paiement
onErrorCb : Fonction JavaScript de callback à appeler en cas d’échec du paiement par l’utilisateur.
Valeurs possibles : Une fonction JavaScript préalablement définie.
Exemple :
var logout = function () {
location.href = ‘http://ino.global’;
}; var options = {
onErrorCb: logout
};