Accept Payments in your Flutter App

The Flutter SDK is a collection of methods and models that allow developers to build a secure, and convenient payment flow for their Flutter applications. Integration is a two-step process:

• Initiate the transaction on your server
• Complete the transaction on the SDK

The benefit of this flow is that you keep your secret key away from the client side, which is a secure standard practice.

Project Requirements

Paystack Flutter SDK adopts recent patterns in Android and iOS which limits the older versions of these OSs that we can support. When building with the Flutter SDK, ensure your project meets these requirements:

• Flutter >= 3.0.0
• iOS >= 13
• Android: Min SDK - 23 and Compile SDK - 34

Getting Started

To add the Paystack Flutter SDK to your project, run the command below in your terminal:

1flutter pub add paystack_flutter_sdk

This command adds the paystack_flutter_sdk to your package’s dependencies in the pubspec.yaml file and installs it for usage in your project. To use the library, import it in your .dart file as shown below:

1import 'package:paystack_flutter_sdk/paystack_flutter_sdk.dart';

Initialize Transaction

To initialize a transaction, make a POST request on your server to the Initialize Transaction^API endpoint:

1curl https://api.paystack.co/transaction/initialize
2-H "Authorization: Bearer YOUR_SECRET_KEY"
3-H "Content-Type: application/json"
4-d '{ "email": "customer@email.com", 
5      "amount": "500000"
6    }'
7-X POST

1{
2  "status": true,
3  "message": "Authorization URL created",
4  "data": {
5    "authorization_url": "https://checkout.paystack.com/nkdks46nymizns7",
6    "access_code": "nkdks46nymizns7",
7    "reference": "nms6uvr1pl"
8  }
9}

On a successful initialization of the transaction, you get a response that contains an access_code. You need to return this access_code back to your mobile app.

Complete Transaction

With an access_code in place, there are two steps required to complete the transaction in the mobile app:

1. Initialize the SDK
2. Launch the payment UI

Initialize the SDK

In this step, you set up the SDK with the necessary config, indicating how it will work. At the moment, the only compulsory parameter is the publicKey which is used to verify the access code and resume the transaction on the mobile app:

1final _publicKey = "pk_domain_xxxx";
2final _accessCode = "access_code";
3final _paystack = Paystack();
4
5initialize(String publicKey) async {
6  try {
7    final response = await _paystack.initialize(publicKey);
8    if (response) {
9      log("Sucessfully initialised the SDK");
10    } else {
11      log("Unable to initialise the SDK");
12    }
13  } on PlatformException catch (e) {
14    log(e.message!);
15  }
16}

You can learn more about the initialize method and its parameters in the SDK reference.

Launch the payment UI

The payment UI consists of the different payment channels that your customers can interact with at the point of payment. With the SDK intialized, you can call the launch method with the access code as shown below:

1String _reference = "";
2
3launch() async {
4  String reference = "";
5  try {
6    final response = await _paystack.launch(_accessCode);
7    if (response.status == "success") {
8      reference = response.reference;
9      log(reference);
10    } else if(response.status == "cancelled") {
11      log(response.message);
12    } else {
13      log(response.message);
14    }
15  } on PlatformException catch (e) {
16    log(e.message!);
17  }
18
19  setState(() {
20    _reference = reference;
21  });
22}

The launch method returns a TransactionResponse or PaystackException object which you can learn more about in the SDK reference.

Conclusion

You can check out the SDK reference to learn more about it’s methods. There’s also a sample app in the SDK repo that shows a simple implementation of the SDK.