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

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.

Last updated