SDK Flutter

Le kit de développement (SDK)  KKiaPay pour la plateforme Flutter  est conçu afin de permettre l'intégration de notre plugin  KKiaPay au sein de votre application mobile Flutter de la manière la plus simplifiée possible.
Après avoir créé votre compte KKiaPay, sur la plateforme kkiapay.me, vous aurez besoin de créer une instance de KKiaPay en procédant comme suit :
1.
Installer le SDK Flutter de KKiaPay
Pour installer ce plugin il vous suffit d’ajouter kkiapay_flutter_sdk à votre fichier pubspec.yml contenu dans votre projet.
Guide pratique pour l'installation d'un package avec Flutter : Installation d'un package.
1
   dependencies:
2
     flutter:
3
       sdk: flutter
4
     kkiapay_flutter_sdk:
Copied!
    2. Importer le package KKiaPay
1
 import 'package:kkiapay_flutter_sdk/kkiapayWebview.dart'
Copied!
    3. Créer une instance de KKiaPay
Paramètres
Type
Description
amount
Numeric
Le montant à payer en FCFA
phone
String
Un numéro mobile money valide (MTN ou MOOV)
Ex: 22997000000
Ex: 22995000000
name
String
Les nom et prénoms de l’initiateur du paiement
apikey
String
La clé publique liée à votre compte KKiaPay​
sandbox
Boolean
Vous permet de basculer de l'environnement de test à l'environnement de  production. La valeur true de cet attribut signifie que vous êtes en environnement de test​
data
String
La donnée ou information liée à une transaction et interprétable par votre système.
successCallback
Function
La fonction de callback appelée uniquement lorsque le paiement a réussi
1
final kkiapay = Kkiapay(
2
    @required sucessCallback: Function,
3
    @required amount: String,
4
    @required apikey: String,
5
    sandbox: bool,
6
    data: String,
7
    phone: String,
8
    name: String,
9
    theme: dynamic
10
);
Copied!
La fonction successCallback appelée à la fin d'un paiement de type Succès peut être utilisée afin de notifier au backend que la transaction s'est correctement déroulée; rediriger l’utilisateur vers une autre vue de l'application mobile; ou générer une facture. Tout dépend, en effet, du workflow de l'application mobile. Les paramètres de la fonction sont :
Le contexte (context) du widget de paiement
La réponse (response) qui est un objet comportant le montant (amount) et l'identifiant de la transaction (transactionId)
1
 void successCallback(response, context) {}
Copied!
Afin de procéder à la vérification d'une opération de paiement choisissez de configurer une série de webhooks en vous rendant sur votre compte KKiaPay.
    4. Passer l'instance de KKiaPay créée à votre application
Afin d'ajouter le bouton de paiement de KKiaPay dans votre application mobile il vous faudra procéder à la création d’un widget Flutter KkiapaySample. Un clic sur ledit bouton appellera l'instance de KKiaPay défini plus haut et déclenchera l’affichage du widget de KKiaPay avec les informations de paiement spécifiées.
1
 class KkiapaySample extends StatelessWidget {
2
   const KkiapaySample({
3
     Key key,
4
   }) : super(key: key);
5
 
6
   @override
7
   Widget build(BuildContext context) {
8
     return Center(
9
       child: ButtonTheme(
10
         minWidth: 250.0,
11
         height: 60.0,
12
         child: FlatButton(
13
           color: Color(0xFFE30E25),
14
           child: Text(
15
             'Pay Now',
16
             style: TextStyle(color: Colors.white),
17
           ),
18
           onPressed: () {
19
             Navigator.push(
20
               context,
21
               MaterialPageRoute(builder: (context) => kkiapay), 
22
             );
23
           },
24
         ),
25
       ),
26
     );
27
   }
28
 } 
Copied!
Remplacez l’attribut body de votre starter Flutter App par le Widget de KkiapaySample implémenté ci-dessous :
1
class App extends StatelessWidget {
2
   @override
3
   Widget build(BuildContext context) {
4
     return MaterialApp(
5
         home: Scaffold(
6
       appBar: AppBar(
7
         title: Text('Kkiapay Sample'),
8
         centerTitle: true,
9
       ),
10
       body: KkiapaySample(),
11
     ));
12
   }
13
 }
Copied!
Exemple d'utilisation
1
import 'package:example/screens/successScreen.dart';
2
import 'package:flutter/material.dart';
3
import 'package:kkiapay_flutter_sdk/kkiapayWebview.dart';
4
import 'package:kkiapay_flutter_sdk/utils/Kkiapay.dart';
5
​
6
void main() => runApp(App());
7
​
8
void sucessCallback(response, context) {
9
  Navigator.pop(context);
10
  Navigator.push(
11
    context,
12
    MaterialPageRoute(
13
        builder: (context) => SuccessScreen( 
14
              amount: response['amount'],
15
              transactionId: response['transactionId']
16
            )),
17
  );
18
}
19
​
20
final kkiapay = Kkiapay(
21
    sucessCallback: sucessCallback,
22
    amount: '2000',
23
    sandbox: true,
24
    data: 'fakedata',
25
    apikey: 'xxxxxxxxxxxxxxxxxxxxxxx',
26
    phone: '97000000',
27
    name: 'JOHN DOE',
28
    theme: '#2ba359');
29
​
30
class App extends StatelessWidget {
31
  @override
32
  Widget build(BuildContext context) {
33
    return MaterialApp(
34
        home: Scaffold(
35
      appBar: AppBar(
36
        title: Text('Kkiapay Sample'),
37
        centerTitle: true,
38
      ),
39
      body: KkiapaySample(),
40
    ));
41
  }
42
}
43
​
44
class KkiapaySample extends StatelessWidget {
45
  const KkiapaySample({
46
    Key key,
47
  }) : super(key: key);
48
​
49
  @override
50
  Widget build(BuildContext context) {
51
    return Center(
52
      child: ButtonTheme(
53
        minWidth: 250.0,
54
        height: 60.0,
55
        child: FlatButton(
56
          color: Color(0xFFE30E25),
57
          child: Text(
58
            'Pay Now',
59
            style: TextStyle(color: Colors.white),
60
          ),
61
          onPressed: () {
62
            Navigator.push(
63
              context,
64
              MaterialPageRoute(builder: (context) => kkiapay),
65
            );
66
          },
67
        ),
68
      ),
69
    );
70
  }
71
}
Copied!
Pour plus d'informations sur le package Flutter, rendez vous sur la page : KKiaPay Flutter SDK.

Plugin et SDK - Previous

SDK Android

Next - Plugin et SDK

Admin SDKs (Server-side)

Last modified 1yr ago

Copy link

Contents

Exemple d'utilisation