SDK Flutter

This SDK is designed to allow the integration of KKiaPay into your Flutter mobile application. To set it up you will need to create an account on kkiapay.me platform and follow the process here describes :

1. Install the KKiaPay Flutter SDK

To install this plugin you will have to add kkiapay_flutter_sdk to the pubspec.yml file contained in your project.

Practical guide for installing a package with Flutter : Installing a package.

   dependencies:
     flutter:
       sdk: flutter
     kkiapay_flutter_sdk:

2. Import the KKiaPay's package

 import 'package:kkiapay_flutter_sdk/kkiapayWebview.dart'

3. Create a KKiaPay's instance

Attribute	Type	Description
amount	Numeric	The amount to be paid (in XOF)
phone	String	A valid money mobile number (MTN or MOOV) Ex: 22997000000 Ex: 22995000000
name	String	The first and last name of the initiator of the payment
apikey	String	The public key linked to your KKiaPay account
sandbox	Boolean	Allows you to switch from the test environment to the production environment. The value true for this attribute means that you are in a test environment
data	String	The data or information related to a transaction and interpretable by your system
successCallback	Function	The callback function called only when the payment was successful

final kkiapay = Kkiapay(
    @required sucessCallback: Function,
    @required amount: String,
    @required apikey: String,
    sandbox: bool,
    data: String,
    phone: String,
    name: String,
    theme: dynamic
);

The successCallback function called at the end of a success type payment can be used to notify the backend that the transaction has been successfully completed; redirect the user to another view of the mobile application; or generate an invoice. It all depends on the workflow of the mobile application. The parameters of the function are :

• The context of the payment widget

• The response, which is an object containing the amount and the transaction identifier (transactionId)

 void successCallback(response, context) {}

In order to verify a payment transaction, choose to configure a webhook.

4. Create a KKiaPay's instance

In order to add the KKiaPay payment button in your mobile application you will need to create a Flutter KkiapaySample widget. A click on the said button will call the KKiaPay instance defined above and will trigger the display of the KKiaPay widget with the specified payment information.

 class KkiapaySample extends StatelessWidget {
   const KkiapaySample({
     Key key,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     return Center(
       child: ButtonTheme(
         minWidth: 250.0,
         height: 60.0,
         child: FlatButton(
           color: Color(0xFFE30E25),
           child: Text(
             'Pay Now',
             style: TextStyle(color: Colors.white),
           ),
           onPressed: () {
             Navigator.push(
               context,
               MaterialPageRoute(builder: (context) => kkiapay), 
             );
           },
         ),
       ),
     );
   }
 } 

Replace the body attribute of your Flutter App starter by the KkiapaySample widget implemented below:

class App extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
         home: Scaffold(
       appBar: AppBar(
         title: Text('Kkiapay Sample'),
         centerTitle: true,
       ),
       body: KkiapaySample(),
     ));
   }
 }

Example

import 'package:example/screens/successScreen.dart';
import 'package:flutter/material.dart';
import 'package:kkiapay_flutter_sdk/kkiapayWebview.dart';
import 'package:kkiapay_flutter_sdk/utils/Kkiapay.dart';

void main() => runApp(App());

void sucessCallback(response, context) {
  Navigator.pop(context);
  Navigator.push(
    context,
    MaterialPageRoute(
        builder: (context) => SuccessScreen( 
              amount: response['amount'],
              transactionId: response['transactionId']
            )),
  );
}

final kkiapay = Kkiapay(
    sucessCallback: sucessCallback,
    amount: '2000',
    sandbox: true,
    data: 'fakedata',
    apikey: 'xxxxxxxxxxxxxxxxxxxxxxx',
    phone: '97000000',
    name: 'JOHN DOE',
    theme: '#2ba359');

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('Kkiapay Sample'),
        centerTitle: true,
      ),
      body: KkiapaySample(),
    ));
  }
}

class KkiapaySample extends StatelessWidget {
  const KkiapaySample({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ButtonTheme(
        minWidth: 250.0,
        height: 60.0,
        child: FlatButton(
          color: Color(0xFFE30E25),
          child: Text(
            'Pay Now',
            style: TextStyle(color: Colors.white),
          ),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => kkiapay),
            );
          },
        ),
      ),
    );
  }
}

For more informations on the SDK please follow the link below : KKiaPay Flutter SDK.