FonePay Flutter

An un-official Flutter plugin for FonePay Payment Gateway. With this plugin, you can easily integrate FonePay Payment Gateway into your Flutter app and start accepting payments from your customers. Whether you’re building an eCommerce app or any other type of app that requires payments, this plugin makes the integration process simple and straightforward.

Note

This package doesn’t use any plugin or native APIs for payment initialization. Instead, it is based on the Flutter InAppWebView package. A shoutout to the developer of InAppWebView package for providing such a useful package.

Features

• Easy integration
• No complex setup
• Pure Dart code
• Simple to use

Requirements

• Android: minSdkVersion 17 and add support for androidx ( see AndroidX Migration)
• iOS: --ios-language swift, Xcode version >= 11

Setup

iOS

Usage

1. Add fonepay_flutter as a dependency in your pubspec.yaml file:

dependencies:
  fonepay_flutter: ^1.0.0

2. Import the package in your Dart code:

import 'package:fonepay_flutter/fonepay_flutter.dart';

3. Create an instance of FonePayConfig with your payment information:

The FonePayConfig class holds the configuration details for the payment gateway. Pass an instance of FonePayConfig to the init() method of the FonePay class to initiate the payment process.

final config = FonePayConfig.live(
  pid: 'liveMerchantCode',
  ru: 'https://example.com/fonepay/return',
  prn: '123456',
  amt: 100.0,
  sk: 'mySecretKey',
  r1: 'Payment for order #123',
  r2: 'Additional info',
);

4. Initialize the payment by calling FonePay.init() method:

final result = await FonePay.i.init(
  context: context,
  fonePayConfig: config,
);

5. Check the payment result:

After the payment is completed or cancelled by the user, the plugin returns an instance of FonePayPaymentResult. If the payment was successful, hasData will be true and you can access the FonePayResponse object using data. If the payment was unsuccessful, hasError will be true and you can access the error message using error.

if (result.hasData) {
  // Payment successful
  final response = result.data!;
  print('Payment successful. Ref ID: ${response.uid}');
} else {
  // Payment failed or cancelled
  final error = result.error!;
  print('Payment failed or cancelled. Error: $error');
}

Dev/Live Mode

FonePayConfig supports both dev and live mode. For live mode, use the FonePayConfig.live() constructor, and for dev mode, use the FonePayConfig.dev() constructor. Here’s an example of using the dev mode:

final config = FonePayConfig.dev(
  ru: 'https://example.com/fonepay/return',
  prn: '123456',
  amt: 100.0,
  r1: 'Payment for order #123',
  r2: 'Additional info',
);

APIs

Class : FonePay

The FonePay provides a way to initialize FonePay payment using a custom button or a custom UI. Here’s an example:

Methods

init({required BuildContext context,required FonePayConfig fonePayConfig,FonePayPageContent? pageContent})

Initializes payment method

final result = await
FonePay.i.init(context: context,fonePayConfig: config,pageContent: FonePayPageContent
(
appBar: AppBar
(
title: Text
('FonePay Payment
'
)
,
)
,
progressLoader: CircularProgressIndicator
(
),)
,
);

Class : FonePayPageContent

The FonePayPageContent class provides options for customizing the FonePay payment screen. You can add an app bar and a custom loader to the payment screen. Here’s an example:

FonePayPageContent(
  appBar: AppBar(
    title: Text('FonePay Payment'),
  ),
  progressLoader: CircularProgressIndicator(),
);

Class: FonePayConfig

The FonePayConfig class provides configuration options for FonePay payments.

Properties

• ru (required): Live – Return Url where FonePay system notifies payment information to merchant site.
• serverUrl: FonePay prod server URL. Defaults to “https://clientapi.fonepay.com/api/merchantRequest?”.
• sk (required): Secret key for the FonePay account.
• pid: Live Merchant Code, defined by FonePay system. Defaults to “fonepay123”.
• prn (required): Product Reference Number, need to be sent by the merchant. Must be between 3 and 25 characters.
• amt (required): Payable amount, specified as a double with a maximum of 18 digits.
• crn: Currency code. Defaults to “NPR”.
• dt: Payment date in MM/dd/yyyy format. Defaults to the current date.
• r1 (required): Payment details that identify what the payment was for (e.g., receipt ID or payment description).
• r2: Additional information, defaults to “N/A”.
• md: Payment mode, defaults to “P”.
• dv: SHA512 hashed value, generated using the secure hash calculation method described below.

Methods

FonePayConfig.live

Initializes a configuration for FonePay live payments.

Parameters

