YPAY Payment API #

API de paiement simple et multiplateforme pour systèmes en ligne.

ypay_api est un SDK Flutter léger et facile à intégrer pour accepter les paiements. Prend en charge Android, Web et Windows.

Points clés :

• Multiplateforme : Android, Web, Windows
• Intégration simple et configuration minimale
• Interface flexible : afficher un bouton de paiement ou rendre la vue
• Callbacks pour gestion des succès et des erreurs
• Apparence et localisation personnalisables

Fonctions #

• Gestion de paiement de bout en bout : initialiser le SDK (YPAY.initialize()), afficher l'UI et recevoir des callbacks clairs (onSuccess, onError) ; dialogue de succès intégré optionnel.
• Intégration minimale : dépendance unique et initialisation simple — appelez YPAY.getButton() ou YPAY.getWidget() pour intégrer ou ouvrir le flux de paiement.
• Deux modes d'affichage :
  • Button — afficher le bouton comme widget.
  • Widget — afficher la vue de paiement comme widget.
• Prise en charge multiplateforme : Android, Web et Windows.
• Personnalisation flexible.
• Comportement robuste : flux asynchrone non bloquant, gestion d'erreurs configurable et faible empreinte.

Installation #

Ajoutez à votre pubspec.yaml :

dependencies:
  ypay_api: ^1.0.5

Utilisation #

Importez le package :

import 'package:ypay_api/ypay_api.dart';

Pour l'integration android #

Ajouter cette permissions dans le fichier android/app/src/main/AndroidManifest.xml

  <application
  ...
  </application>
  ...
  <uses-permission android:name="android.permission.INTERNET"/>

Modifier la version de compileSdk dans le fichier android/app/src/build.gradle

compileSdk >= 35

Inialisation du SDK #

1. Initialiser YPAY dans main.dart #

Placez l'initialisation du SDK avant runApp() (généralement dans main) afin que le SDK soit prêt au démarrage de l'interface.

import 'package:flutter/material.dart';
import 'package:ypay_api/ypay_api.dart';

void main() async {
 WidgetsFlutterBinding.ensureInitialized();

 await YPAY.initialize(
   config: YPAYConfig(
     clientId: 'YOUR_CLIENT_ID',   // String: client id from YPAY (required)
     title: 'My App',             // String: app title shown in payment UI (optional)
     logo:null ,                  // Image: logo shown in payment UI (optional)
     amount: 12.34,               // double: amount to pay (optional)
     currency: Currency.xof,             // Currency: currency code (default depends on SDK)
     languageCode: Language.en,          // Language: language code (default: 'en')  | 'en' | 'fr' | 
     contentWidth: 400.0,         // double: max width for BOX/modal (optional)
     contentHeight: null,        // double: max height for content (optional)
     showSuccessDialog: true,     // bool: show built-in success dialog (default: true)
     showDebug: false,            // bool: enable debug logs (default: false)
   ),
 );

 runApp(const MyApp());
}

Arguments de YPAYConfig

Remarques important #

• Pour obtenir le clientId, rendez-vous sur Ypay et créez un compte. Ensuite, connectez-vous sur Ypay panel et créez un projet; une fois le projet créé, le clientId sera généré pour ce projet.
• Si votre clientId est invalide, vous ne pourrez afficher ni le button ypay ni la vue de paiement.
• Rassurer vous que YPAY.initialize() est appelé avant d'afficher l'UI de paiement ou le bouton YPAY. Sinon vous obtiendrez une erreur. Pour cet effet, nous vous recommandons de l'initialiser dans la fonction main().
• Ajustez contentWidth/contentHeight pour des dispositions responsive ou omettez-les pour utiliser les valeurs par défaut du SDK.
• Utilisez showDebug: true uniquement pendant le développement.

Exemples d'affichage du button YPAY #

Cas generale #

Container(
  child: YPAY.getButton(
    onTapMode: // comportement lorsque le bouton est pressé (newPage, dialog)
    btnType:  // type de bouton (outline, filled, icon)
    amount:  // montant à payer (écrase le `config amount`)
    headerRadius: 10.0, // arondir l'entete
    onSuccess: (Transaction payload) {} // callback en cas de succès
    onError: (String error) {} // callback en cas d'erreur
  ),
) ,

Types de boutons et action #

• Bouton Outline qui affiche un dialogue lorsqu'il est pressé

Container(
  child: YPAY.getButton(
    onTapMode: OnTapMode.dialog,
    btnType:  BtnType.outline,
    amount:  10.0,
    onSuccess: (Transaction payload) {} // callback on success
    onError: (String error) {} // callback on error
  ),
) ,

• Bouton filled qui redirige vers une nouvelle page lorsqu'il est pressé

Container(
  child: YPAY.getButton(
    onTapMode: OnTapMode.newPage,
    btnType:  BtnType.filled,
    amount:  10.0,
    onSuccess: (Transaction payload) {} // callback on success
    onError: (String error) {} // callback on error
  ),
) ,

• Bouton Icon qui affiche un dialogue lorsqu'il est pressé

Container(
  child: YPAY.getButton(
    onTapMode: OnTapMode.dialog,
    btnType:  BtnType.icon,
    amount:  10.0,
    onSuccess: (Transaction payload) {} // callback on success
    onError: (String error) {} // callback on error
  ),
) ,

Images #

Intégrer la vue de paiement #

Container(
  child: YPAY.getWidget(
    amount:  // montant à payer (écrase le `config amount`)
    headerRadius: 10.0, // arondir l'entete
    onSuccess: (value) {} // callback en cas de succès
    onError: (value) {} // callback en cas d'erreur
  ),
) ,

Image #

🧑‍🤝Développé par YAANGRE TECH SARL (YTECH) #

• 📞 +226 65 38 44 73
• 📞 +226 07 77 53 31