How to integrate PayStack Payment Gateway in Flutter App ?

PayStack Integration In Flutter

Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.

Flutter transforms the app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase.

What is PayStack Payment Gateway ?

Paystack is a Modern online and offline payments for Africa. It helps businesses in Africa get paid by anyone, anywhere in the world.

Paystack offers an online payment platform that makes it easy for merchants to time, which as a result, may require the transfer or maintenance of your personally Paystack will evaluate whether and to what extent the processing of Personal account, we reserve the right to cancel our service to you and/or your account.

Payment gateways allow you to take card payments online or they can offer credit card payment processing online and offline, as well as Stripe is yet another powerful payment platform designed for internet businesses,.

Kindly follow below steps to get started.

1. Go to https://paystack.com/ and create a free account.
2. After creating a free account on your dashboard you will see two keys located at the button of the page, Secret and Public key we’re going to be making use of the secret key.

Note: The keys are still on Test Mode, so if you want to Activate it to live just click on Activate Business on your dashboard and submit your information and you’re good to go but this tutorial we’re only going to use the test key and the code is still the same as when you activate your business you only just have to change the key and that’s all.

3. Go to Paystack Login to access the dashboard. Now add this package into our project.

flutter_paystack:
async:

4. Now run a below command :

flutter pub get

Now create a new screen which has list of selected item along with total amount to pay. Initialize a PaystackPlugin like a below :

final plugin = PaystackPlugin();

Into a initState() method we will initialize a payStack plugin so our method will have a code snippet like a below:

@override
  void initState() {
  plugin.initialize(publicKey: publicKeyTest);
  super.initState();
}

Now we will create a button which will pay a specific amount. We will create a method. chargeCard() will have a code snippet like a below:

chargeCard() async {
    var charge = Charge()
      ..amount = 10000 * 100
      ..reference = _getReference()
      ..putCustomField('custom_id', '84687546')
      ..email = 'khandlakalpesh20@gmail.com';
CheckoutResponse response = await plugin.checkout(
      context,
      method: CheckoutMethod.card,
      charge: charge,
    );
if (response.status == true) {
      _showMessage('Payment was successful!!!');
    } else {
      _showMessage('Payment Failed!!!');
    }
  }

_showMessage will have a code snippet like a below :

void _showMessage(String message) {
    final snackBar = SnackBar(content: Text(message));
    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  }

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_paystack/flutter_paystack.dart';
import 'package:flutter_paystack_integration/widgets/pay_button_widget.dart';
void main() => runApp(
MyApp(),
);
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: PaystackCardMethod(),
);
}
}
class PaystackCardMethod extends StatefulWidget {
@override
_PaystackCardMethodState createState() => _PaystackCardMethodState();
}
class _PaystackCardMethodState extends State<PaystackCardMethod> {
String publicKeyTest = 'pk_test_fa5c1528fe08ce40bd082d85a3faaa6b9a5c150f';
final plugin = PaystackPlugin();
@override
void initState() {
plugin.initialize(publicKey: publicKeyTest);
super.initState();
}
void _showMessage(String message) {
final snackBar = SnackBar(content: Text(message));
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}
String _getReference() {
var platform = (Platform.isIOS) ? 'iOS' : 'Android';
final thisDate = DateTime.now().millisecondsSinceEpoch;
return 'ChargedFrom${platform}_$thisDate';
}
chargeCard() async {
var charge = Charge()
..amount = 10000 * 100
..reference = _getReference()
..putCustomField('custom_id', '84687546')
..email = 'khandlakalpesh20@gmail.com';
CheckoutResponse response = await plugin.checkout(
context,
method: CheckoutMethod.card,
charge: charge,
);
if (response.status == true) {
_showMessage('Payment was successful!!!');
} else {
_showMessage('Payment Failed!!!');
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Paystack Integration",),
centerTitle: true,
elevation: 0.0,
),
body: Container(
padding: EdgeInsets.all(10),
child: Center(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
padding: EdgeInsets.all(15),
child: PayButtonWidget(
onCallBackTap: () => chargeCard(),
),
),
)),
);
}
}

PayButtonWidget will have a code snippet like a below :

import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class PayButtonWidget extends StatelessWidget {
final Function onCallBackTap;
PayButtonWidget({
this.onCallBackTap,
});
@override
Widget build(BuildContext context) {
return GestureDetector(
child: Container(
width: MediaQuery.of(context).size.width,
height: 45,
child: ButtonTheme(
minWidth: MediaQuery.of(context).size.width,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.all(10),
primary: Colors.blueAccent,
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
),
),
onPressed: onCallBackTap,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Pay Now!!!',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
],
),
),
),
),
);
}
}

A Complete code can be found from https://github.com/Kalpesh209/paystack_integration_in_flutter

Thanks for being with us on a flutter journey !!!
Keep Reading , Keep Fluttering !!!