YPAY JavaScript Payment Gateway SDK

![Version](https://github.com/YTECH-DEV/ypay_js/releases)
![License](LICENSE)

🟢 YPAY – Passerelle de Paiement

YPAY est une passerelle de paiement complète et sécurisée qui combine traitement transactionnel programmatique et interface utilisateur intuitive.
Notre solution permet aux entreprises d’intégrer facilement des paiements sur leurs plateformes grâce à une API unifiée, tout en offrant aux utilisateurs une expérience fluide via l’application mobile YPAY.

🚀 Fonctionnalités principales

- 🔐 Sécurité renforcée : génération d’OTP de paiement via l’application mobile YPAY.
- ⚡ API robuste : intégration simple pour déclencher et valider des transactions.
- 🎨 Interface utilisateur intégrée : widgets prêts à l’emploi pour un parcours de paiement transparent.
- 🌍 Écosystème unifié : une seule plateforme pour gérer vos paiements et vos intégrations.

📱 Expérience Utilisateur

Les utilisateurs génèrent leurs OTP de paiement directement depuis l’application mobile YPAY.
Ces OTP sont ensuite consommés sur les plateformes partenaires qui ont intégré notre API, garantissant une authentification forte et une transaction sécurisée.

---

📦 Installation

$3

html





That's it! No separate CSS file needed. All styles are included in the JavaScript bundle.



$3

html

$3

bash

npm install ypay_js

javascript

// ES6 Modules

import YPAY from 'ypay-sdk';

import PaymentUI from 'ypay-sdk/src/ypay_ui/js/paymentUI.js';



// CommonJS

const { YPAY, Transaction } = require('ypay_js');





$3



Download the latest release from GitHub Releases and include the file in your project:

html





---



🚀 Quick Start



$3

html







    YPAY Payment Demo

$3

javascript

const paymentUI = new PaymentUI(

    'YOUR_API_TOKEN',

    'XOF',

    'en',

    {

        onSuccess: (data) => {

            console.log('Payment successful:', data);

            window.location.href = '/success';

        },

        onFailure: (error) => {

            console.error('Payment failed:', error);

        }

    },

    { onSuccess: true, onFailure: true },

    true,

    'My Shop',

    'https://example.com/logo.png'

);



paymentUI.amount = 10000;

paymentUI.modal = true;

paymentUI.renderForm();





---



📚 Documentation



The project documentation is divided into two main sections:



$3

Complete guide for integrating the payment user interface:

- UI Components

- Button Integration

- Modal & Tab Modes

- Styling & Customization

- Localization

- Configuration Options



$3

Core SDK for direct API integration:

- Transaction Management

- Validation

- Error Handling

- API Reference



---



✨ Features



- ✅ Complete Payment UI - Ready-to-use modal and tab interfaces

- ✅ Multi-Currency Support - XOF, USD, NGN

- ✅ Multi-Language - English and French

- ✅ Responsive Design - Works on all devices

- ✅ Granular Dialog Control - Show/hide success and error dialogs independently

- ✅ Form Validation - Built-in input validation

- ✅ Singleton Pattern - Single instance management

- ✅ Event Callbacks - Success and failure handlers

- ✅ Verbose Logging - Debug mode for development

- ✅ CDN Ready - Available via jsDelivr

- ✅ Minified Bundles - Optimized for production



---



🎨 Styles de Boutons



YPAY fournit plusieurs styles de boutons prêts à l'emploi :

html





---



🔧 Configuration



$3

javascript

new PaymentUI(token, currency, language, handlers, showDialogs, verbose, shopName, logo)





| Paramètre | Type | Défaut | Description |

|-----------|------|---------|-------------|

|

token

 | string | requis | Votre token d'authentification API |

|

currency | string | "XOF"

 | Code de devise (XOF, USD, NGN) |

|

language | string | "en"

 | Langue de l'interface ("en" ou "fr") |

|

handlers | object | {}

 | Callbacks succès/échec |

|

showDialogs | boolean\|object | true

 | Contrôle des dialogues d'alerte UI |

|

verbose | boolean | true

 | Activer le logging console |

|

shopName | string | "Unknown"

 | Nom de votre boutique |

|

logo | string | ""

 | URL de l'image du logo |



$3



Format booléen (hérité) :

javascript

showDialogs: true   // Show all dialogs

showDialogs: false  // Hide all dialogs





Format objet (recommandé) :

Object format (recommended):

javascript

showDialogs: {

    onSuccess: true,   // Show success dialog

    onFailure: false   // Hide error dialog

}





---



📖 Usage Examples



$3

javascript

const payment = new PaymentUI(

    'YOUR_TOKEN',

    'XOF',

    'fr',

    {

        onSuccess: (data) => {

            // Redirect to order confirmation

            window.location.href = '/order-complete?id=' + data.transaction_id;

        },

        onFailure: (error) => {

            // Custom error handling

            showCustomErrorMessage(error);

        }

    },

    { onSuccess: false, onFailure: true }, // Silent success, show errors

    false, // No console logs in production

    'Mon E-Shop',

    '/assets/logo.png'

);



payment.amount = 15000;

payment.modal = true;

payment.renderForm();

$3

javascript

const payment = new PaymentUI(

    'YOUR_TOKEN',

    'XOF',

    'en',

    {

        onSuccess: (data) => {

            console.log('Subscription activated:', data);

            updateSubscriptionStatus('active');

        },

        onFailure: (error) => {

            console.error('Subscription failed:', error);

            showRetryOption();

        }

    },

    true, // Show all dialogs

    true, // Enable verbose logging

    'Premium Subscription'

);



payment.amount = 5000;

payment.modal = true;

payment.renderForm();

$3

javascript

import YPAY from 'ypay-sdk';



const ypay = new YPAY('YOUR_TOKEN', 'XOF', 'My Shop');



await ypay.createTransaction(

    'ABCD-1234',  // Card code

    '123456',     // OTP

    10000,        // Amount

    'en',         // Language

    {

        onSuccess: (data) => console.log('Success:', data),

        onFailure: (error) => console.error('Error:', error)

    }

);





---



🌍 Supported Currencies



- XOF - West African CFA franc (F CFA)

- USD - United States Dollar

- NGN - Nigerian Naira



---



🗣️ Supported Languages



- English (

)

- French (

)



---



🔒 Bonnes Pratiques de Sécurité



1. Ne jamais exposer votre token API dans le code client pour la production

2. Utiliser des variables d'environnement pour les données sensibles

3. Implémenter la validation côté serveur pour les transactions critiques

4. Utiliser HTTPS pour toutes les pages de paiement

5. Nettoyer les entrées utilisateur avant le traitement



---



🏗️ Structure du Projet



ypay-sdk/

├── src/                          # Fichiers source

│   ├── sdk/                      # SDK principal

│   │   ├── enums.js

│   │   ├── patterns.js

│   │   ├── transaction.js

│   │   └── ypay.js

│   └── ypay_ui/                  # Composants UI

│       ├── js/

│       ├── styles/

│       ├── templates/

│       └── assets/

├── dist/                         # Fichiers construits (CDN)

│   ├── ypay-sdk.min.js

│   ├── ypay-ui.min.js

│   ├── ypay-ui.min.css

│   └── ypay-full.min.js

└── documentation/                # Documentation

    ├── payment_ui.md

    └── ypay.md





---



🛠️ Développement



$3

bash

Cloner le dépôt

git clone https://github.com/YTECH-DEV/ypay_js.git

cd ypay_js



Installer les dépendances

npm install



Construire tous les bundles

npm run build:all



Mise à jour de version

npm version patch  # ou minor/major

$3

bash

Construire le projet

npm run build:all



Ouvrir le fichier de test dans le navigateur

open test-local.html

``

---

📊 Support des Navigateurs

- Chrome (dernière version)
- Firefox (dernière version)
- Safari (dernière version)
- Edge (dernière version)
- Navigateurs mobiles (iOS Safari, Chrome Mobile)

---

🤝 Support

- 📚 Documentation : Documentation Complète
- 🔧 API Docs : https://ypay.ytech-bf.com/api/docs
- 📧 Email : infos@ytech-bf.com
- 🐛 Issues : GitHub Issues
- 🌐 Site Web : https://ypay.ytech-bf.com

---

📝 Licence

📦 Historique des Versions

$3

- Version initiale
- Composants UI complets
- Support multi-devises
- Support multi-langues
- Contrôle granulaire des dialogues
- Distribution CDN

---

🚀 Transformez les paiements mobiles pour les entreprises du monde entier

![YPAY Logo](https://ypay.ytech-bf.com)
![YTECH](https://ytech-bf.com)

YPAY JavaScript Payment Gateway SDK

![Version](https://github.com/YTECH-DEV/ypay_js/releases)
![License](LICENSE)

🟢 YPAY – Passerelle de Paiement

🚀 Fonctionnalités principales

📱 Expérience Utilisateur

📦 Installation

$3

html





That's it! No separate CSS file needed. All styles are included in the JavaScript bundle.



$3

html

$3

bash

npm install ypay_js

javascript

// ES6 Modules

import YPAY from 'ypay-sdk';

import PaymentUI from 'ypay-sdk/src/ypay_ui/js/paymentUI.js';



// CommonJS

const { YPAY, Transaction } = require('ypay_js');





$3



Download the latest release from GitHub Releases and include the file in your project:

html





---



🚀 Quick Start



$3

html







    YPAY Payment Demo

$3

javascript

const paymentUI = new PaymentUI(

    'YOUR_API_TOKEN',

    'XOF',

    'en',

    {

        onSuccess: (data) => {

            console.log('Payment successful:', data);

            window.location.href = '/success';

        },

        onFailure: (error) => {

            console.error('Payment failed:', error);

        }

    },

    { onSuccess: true, onFailure: true },

    true,

    'My Shop',

    'https://example.com/logo.png'

);



paymentUI.amount = 10000;

paymentUI.modal = true;

paymentUI.renderForm();





---



📚 Documentation



The project documentation is divided into two main sections:



$3

Complete guide for integrating the payment user interface:

- UI Components

- Button Integration

- Modal & Tab Modes

- Styling & Customization

- Localization

- Configuration Options



$3

Core SDK for direct API integration:

- Transaction Management

- Validation

- Error Handling

- API Reference



---



✨ Features



- ✅ Complete Payment UI - Ready-to-use modal and tab interfaces

- ✅ Multi-Currency Support - XOF, USD, NGN

- ✅ Multi-Language - English and French

- ✅ Responsive Design - Works on all devices

- ✅ Granular Dialog Control - Show/hide success and error dialogs independently

- ✅ Form Validation - Built-in input validation

- ✅ Singleton Pattern - Single instance management

- ✅ Event Callbacks - Success and failure handlers

- ✅ Verbose Logging - Debug mode for development

- ✅ CDN Ready - Available via jsDelivr

- ✅ Minified Bundles - Optimized for production



---



🎨 Styles de Boutons



YPAY fournit plusieurs styles de boutons prêts à l'emploi :

html





---



🔧 Configuration



$3

javascript

new PaymentUI(token, currency, language, handlers, showDialogs, verbose, shopName, logo)





| Paramètre | Type | Défaut | Description |

|-----------|------|---------|-------------|

|

token

 | string | requis | Votre token d'authentification API |

|

currency | string | "XOF"

 | Code de devise (XOF, USD, NGN) |

|

language | string | "en"

 | Langue de l'interface ("en" ou "fr") |

|

handlers | object | {}

 | Callbacks succès/échec |

|

showDialogs | boolean\|object | true

 | Contrôle des dialogues d'alerte UI |

|

verbose | boolean | true

 | Activer le logging console |

|

shopName | string | "Unknown"

 | Nom de votre boutique |

|

logo | string | ""

 | URL de l'image du logo |



$3



Format booléen (hérité) :

javascript

showDialogs: true   // Show all dialogs

showDialogs: false  // Hide all dialogs





Format objet (recommandé) :

Object format (recommended):

javascript

showDialogs: {

    onSuccess: true,   // Show success dialog

    onFailure: false   // Hide error dialog

}





---



📖 Usage Examples



$3

javascript

const payment = new PaymentUI(

    'YOUR_TOKEN',

    'XOF',

    'fr',

    {

        onSuccess: (data) => {

            // Redirect to order confirmation

            window.location.href = '/order-complete?id=' + data.transaction_id;

        },

        onFailure: (error) => {

            // Custom error handling

            showCustomErrorMessage(error);

        }

    },

    { onSuccess: false, onFailure: true }, // Silent success, show errors

    false, // No console logs in production

    'Mon E-Shop',

    '/assets/logo.png'

);



payment.amount = 15000;

payment.modal = true;

payment.renderForm();

$3

javascript

const payment = new PaymentUI(

    'YOUR_TOKEN',

    'XOF',

    'en',

    {

        onSuccess: (data) => {

            console.log('Subscription activated:', data);

            updateSubscriptionStatus('active');

        },

        onFailure: (error) => {

            console.error('Subscription failed:', error);

            showRetryOption();

        }

    },

    true, // Show all dialogs

    true, // Enable verbose logging

    'Premium Subscription'

);



payment.amount = 5000;

payment.modal = true;

payment.renderForm();

$3

javascript

import YPAY from 'ypay-sdk';



const ypay = new YPAY('YOUR_TOKEN', 'XOF', 'My Shop');



await ypay.createTransaction(

    'ABCD-1234',  // Card code

    '123456',     // OTP

    10000,        // Amount

    'en',         // Language

    {

        onSuccess: (data) => console.log('Success:', data),

        onFailure: (error) => console.error('Error:', error)

    }

);





---



🌍 Supported Currencies



- XOF - West African CFA franc (F CFA)

- USD - United States Dollar

- NGN - Nigerian Naira



---



🗣️ Supported Languages



- English (

)

- French (

)



---



🔒 Bonnes Pratiques de Sécurité



1. Ne jamais exposer votre token API dans le code client pour la production

2. Utiliser des variables d'environnement pour les données sensibles

3. Implémenter la validation côté serveur pour les transactions critiques

4. Utiliser HTTPS pour toutes les pages de paiement

5. Nettoyer les entrées utilisateur avant le traitement



---



🏗️ Structure du Projet



ypay-sdk/

├── src/                          # Fichiers source

│   ├── sdk/                      # SDK principal

│   │   ├── enums.js

│   │   ├── patterns.js

│   │   ├── transaction.js

│   │   └── ypay.js

│   └── ypay_ui/                  # Composants UI

│       ├── js/

│       ├── styles/

│       ├── templates/

│       └── assets/

├── dist/                         # Fichiers construits (CDN)

│   ├── ypay-sdk.min.js

│   ├── ypay-ui.min.js

│   ├── ypay-ui.min.css

│   └── ypay-full.min.js

└── documentation/                # Documentation

    ├── payment_ui.md

    └── ypay.md





---



🛠️ Développement



$3

bash

Cloner le dépôt

git clone https://github.com/YTECH-DEV/ypay_js.git

cd ypay_js



Installer les dépendances

npm install



Construire tous les bundles

npm run build:all



Mise à jour de version

npm version patch  # ou minor/major

$3

bash

Construire le projet

npm run build:all



Ouvrir le fichier de test dans le navigateur

open test-local.html

``

---

📊 Support des Navigateurs

- Chrome (dernière version)
- Firefox (dernière version)
- Safari (dernière version)
- Edge (dernière version)
- Navigateurs mobiles (iOS Safari, Chrome Mobile)

---

🤝 Support

📝 Licence

📦 Historique des Versions

$3

- Version initiale
- Composants UI complets
- Support multi-devises
- Support multi-langues
- Contrôle granulaire des dialogues
- Distribution CDN

---

🚀 Transformez les paiements mobiles pour les entreprises du monde entier

![YPAY Logo](https://ypay.ytech-bf.com)
![YTECH](https://ytech-bf.com)

ypay-api

YPAY JavaScript Payment Gateway SDK

🟢 YPAY – Passerelle de Paiement

🚀 Fonctionnalités principales

📱 Expérience Utilisateur

📦 Installation

$3

$3

$3

$3

🚀 Quick Start

$3

$3

📚 Documentation

$3

$3

✨ Features

🎨 Styles de Boutons

🔧 Configuration

$3

$3

📖 Usage Examples

$3

$3

$3

🌍 Supported Currencies

🗣️ Supported Languages

🔒 Bonnes Pratiques de Sécurité

🏗️ Structure du Projet

🛠️ Développement

$3

Cloner le dépôt

Installer les dépendances

Construire tous les bundles

Mise à jour de version

$3

Construire le projet

Ouvrir le fichier de test dans le navigateur

📊 Support des Navigateurs

🤝 Support

📝 Licence

📦 Historique des Versions

$3

ypay-api

YPAY JavaScript Payment Gateway SDK

🟢 YPAY – Passerelle de Paiement

🚀 Fonctionnalités principales

📱 Expérience Utilisateur

📦 Installation

$3

$3

$3

$3

🚀 Quick Start

$3

$3

📚 Documentation

$3

$3

✨ Features

🎨 Styles de Boutons

🔧 Configuration

$3

$3

📖 Usage Examples

$3

$3

$3

🌍 Supported Currencies

🗣️ Supported Languages

🔒 Bonnes Pratiques de Sécurité

🏗️ Structure du Projet

🛠️ Développement

$3

Cloner le dépôt

Installer les dépendances

Construire tous les bundles

Mise à jour de version

$3

Construire le projet