flutter_fincra_checkout 0.0.3

An unofficial Flutter SDK for integrating Fincra Checkout. Seamlessly process payments via an in-app WebView, handle secure redirects, and capture transaction results.

flutter_fincra_checkout

A production-ready Flutter package that provides a clean and secure integration for Fincra Checkout payments using an in-app WebView.

Important Note on Security

DO NOT store your Fincra secret keys inside your Flutter application. This SDK is designed to handle only the mobile checkout experience. The actual payment session should be created securely from your backend server.

Features

• Full-screen checkout experience.
• Automatic detection of payment completion URL changes.
• Navigation controls and loading indicators.
• Seamlessly handles user cancellation.
• Built-in error handling.

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  flutter_fincra_checkout: ^1.0.0

Setup

Android

Ensure your minSdkVersion in android/app/build.gradle is at least 19 (WebView requirements). Also, add internet permissions in your AndroidManifest.xml if not already present:

<uses-permission android:name="android.permission.INTERNET"/>

iOS

Opt-in to the embedded views preview by adding a boolean property to the app's Info.plist file with the key io.flutter.embedded_views_preview and the value YES.

Usage

1. Create a Payment Session (Backend)

Your backend should communicate with the Fincra API to initiate a checkout session. Fincra will return a checkoutUrl. Pass this URL to your Flutter app.

2. Open the Fincra Checkout (Flutter)

Use the FincraCheckout.open method to launch the WebView. You can handle the response using async/await (recommended) or with traditional callbacks.

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

// ... Inside a widget method

Future<void> _startPayment(BuildContext context) async {
  // Replace with the URL generated by your backend
  const checkoutUrl = "https://checkout.fincra.com/some_session_id";
  
  final result = await FincraCheckout.open(
    context,
    checkoutUrl: checkoutUrl,
    redirectUrl: "https://your-backend.com/webhook", // Optional: secure URL interception
    appBarTitle: "Complete Payment", // Optional UI Customization
    showCancelConfirmationDialog: true, // Prevents accidental closing
    closeIcon: const Icon(Icons.arrow_back), // Custom close icon
    loadingWidget: const CircularProgressIndicator(color: Colors.red), // Custom loader
  );
  
  switch (result) {
    case FincraCheckoutSuccess():
      print("Payment Success! Reference: ${result.response.reference}");
      // Verify payment status with your backend here
      break;
    case FincraCheckoutError():
      print("Payment Failed: ${result.error.message}");
      break;
    case FincraCheckoutCancelled():
      print("User cancelled the payment");
      break;
  }
}

Advanced: Custom Layout

If you want full control over the layout (e.g., embedding the checkout in a Bottom Sheet instead of a full screen), you can use the raw CheckoutWebView widget directly.

CheckoutWebView(
  checkoutUrl: url,
  redirectUrl: "https://your-backend.com/webhook",
  appBarTitle: "Secure Payment",
)

Models

FincraPaymentResponse

• reference: The unique transaction reference.
• transactionId: Fincra's internal transaction ID.
• status: The status of the transaction (e.g., 'success').
• message: Optional message from Fincra.
• rawResponse: The raw parameters extracted from the completion URL.

FincraPaymentError

• code: The error code or status.
• message: A description of the error.

Example

Check out the example/ directory for a complete working application demonstrating the payment flow.