• pid (required): Live Merchant Code, defined by FonePay system.
• ru (required): Live – Return Url where FonePay system notifies payment information to merchant site.
• prn (required): Product Reference Number, need to be sent by the merchant.
• amt (required): Payable amount.
• crn: Currency code. Defaults to “NPR”.
• dt: Payment date in MM/dd/yyyy format. Defaults to the current date.
• sk (required): Secret key for the FonePay account.
• r1 (required): Payment details that identify what the payment was for.
• r2: Additional information. Defaults to “N/A”.
• md: Payment mode. Defaults to “P”.

Example

final config = FonePayConfig.live(
  pid: 'liveMerchantCode',
  ru: 'https://example.com/fonepay/return',
  prn: '123456',
  amt: 100.0,
  sk: 'mySecretKey',
  r1: 'Payment for order #123',
  r2: 'Additional info',
);

FonePayConfig.dev

Initializes a configuration for FonePay development stage.

Parameters

• ru (required): Live – Return Url where FonePay system notifies payment information to merchant site.
• prn (required): Product Reference Number, need to be sent by the merchant.
• amt (required): Payable amount.
• crn: Currency code. Defaults to “NPR”.
• dt: Payment date in MM/dd/yyyy format. Defaults to the current date.
• r1 (required): Payment details that identify what the payment was for.
• r2: Additional information. Defaults to “N/A”.
• md: Payment mode. Defaults to “P”.

Example

final config = FonePayConfig.dev(
  ru: 'https://example.com/fonepay/return',
  prn: '123456',
  amt: 100.0,
  r1: 'Payment for order #123',
  r2: 'Additional info',
);

Class: FonePayResponse

Represents a response from the FonePay API.

Properties

Methods

toJson()

Converts the FonePayResponse instance to a JSON object.

Returns

A Map object representing the FonePayResponse instance.

Class: FonePayPaymentResult

Class representing the result of a payment transaction.

Properties

• data: The payment response data, if the payment was successful. Null otherwise.
• error: The error message, if the payment failed or was cancelled. Null otherwise.
• hasData: A boolean indicating whether the payment was successful and contains a non-null data property.
• hasError: A boolean indicating whether the payment failed or was cancelled and contains a non-null error property.

Class: FonePayButton

The FonePayButton class is a StatelessWidget that represents a button that initiates a FonePay payment. It takes several parameters to configure the button and initiate the payment.

Parameters

• width (optional): The width of the button.
• height (optional): The height of the button.
• onSuccess (required): A callback function that will be called when the payment is successful. It takes a FonePayResponse object as its parameter.
• onFailure (required): A callback function that will be called when the payment fails. It takes a failure message as its parameter.
• paymentConfig (required): A FonePayConfig object that contains the configuration for the FonePay payment.
• radius (optional): The border radius of the button.
• widget (optional): A widget that will be displayed instead of the button title. This can be used to display an icon or a custom widget.
• title (optional): The title of the button. The default value is “Pay with FonePay”.
• textStyle (optional): The text style of the button title.
• style (optional): The ButtonStyle of the button.

Example Usage

FonePayButton(
    paymentConfig: FonePayConfig(),
    onSuccess: (response) {
        // Handle successful payment
        print('Payment successful! Response: ${response.toJson()}');
    },
    onFailure: (message) {
        // Handle failed payment
        print('Payment failed. Message: $message');
    },
)

Class: FonePayUtils

The FonePayUtils class provides utility functions for FonePay integration.

Static Method: formatDate

static String formatDate
(

DateTime date
)

Returns the formatted date string in the format of MM/dd/yyyy.

date (required): The DateTime object to be formatted.

Method: generateRandomString

String generateRandomString
(
{
int
?
len
}
)

• Generates a random string of specified length or a default length of 6 if not specified.

len (optional): The length of the random string to be generated. If not specified, the default length of 6 will be used. Note: To prevent payment request failure due to duplicate PRN number in FonePayConfig, it is recommended to generate a unique PRN number by utilizing this method.

Dev Testing Information

To access the development environment, use the following credentials:

• Bank: Any bank available in dev mode [Currently Global IME Bank]
• Username: [any 10 digit random Nepali number starting with 98]
• Password: [anything random, like 1212122]
• OTP: [anything random, like 1212122]

Please note that these credentials are for testing purposes only and should not be used in production.

Screenshots

Here are some screenshots of the FonePay Payment Gateway integrated into a ecommerce Flutter app:

Run the example app

• Navigate to the example folder
• cd example
• Install the dependencies
  • flutter pub get
• Set up configuration FonePayConfig.live() or directly run with just FonePayConfig.dev() in dev mode
• Start the example
  • Terminal : flutter run

License

This plugin is released under the MIT License. See LICENSE for details.

Contributions

Contributions are welcome! To make this project better, Feel free to open an issue or submit a pull request on Github..

Contact

If you have any questions or suggestions, feel free to contact me on LinkedIn.

GitHub

View Github