Payment Integration in Flutter using Paystack

Paystack Payment Integration in Flutter App

In this article, we’ll be looking at card payment integration using Paystack package called flutter_paystack

Paystack is a Modern online and offline payments for Africa

Paystack helps businesses in Africa get paid by anyone, anywhere in the world

Head over to Paystack Login to access the dashboard.

If you don’t have an account you can create an account here

In your flutter project head over to pubspec.yaml and require the following packages

Please ensure it’s properly aligned as shown in the image

Head over to Paystack settings page and click on API keys & Webhook to get the public key for testing

Next go to main.dart file and add the snippet

Kindly note that the whole code was done in a page feel free to customize according to your project approach (cubit, bloc, services, etc..)

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_paystack/flutter_paystack.dart';
import 'package:flutter_paystack_integration/widgets/button.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: PaystackCardMethod());
  }
}
class PaystackCardMethod extends StatefulWidget {
  @override
  _PaystackCardMethodState createState() => _PaystackCardMethodState();
}
class _PaystackCardMethodState extends State<PaystackCardMethod> {
  String publicKeyTest =
      'pk_test_ieu49ej839u984urenewuwe06eishra'; //pass in the public test key here
  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 //the money should be in kobo hence the need to multiply the value by 100
      ..reference = _getReference()
      ..putCustomField('custom_id',
          '846gey6w') //to pass extra parameters to be retrieved on the response from Paystack
      ..email = 'tutorial@email.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: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
              padding: const EdgeInsets.all(15),
              child: PayButton(
                height: 45,
                fontSize: 15,
                text: 'Pay Now!!!',
                textColor: Colors.white,
                callback: () => chargeCard(),
                color: Colors.blueAccent,
              ),
            ),
          )),
    );
  }
}

Click the pay now button

Card details for testing payments

More card details for testing can be found here

Snackbar message when the payment is canceled

Here’s the link to this tutorial’s repository

Article research credits

Oyeolamilekan Wilburt

Thank you for reading this article.

Please kindly share with your network and feel free to use the comment section for questions, answers, and contributions.

alemsbaja

Originally published at https://alemsbaja.hashnode.dev.