Nimbbl Flutter WebView SDK - Merchant Integration Guide #

🚀 Release Announcement #

Nimbbl Flutter WebView SDK v1.1.1 is now available. This release delivers a seamless, production-ready payment integration solution for Flutter applications across Android, iOS, and Web platforms.

What's New #

This release introduces comprehensive improvements and enhancements:

• 🌐 Web Platform Support: Full native web integration using Dart JS interop, enabling seamless payment processing in Flutter web applications

Key Features #

• 🚀 Simplified Integration: Get started with just 3 lines of code - no complex setup required
• 🌐 Multi-Platform Support: Unified API for Android, iOS, and Web platforms with automatic platform detection
• ✅ Production Ready: Battle-tested with thousands of successful transactions across all platforms
• 📱 Native Performance: Leverages native WebView implementations for optimal performance on each platform
• 🔒 Secure & Reliable: Built on proven native SDKs with enterprise-grade security and compliance
• 📚 Comprehensive Documentation: Complete integration guides, API references, and real-world examples
• ⚡ Optimized Performance: Fast initialization and efficient payment processing with minimal overhead

Platform Capabilities #

• Android: Full native Android WebView integration with complete payment method support and custom WebView client handling
• iOS: Native iOS WebView integration with WKWebView-based implementation and seamless Flutter compatibility
• Web: Native web support using Dart JS interop with Nimbbl Sonic web library, enabling full payment functionality in browser-based Flutter applications

Ready to integrate? Follow our quick start guide below to get started in minutes.

Quick Start (3 Lines of Code) #

1. Add Dependency #

dependencies:
  nimbbl_mobile_kit_flutter_webview_sdk: ^1.1.1

2. Initialize SDK #

await NimbblCheckoutSDK.instance.initialize();

3. Process Payment #

final result = await NimbblCheckoutSDK.instance.checkout(
  CheckoutOptions(orderToken: "your_order_token_from_backend")
);

// Handle payment result
if (result['status'] == 'success') {
  print('Payment successful!');
  print('Payment ID: ${result['payment_id']}');
} else if (result['status'] == 'failed') {
  print('Payment failed: ${result['message']}');
} else if (result['status'] == 'cancelled') {
  print('Payment cancelled by user');
} else if (result['status'] == 'redirect') {
  // Web platform: redirect mode - browser will redirect to checkout
  print('Redirecting to checkout...');
  print('Callback URL: ${result['callback_url']}');
}

🌐 Platform Support #

The SDK supports multiple platforms:

• ✅ Android: Full native Android WebView integration (v4.0.9)
• ✅ iOS: Full native iOS WebView integration (v2.0.16)
• ✅ Web: Native web support using Dart JS interop with Nimbbl Sonic web library

Web Platform Notes #

When running on web:

• The SDK automatically detects the web platform and uses the web implementation
• No additional configuration required - works out of the box
• Uses browser's native navigation for payment flow
• Supports both redirect and popup checkout experiences
• Callback URLs are automatically handled using the current origin

Web Platform Requirements:

• Flutter 3.3.0 or higher
• Modern web browser (Chrome, Firefox, Safari, Edge)
• HTTPS recommended for production (required for some payment methods)

Complete Integration Example #

Here's a complete Flutter widget implementation showing how to integrate the Nimbbl SDK:

import 'package:flutter/material.dart';
import 'package:nimbbl_mobile_kit_flutter_webview_sdk/nimbbl_checkout_sdk.dart';
import 'package:nimbbl_mobile_kit_flutter_webview_sdk/types.dart';

class PaymentScreen extends StatefulWidget {
  @override
  _PaymentScreenState createState() => _PaymentScreenState();
}

class _PaymentScreenState extends State<PaymentScreen> {
  bool _isLoading = false;

  @override
  void initState() {
    super.initState();
    _initializeSDK();
  }

  // Step 1: Initialize SDK
  Future<void> _initializeSDK() async {
    
    // Initialize with default configuration
    await NimbblCheckoutSDK.instance.initialize();
    
  }

  // Step 2: Process Payment
  Future<void> _processPayment() async {
    setState(() => _isLoading = true);

    try {
      final options = CheckoutOptions(
        orderToken: "your_order_token_from_backend",
      );

      final result = await NimbblCheckoutSDK.instance.checkout(options);

      if (result['status'] == 'success') {
        print('Payment successful!');
        print('Payment ID: ${result['payment_id']}');
      } else if (result['status'] == 'failed') {
        print('Payment failed: ${result['message']}');
      } else if (result['status'] == 'redirect') {
        // Web platform: redirect mode - browser will redirect to checkout
        print('Redirecting to checkout...');
      }
    } catch (e) {
      print('Error: $e');
    } finally {
      setState(() => _isLoading = false);
    }
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: _isLoading ? null : _processPayment,
          child: _isLoading ? CircularProgressIndicator() : Text('Pay Now'),
        ),
      ),
    );
  }
}

📚 Documentation #

• API Reference
• Sample App

🔧 Platform-Specific Features #

Android #

• Native Android WebView integration (v4.0.9)
• Full support for all payment methods
• Custom WebView client for payment handling

iOS #

• Native iOS WebView integration
• Full support for all payment methods
• WKWebView-based implementation
• Seamless Flutter compatibility

Web #

• Pure Dart implementation using dart:js_interop
• Integration with Nimbbl Sonic web library
• Automatic callback URL handling
• Support for redirect and popup checkout experiences