New post Need visibility? Apply for a FREE post for your Startup.Β  Apply Here


A simple way to integrate/implement Payment Gateway in Flutter app – (Paystack).

3 Mins read

Hello everyone and welcome to a brand new tutorial series on Flutter. Today, we’re going to learn how to integrate or implement a payment gateway into our flutter application using the paystack payment platform.

If you want to know more about some cogent flutter Tricks and Tips and How to achieve tasks easily in Flutter, consider following me and sign up for the newsletter so you don’t miss any updates and subscribe to my YouTube Channel as well. Thanks

Let’s get started

For a full explanation on this topic, kindly watch the video tutorial

A simple way to integrate or implement Payment Gateway in flutter (Paystack).

The first thing you need to do is to create an account with paystack if you haven’t done so before, just go to this address and create an account.

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.

Screenshot 2021-02-26 144944.png

Create a new flutter project or you can use any existing flutter projects, we’re going to use a package called Paystack Manager, so head over to your pubspec.yaml file and install the dependency

  paystack_manager: ^1.0.4

Create a new dart file e.g payment.dart, we’re only going to display a button and the function for payment on this page

On the button pressed, we’re going to call the _processPayment function.

   onPressed: _processPayment, // this function will be declear later
    child: Text(
      "Pay N1,000",

Process payment function πŸ‘‡

void _processPayment() {
    try {
      PaystackPayManager(context: context)
// Your company Image
          image: NetworkImage(
        ..setAmount(100000) // you need to add two zeros at the end e.g 100000 = N1,000.00
// you can set your own unique transaction reference, here am using timestamp
        ..setCurrency("NGN") // Set currency, the platform only has three currencies, when registering the
list of countries listed is the currency that is available for you to use
        ..setEmail("") // user email address and information
            "custom_fields": [
                "value": "TechWithSam", // set this your company name
                "display_name": "Payment_to",
                "variable_name": "Payment_to"
    } catch (error) {
      print('Payment Error ==> $error');

  void _onPaymentSuccessful(Transaction transaction) {
    print('Transaction succesful');
        "Transaction message ==> ${transaction.message}, Ref ${transaction.refrenceNumber}");

  void _onPaymentPending(Transaction transaction) {
    print('Transaction Pending');
    print("Transaction Ref ${transaction.refrenceNumber}");

  void _onPaymentFailed(Transaction transaction) {
    print('Transaction Failed');
    print("Transaction message ==> ${transaction.message}");

  void _onCancel(Transaction transaction) {
    print('Transaction Cancelled');


Frame 1.png

Let’s now test our payment app, after clicking on pay you will get the layout of the payment page where you can select either Pay with Card or Pay with Bank. Since our key is still on test mode we can only test our payment app with a test credit card πŸ’³ and paystack already provides that, to get a list of test credit cards you can use just click this URL ==> Test Cards.

Process: Click pay –> Pay with Card –> Input a test card –>Submit –> 4-digit pin –> OTP –> Payment Response.

Frame 1 (1).png

If you check your email, you’re going to receive an email saying you just received a test payment and some other info.

And that’s all the major stuff you need to know πŸ‘Œ, You should check out the video for the full explanation.

Full Source Code πŸ‘‡ – Show some ❀️ by starring ⭐ the repo and do follow me πŸ˜„!

I hope you have learned one thing or the other, kindly give this article much appreciation you want if you enjoy it, feel free to ask a question and leave a comment if you feel like it 🀭. Thanks for reading and see you in the next series.

πŸ”— Let’s Connect πŸ”— –> Github | Twitter | Youtube | WhatsApp | LinkedIn | Patreon | Facebook.

Join the Flutter Dev Community πŸ‘¨β€πŸ’»πŸ‘¨β€πŸ’» –> Facebook | Telegram | WhatsApp | Signal.

Subscribe to my Telegram channel | Youtube channel | and also to the newsletter in the input box above or below πŸ‘†πŸ‘†. Thanks

Happy Fluttering πŸ₯°πŸ‘¨β€πŸ’»

18 posts

About author
I'm passionate about learning and teaching programming, majorly Flutter at the moment. I make friends, develop, or learn from them.
Related posts
MobileNewsNow you knowRandom

Photography Just Got Better With The New GCAM 8.7 For Android Smartphones

2 Mins read
Now in 2023, about 86.41% of the world’s population own a smartphone, which translates to 6.92 Billion people. This is to state…
Big StoryMobileNews

Samsung to Offer Higher Quality Photo Uploads on Instagram, Snapchat, TikTok

1 Mins read
Samsung has reportedly partnered with popular social media platforms Instagram, Snapchat, and TikTok in order to improve the quality of pictures taken…

Samsung Galaxy S23, Galaxy S23+ New Colour Options Tipped

1 Mins read
Samsung Galaxy S23 series, which may include the vanilla Samsung Galaxy S23, Galaxy S23+, and Galaxy S23 Ultra, has been the subject…
Get powered up with Techpadi Newsletter

Be the first to know what's happening in the African tech space

Leave a Reply