ypay-api

v1.0.0

Published

15 days ago

YPAY Payment API

0High
0Medium
0Low

ytech-bf

YPAY JavaScript Payment Gateway SDK

🟢 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

Via CDN (Recommended) - Single File Solution ⭐

<!-- Full Bundle (SDK + UI + Styles) - Everything in one file! -->
<script src="https://cdn.jsdelivr.net/gh/YTECH-DEV/ypay_js@master/dist/ypay-full.min.js"></script>

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

📋 Composants Alternatifs

<!-- SDK Only (for custom UI) -->
<script src="https://cdn.jsdelivr.net/gh/YTECH-DEV/ypay_js@master/dist/ypay-sdk.min.js"></script>

<!-- UI Only (includes all styles, requires SDK) -->
<script src="https://cdn.jsdelivr.net/gh/YTECH-DEV/ypay_js@master/dist/ypay-sdk.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/YTECH-DEV/ypay_js@master/dist/ypay-ui.min.js"></script>

Via NPM

npm install ypay_js

// 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');

Manual Download

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

<script src="path/to/dist/ypay-full.min.js"></script>

🚀 Quick Start

Simple Payment Button

<!DOCTYPE html>
<html>
<head>
    <title>YPAY Payment Demo</title>
</head>
<body>
    <!-- Automatic payment button -->
    <button class="payment_btn btn_filled" data-amount="5000" data-modal="true">
        Pay 5000 XOF
    </button>

    <!-- Single script includes everything: UI, SDK, and styles -->
    <script src="https://cdn.jsdelivr.net/gh/YTECH-DEV/ypay_js@master/dist/ypay-full.min.js"></script>
    <script>
        // Initialize PaymentUI
        const paymentUI = new PaymentUI(
            'YOUR_API_TOKEN',
            'XOF',
            'en',
            {
                onSuccess: (data) => alert('Payment successful!'),
                onFailure: (error) => alert('Payment failed!')
            },
            { onSuccess: true, onFailure: true },
            true,
            'My Shop'
        );
    </script>
</body>
</html>

🔧 Paiement Programmatique

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:

Payment UI Documentation

Complete guide for integrating the payment user interface:

UI Components
Button Integration
Modal & Tab Modes
Styling & Customization
Localization
Configuration Options

YPAY SDK Documentation

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 :

<!-- Default button -->
<button class="payment_btn" data-amount="5000" data-modal="true"></button>

<!-- Outlined variant -->
<button class="payment_btn btn_outlined" data-amount="5000" data-modal="true"></button>

<!-- Filled variant -->
<button class="payment_btn btn_filled" data-amount="5000" data-modal="true"></button>

<!-- Icon only -->
<button class="payment_btn btn_icon" data-amount="5000" data-modal="true"></button>

<!-- Custom text button -->
<button class="custom_payment_btn btn_filled" data-amount="5000" data-modal="true">
    Pay Now
</button>

🔧 Configuration

Constructeur PaymentUI

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 |

Configuration des Dialogues

Format booléen (hérité) :

showDialogs: true   // Show all dialogs
showDialogs: false  // Hide all dialogs

Format objet (recommandé) : Object format (recommended):

showDialogs: {
    onSuccess: true,   // Show success dialog
    onFailure: false   // Hide error dialog
}

📖 Usage Examples

Example 1: E-commerce Checkout

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();

Example 2: Subscription Payment

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();

Example 3: Direct SDK Usage (No UI)

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 (en)
French (fr)

🔒 Bonnes Pratiques de Sécurité

Ne jamais exposer votre token API dans le code client pour la production
Utiliser des variables d'environnement pour les données sensibles
Implémenter la validation côté serveur pour les transactions critiques
Utiliser HTTPS pour toutes les pages de paiement
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

Construire depuis la Source

# 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

Test Local

# 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 : [email protected]
🐛 Issues : GitHub Issues
🌐 Site Web : https://ypay.ytech-bf.com

📝 Licence

Voir le fichier LICENSE pour plus de détails.

📦 Historique des Versions

v1.0.0 (Actuelle)

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