Skip to main content

Integrate this SDK with your Flutter App and start accepting payments from your customers.

SAMPLE EXPERIENCE

Compatibilities and Dependencies​

  • Flutter version: 3.24.3+
  • Dart version: 3.5.3+
  • Minimum Android SDK version: 23+
  • iOS Deployment Target: 12.0+

Install the Nimbbl Flutter SDK​

Add the Nimbbl SDK to your Flutter project by adding the following dependency in your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  nimbbl_mobile_kit_flutter_webview_sdk: 1.0.4

Installing Dependencies​

To install the dependencies listed in your pubspec.yaml file, run the following command:

flutter pub get

Initialise the Nimbbl Flutter SDK​

Initialize the Nimbbl SDK before you start a payment transaction. You can do this in the initState of your main widget or before invoking the payment.

import 'package:nimbbl_flutter_sdk/nimbbl_flutter_sdk.dart';
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    super.initState();
    NimbblCheckoutSDK.getInstance().init(context);
  }
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Nimbbl Flutter SDK Sample'),
        ),
        body: Center(
          child: Text('Welcome to Nimbbl Checkout'),
        ),
      ),
    );
  }
}

Launching the Checkout​

Understanding Checkout Options​

Nimbbl lets you enforce a payment mode on the Checkout. This can be done by setting up the paymentModeCode property. There are other related properties in to each different payment mode, you can read it in the table below. If you don't set paymentModeCode the consumer is shown the full Checkout with all available payment modes.

Option PropertiesTypeMandatory?Description
orderTokenstringtrueThis would have been generated from your server during order creation using V3 create-order API.
paymentModeCodestringfalseIn case of specific payment mode, this property is mandatory. Possible values net_banking, card, upi, wallet. If you don't pass payment_mode_code the consumer is shown the full Checkout with all available payment modes.
bankCodestringfalseOnly to be passed in case of net_banking. Example: hdfc. To get the full list of banks supported for you, please use this API. If it isn't passed, Checkout will open with a page for the user to choose their bank from enabled banks
walletCodestringfalseOnly to be passed in case of wallet. Example: jio_money. To get the full list of wallets supported for you, please use this API. If it isn't passed, Checkout will open with a page for the user to choose their wallet from enabled wallets
paymentFlowstringfalseOnly to be passed in case of upi to determine the flow. Possible values collect, intent. If it isn't passed, Checkout will open with page for the user to enter their UPI ID or pay using a QR or choose a UPI app

Setting the Checkout Options​

  NimbblCheckoutOptions options = NimbblCheckoutOptions(
    orderToken: token_from_create_order,  // Token from the Create Order API
    // only if you want to enforce a specific payment method
    paymentModeCode: <optional>,
    bankCode: <optional>,
    paymentFlow: <optional>, 
    walletCode: <optional>,
  );

Invoke the Checkout​

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

Capture Transaction Response​

You have to implement NimbblCheckoutPaymentListener to receive callbacks for the payment result.

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

    if (result != null) {
      if (result.isSuccess!) {
        // On successful payment
        Utils.showToast(context,
            '$orderIdStr${result.data?["order_id"]}, $statusStr${result.data?["status"]}');

        Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => OrderSuccessView(
            orderID: result.data?["order_id"],
            status: result.data?["status"],
          ),
        ));
      } else {
        // Handle payment failure
        Utils.showToast(context, result.data?['message']);
      }

      // Debug mode logging
      if (kDebugMode) {
        print('isSuccess->${result.isSuccess}/message-->${result.data?['message']}');
      }
    }
  } catch (e) {
    print("Error during checkout: $e");
  }

A successful payment returns response to the Checkout Form, for details related to processing response check Completing the Integration.

IMPORTANT
  • Share the response parameters received to your server
  • This will need to be validated on your server before you decide to provide goods or services
  • More details available on processing the response in Completing the Integration