HesabPay Payment Gateway Integration in Flutter

How to integrate HesabPay Payment Gateway using flutter

Integrating the HesabPay Payment Gateway into a Flutter application is crucial for enabling secure transactions. To begin, ensure that you have a verified HesabPay developer sandbox account. Visit HesabPay Developer Sandbox to create your account and obtain the necessary credentials.

To integrate HesabPay into your Flutter app, you must generate an API key from your HesabPay sandbox account. This key is essential for authenticating API requests and managing payment transactions securely. After generating your API key, keep it safe as it will be used throughout your Flutter code for interacting with the HesabPay services.

In your Flutter project, you’ll need to include relevant dependencies in your pubspec.yaml file to interact with the HesabPay API. Implement functions to handle transactions, process payments, and manage responses from HesabPay. Ensure that all payment interactions are securely managed and that user data is protected.

The integration process requires careful attention to detail, including secure handling of sensitive information and proper error management. Following best practices will help you provide a reliable and efficient payment experience for your users.

By incorporating HesabPay Payment Gateway in your Flutter application, you enable seamless and secure payment processing, enhancing the functionality and reliability of your a

step 1 : create folder for your project then create flutter project using the following command in your CMD/Termina

flutter create hesabpay_integration  <== your project name 

Need to add Dependencies in pubspec.yaml

  webview_flutter: ^4.7.0
  http: ^1.2.1
  get: ^4.6.6

main.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:hesabpay_gateway/Controllers/paymentcontroller.dart';
import 'package:hesabpay_gateway/paymentpage.dart'; 

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final PaymentController paymentController = Get.put(PaymentController());

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'HesabPay Payment Flutter',
      home: FutureBuilder(
        future: paymentController.createPaymentSession([
          {'name': 'Item 1', 'price': 5},
        ]),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            if (snapshot.hasError) {
              return Center(child: Text('Error: ${snapshot.error}'));
            }
            return PaymentPage(url: paymentController.redirectUrl.value);
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}

create new class paymentpage.dart

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class PaymentPage extends StatefulWidget {
  final String url;

  PaymentPage({required this.url});

  @override
  _PaymentPageState createState() => _PaymentPageState();
}

class _PaymentPageState extends State<PaymentPage> {
  late WebViewController controller;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int progress) {},
          onPageStarted: (String url) {},
          onPageFinished: (String url) {},
          onWebResourceError: (WebResourceError error) {},
          onNavigationRequest: (NavigationRequest request) {
            if (request.url.startsWith(widget.url)) {
              return NavigationDecision.prevent;
            }
            return NavigationDecision.navigate;
          },
        ),
      )
      ..loadRequest(Uri.parse(widget.url));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Payment Page'),
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}

create controllers folder in your lib directory

then create paymentcontroller.dart under controllers folder

import 'package:get/get_rx/src/rx_types/rx_types.dart';
import 'package:get/get_state_manager/src/simple/get_controllers.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class PaymentController extends GetxController {
  RxString redirectUrl = ''.obs;

  Future<void> createPaymentSession(List<Map<String, dynamic>> items) async {
    String api_key =
        'Your API KEY Here';
    String endpoint =
        'https://api-sandbox.hesab.com/api/v1/payment/create-session';

    Map<String, String> headers = {
      'Authorization': 'API-KEY $api_key',
      'Content-Type': 'application/json',
    };

    String payload = jsonEncode({'items': items});

    http.Response response =
        await http.post(Uri.parse(endpoint), headers: headers, body: payload);

    if (response.statusCode == 200) {
      Map<String, dynamic> jsonResponse = jsonDecode(response.body);
      redirectUrl.value = jsonResponse['url'];
    } else {
      throw Exception('Failed to create payment session');
    }
  }
}

Download Source Code

if you were facing any issue with hesabpay payment gateway integration let us know to help you thank you.

HesabPay Integration in Laravel