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

Mobile

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

dependencies:
  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.

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

Process payment function 👇

void _processPayment() {
    try {
      PaystackPayManager(context: context)
        ..setSecretKey("{YOUR-SECRET-KEY-HERE}")
// Your company Image
        ..setCompanyAssetImage(Image(
          image: NetworkImage(
              "https://res.cloudinary.com/acctgen1/image/upload/v1612393902/TECH2-01_vw1fvg.png"),
        ))
        ..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
        ..setReference(DateTime.now().millisecondsSinceEpoch.toString())
        ..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("[email protected]") // user email address and information
        ..setFirstName("Samuel")
        ..setLastName("Adekunle")
        ..setMetadata(
          {
            "custom_fields": [
              {
                "value": "TechWithSam", // set this your company name
                "display_name": "Payment_to",
                "variable_name": "Payment_to"
              }
            ]
          },
        )
        ..onSuccesful(_onPaymentSuccessful)
        ..onPending(_onPaymentPending)
        ..onFailed(_onPaymentFailed)
        ..onCancel(_onCancel)
        ..initialize();
    } catch (error) {
      print('Payment Error ==> $error');
    }
  }

  void _onPaymentSuccessful(Transaction transaction) {
    print('Transaction succesful');
    print(
        "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');
  }

Screenshots:

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 🥰👨‍💻

Don’t miss any tech news ever!

We don’t spam! Read our privacy policy for more info.

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.
Articles
Related posts
ArticleMobileNow you knowRandom

All You Need To Know About Your iPhone Battery Health

2 Mins read
The iPhone is renowned for its sleek design, user-friendly interface, and advanced features. However, like all smartphones, it relies on a battery…
ArticleMobileRandom

Motorola Unveils Under $100 Android 14 Smartphone Better Than The iPhone 15 Specs

2 Mins read
I remember growing up, one of the phones you can easily find in the Palms on many is a Motorola blue light…
Mobile

Google Introduces Safe Browsing Feature for Smartphone Users: How it Works

2 Mins read
Google is introducing a groundbreaking security feature, dubbed “Android Safe Browsing,” aimed at safeguarding users against malicious links and websites while utilizing…
Newsletter Subscription

🤞 Don’t miss any update!

We don’t spam! Read more in our privacy policy

Join our Telegram channel here - t.me/TechpadiAfrica

Leave a Reply